025 京东网站案例

一：行高问题

1.使用不带单位的方式

　　举例：

　　body {background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif;color:#666}

2.说明

　　默认的字体是12，行高则是12*1.5，这样则不要写行高，完全可以根据字体的大小，自动调整行高问题

二：CSS Reset库

1.说明

　　主要是为了浏览器的兼容做准备

　　normalize.css：是一个很小的css文件，但在默认的html元素样式上提供了跨浏览器的高度一致。

　　为html5提供的优质替代方案

2.京东的reset

 1        /*CSS Reset*/
 2         * {margin:0;padding:0}
 3         em,i {font-style:normal}
 4         li {list-style:none}
 5         img {border:0;vertical-align:middle}
 6         button {cursor:pointer}
 7         a {color:#666;text-decoration:none}
 8         a:hover {color:#e33333}
 9         button,input {font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif}
10         body {background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif;color:#666}
11         .hide,.none{display:none}
12         .clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
13         .clearfix{*zoom:1}

三：开始准备工作

1.引入ICO图标

　　访问网址：https://www.jd.com/favicon.ico

　　一般直接放在根目录下

　　使用方式：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京东（JD.COM）-正品低价、品质保障、配送及时、轻松购物</title>
 6     <link rel="icon" href="favicon.ico"  type="image/x-icon">
 7     <style>
 8         
 9     </style>
10 </head>
11 <body>
12     
13 </body>
14 </html>

　　效果：

2.使用normalize.css

　　首先下载：https://github.com/necolas/normalize.css/

　　然后将其拷贝到css目录下。

　　使用:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京东（JD.COM）-正品低价、品质保障、配送及时、轻松购物</title>
 6     <!-- ico图标 -->
 7     <link rel="icon" href="favicon.ico"  type="image/x-icon">
 8     <!-- 引用normalize.css -->
 9     <link rel="stylesheet" href="css/normalize.css">
10 </head>
11 <body>
12     123
13 </body>
14 </html>

3.新建base.css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>京东（JD.COM）-正品低价、品质保障、配送及时、轻松购物</title>
 6     <!-- ico图标 -->
 7     <link rel="icon" href="favicon.ico"  type="image/x-icon">
 8     <!-- 引用normalize.css -->
 9     <link rel="stylesheet" href="css/normalize.css">
10     <!-- 公共样式 -->
11     <link rel="stylesheet" href="css/base.css">
12 </head>
13 <body>
14     123
15 </body>
16 </html>

　　内容：

 1 /*版心*/
 2 .w {
 3     width: 1190px;  /*宽度*/
 4     margin: auto;   /*居中*/
 5 }
 6 
 7 /*左浮动*/
 8 .fr {
 9     float: left;
10 }
11 
12 /*右浮动*/
13 .fl {
14     float: right;
15 }

4.首页的css引入index.css

四：头部工作

猜你喜欢