CSS笔记07
属性书写顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
- 项目文件夹：pinyougou
- 样式文件夹：css
- 脚本文件夹：js
- 样式类图片文件夹：img
- 产品类图片文件夹： upload
- 字体类文件夹： fonts
css分为：
初始化
公共样式：页面的公共结构和样式
icon图标：
- 寻找网页的icon 在后面加上/favicon.ico即可
- 放在网页根目录
- 加入网页的方法：放在head中
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> * 切出来p之后，在wwww.bitbug.com中转换为icon*
网络优化三大标签
- title：最先出现的字符权重最高
- description：
<meta name="description" content="优购.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />- keywords：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />字体图标：看上去像图片，其实是字
www.iconfont.cn
icomoon.io
www.iconfont.cn
使用方法：
在样式里面加
“`
@font-face {
font-family: ‘icomoon’;
src: url(‘fonts/icomoon.eot?7kkyc2’);
src: url(‘fonts/icomoon.eot?7kkyc2#iefix’) format(‘embedded-opentype’),
url(‘fonts/icomoon.ttf?7kkyc2’) format(‘truetype’),
url(‘fonts/icomoon.woff?7kkyc2’) format(‘woff’),
url(‘fonts/icomoon.svg?7kkyc2#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
复制demo文件中的 **方框** 到相应标签中
css中记得路径问题！
- 引用：标签{
font-family:"icomoon";
}
<div>
</div>
“`
追加新标签：
上传selection.json文件，选中新的图标进去，下载新的下来，替换掉原来fonts文件夹即可
- 竖线的做法：给个div 给个高 1px的宽，加背景色。
行内元素尽量不要管上下的内边距
SEO:
logo的div中加一个h1，里面再加一个a，a的大小与logo相同，a的背景用logo图，a中加上名字，再把用text-indent加overflow: hidden文字隐藏。
placeholder=”前端课程” 占位符
取消输入框、按钮等边框：outline: none;