css中需要注意的事项

1. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 导入ico图标

2. <link rel="stylesheet" href="css/normalize.css" /> 引入css初始化文件

3. <link rel="stylesheet" href="css/base.css" /> 外部引入公共的基本样式

4. 制作三大标签： title description keywords

 <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>   不超过28个汉字

<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />                        不超过120个汉字

5.border-bottom：1px solid pink； 各元素间是空格，不用逗号。

6.list-style: none; /清除样式/

7.line-height: 30px; 行高等于高 垂直居中

8.京东素材库下载 icomoon.io

@font-face {  /* 声明字体 */
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?8qhwk5');
  src:  url('../fonts/icomoon.eot?8qhwk5#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?8qhwk5') format('truetype'),
    url('../fonts/icomoon.woff?8qhwk5') format('woff'),
    url('../fonts/icomoon.svg?8qhwk5#icomoon') format('svg');
  font-weight: normal;
  font-style: normal; /*  不倾斜 */
}

下面要引用字体：font-family: "icomoon";

10.logo 常用写法 ：

<div class="logo">
		<h1> <!-- 为了提高权重 -->
			<a href="#"></a>
		</h1>
</div>

11. 子绝父相 孩子用绝对位置 position：absolute 父亲用相对位置：position：relative

12.搜索框表单部分的类用.form

13.position：absolute 绝对定位 后面要给定位置 使用top left bottom

14、添加阴影:box-shadow:2px 5px 5px rgba(0,0,0,.3) 分别为 阴影水平向右 阴影垂直向下 阴影模糊距离

15.input 和button 自带边框，需要清除 boder：0 取消轮廓边框：outline: none; /取消轮廓边框/

16.placeholder写在html里 表示表单里的默认词。

17.blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul {margin 0；padding0；）

18.加了绝对定位的行内元素，可以直接给宽高，不用display转换。

19。border-radius: 50%; 添加圆形背景

20.页面底部用footer。

21.font-weight：700； 字体加粗

22.background-position：39px 20px； 定位背景位置

23.用到版心时：类名为 class=“w *n” scc中直接.*n

24.box-sizing: border-box; 将盒子框定，不惧padding

25.vertical-align: top; /解决图片底部有空白缝隙的问题/

26.top:50% transform:translateX(-50%); 垂直居中对齐

left:50% transform:translateX(-50%); 水平居中对齐

27.cursor: pointer;/鼠标经过时变成小手/

     white-space: nowrap; /*强制一行内显示*/
     overflow: hidden; /*溢出隐藏*/
     text-overflow: ellipsis; /*超出的部分显示省略号*/