菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 雷盟-前端预科(13)-20221117 [打印本页]

作者: 奔黄昏而去 时间: 2022-11-18 01:17
标题: 雷盟-前端预科(13)-20221117
今日学习内容
CSS项目实战
CSS的编码规范
为了让开发人员能更好的维护代码，节约维护成本，优化代码结构。
CSS的项目简介
主要有五个页面，分别是首页、商品列表页、商品详情页、登录以及注册的页面。
项目构建
项目文件夹 shopping
样式文件夹 CSS
样式图片的文件夹 upload
产品类的图片文件夹 images
字体类文件夹 fonts
脚本文件夹 js
favico图标的使用
favico.ico一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上
怎么样制作一个favico.ico图标
将所需的图片转化成png格式
借助第三方网站进行转化icon图标，网站：比特虫
将制作好的图标放在网站的根目录下面
在HTML页面中进行引入
SEO优化
SEO（Search Engine Optimizetion）汉译为搜索引擎优化，是一种利用搜索引擎的规则提高网站在相关搜索网站里的排名。
SEO优化的三大标签TDK
title（网站标题）：尽量不要超过30个字
description(网站描述)：多采用“我们是....”、“我们提供....”等等的相关语句

keywords（关键字）：限制为6-8个关键词，关键词之间用英文的逗号隔开
base.css来重构网页样式
在base.css中将网页中常用的样式编写后集中导入，达到对网页基本样式进行重构的目的。
常见图片的格式
jpg：对色彩信息保留比较好，产品类的图片经常使用jpg格式
gif：gif最多可以存储256色，通常用来展示简单的图形以及字体，但是可以保留透明背景和动画效果，经常用于制作一些动图效果
png：结合了jpg和gif的优点，存储形式丰富，也可以做透明背景，切图的时候优先选择png格式
PSD：是PhoteShop专用的格式，可以存放图层、通道、遮罩等等内容，前端人员可以直接从上面来复制文字，获得图片和测量大小等。

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)