HTML+CSS静态项目--仿京东首页

这次一共写了四个页面，都是模仿京东的页面来写的，主要写了首页，商品页面，商品详情页面以及用户注册四个页面，源代码可参照https://github.com/Labef-Peppa/imitate-jd.git 地址直接git-clone下载，下载后的jingdong文件夹就是整个所有html+css文件以及所有的图片文件
具体效果图如下：








整个四个静态页面编写过程中可以改进的地方以及不会写的还有新学的知识：
1.首先网页的标志图片，要使用ico文件，可以在bitbug.com网站生成ico文件
2.网页优化的三大标签：title，description和keyword，
首页标题（title）：网站名-网站介绍（<28字）
网站说明（description）：控制<120字
关键字（keyword）：6–8个关键词
3.字体图标样式，可在icomoon.io网址下载字体图标的样式，先用@font-face来指定自己的一种"myFirstFont"的字体，并指定在哪里可以找到它的URL：

@font-face {
    /*1. 这个字体名称要注意 icomoon*/
    font-family: 'icomoon';
    /*2. 一定要注意路径的问题 一定一定！！！！*/
    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;
}

这里url一定要注意，指向的是从上面网址下载下来的压缩包解压后的文件。这个设定完成后在使用的时候直接粘贴demo里面的需要的字体图标，再在相应添加的图标的标签样式里添加font-family：‘icomoon’;就可以实现字体图标显示了，如首页中右上角的下箭头符号以及我的购物车前面的小车都是字体图标。
4.在写导航栏的时候一般都是要用ul>li*x 的形式来写；

5.如果某一个样式在多个地方用到，可以多采用并集选择器，或者直接建立一个共用的common.css文件，把用的频率高的样式写在这个css文件中，然后多个html文件都link这个common.css文件，相应的需要添加样式的标签直接在标签的class里添加上样式的类名字即可。
6.导航栏多个选项字之间有小竖线隔开三种方法：
①用li或者a的border-left（right）来设置，但是可能左或者右会多出来一个，单独添加class设置none即可；
②直接暴力添加“|”在li里面a外面即可；
③把竖线也当做一个li单独写。
7.在整个页面的logo标志图后，放一个隐藏的h1标签，从而使得浏览器的搜索引擎更容易收录。设成隐藏可以直接用font-size：0；或者text-indent：-9999px；缩进。
8.botton按钮却掉边框直接用border：none；按钮左侧会有一个缝隙呃，添加float后自动去掉。
9.如果所以的子盒子都是绝对定位，那么父盒子必须要添加高度，因为绝对定位是完全脱标的，不添加高度父盒子高度就是0，会被后面的标准流盒子抢了位置。
10.子盒子宽高设置100%就继承了父盒子的大小，盒子无宽度则padding就不会撑开盒子。
11.多给标签添加class再来加样式，否则样式多了之后可能会层叠，找起来也麻烦
12.浮动的盒子可以直接给大小，不用再display转换
13.dl>dt>dd*x 适用于一个标题多个项目的作用域，dt设置标题，dd来设置项目。

14.一个区域切换多个图片展示滚动设计：ul>li>a>img，一定是直接放图片的，不能够写背景图片，因为会有多张图片。滚动选中的图片用ol>li来写。
15.子盒子可以比父盒子要大，加overflow：hidden；
16.如果遇到了外边距塌陷（margin）的问题那么就改成用padding设置
17.当设计到一个不知道有多长的页面的时候，就用一个最大的div来包裹着，不设置高度，可以无限被撑开。
18.固定电梯导航栏在版心旁：先left:50%；再margin-left：-（版心一半）。
19.过度动画样式：transition：all 1s；具体属性可参照css3样式手册，这个样式要添加在原来标签class中，能够过度动画，过渡到的样式在hover或者focus里面写，transition就是完成从原来到hover或者focus的变化这一过程的动画（注意在hover里面写margin和padding动画可能会不通，margin字是直接动的没有动画，而padding则字会有慢慢移动的动画）。
20.进度条的设置就是在一个设好边框的div里面再设置一个同样大小的div，内div设置宽度为x%，就是完成了x%的进度，然后把内div的背景色铺满即可，这个x%学了js再调。
21.子盒子不分配宽度，父盒子给一个text-align：center；就可以让子盒子来居中对齐了。
22.获得焦点选择器，也就是前面提到的focus，样式是鼠标放在设置的标签上会有“I（上下两个小短杠杠）”，然后点击后响应变化。
23.line-height设置的值有几种类型：①数字，直接用这个数字乘以字体尺寸就是行高（如1.5*20px=30px）；②直接设npx，那么行高就是npx；③x%，百分比的行间距。
24.浮动的盒子和内容是一样大的。
25.超出文字省略符号三部曲：
white-space：nowrap； overflow：hidden； text-overflow：ellipsis；
26.在a标签里href=“javascript：；”设置不做跳转来做交互。
27.所有的注册页面是不需要很花里胡哨的，因为涉及道用户隐私安全问题，尽量怎么简单怎么写。
28.注册页面的布局设置如上面截图最后一张，因为输入的六行宽度不一样，所以直接居中肯定对不齐，那么可以把这六行放在一个小一点的div里面，这个div居中，然后每一行分成三个小盒子，左侧的字水平居右（text-align：right；）其他的直接分布对齐，就可以完成了。
29.表单要有表单域包起来。