京东网站仿写（1）

一、网页布局

          通过对所有电商网页的观察可以看出，电商网页的布局、功能性、美观性等均是我们常见的网页中比较复杂，综合性比较强的一类网页，在整体布局有导航栏、搜索栏、菜单栏、 banner图等模块，每个模块对应的样式都必须分毫不差，这样最后呈现的网页才足够整洁。

二、技术要点

   1. 网页的写法

    一个完整的网页包括HTML、CSS、JavaScript三部分，其中HTML文件中写各种标签，CSS文件中写样式，很多需要代码控制比如图片轮播、倒计时等则需要JavaScript来完成。

       （ 由于前期只学了HTML和CSS基础，需要JS完成的部分以及多种CSS3里面的动画效果部分暂时搁置，后面再进行完善。）

  2. 鼠标悬停的相关细节

   通过观察可以看出，鼠标在不同的地方悬停时部分模块会出现字体变色、背景色变化、鼠标箭头变抓手、出现子菜单等样式。

（1）悬停字体变色

       

（2）悬停出现背景色                                        

  

悬停前 悬停后

（3）鼠标箭头变抓手

样式中写入 cursor: pointer; 即可

（4）出现子菜单

    子菜单写好样式后隐藏，当悬停其父级菜单时显示

   样式中写入  display: none; 隐藏子菜单；
   父级菜单悬停时写入 display: block;  显示子菜单

  3.块标签在网页布局中的使用

          <div></div>标签称为”容器“，在整个网页布局中至关重要。每个模块我们都可以用<div>标签来包裹，使它们称为独立的一部分。另外，每个模块下不同的文字、图片等都可以是独立的,在最外层的模块<div>下可以建立非常多的小块来单独写样式，这样我们在一个网页的制作中就能有条不紊的处理好每一部分，在后期需要修改代码时我们也可以快速找到，因此，<div>标签的容器功能在网页制作中比较重要，对于它的灵活使用需要多练习，另外，个人认为，每创建一个<div>加个背景色去观察它的位置，调整和写其他样式都会比较方便，后面去掉背景色即可。

  4.阴影效果

     

box-shadow: 5px（下边的宽） 5px （右边的宽）10px （扩散范围）#ef9939（阴影颜色）;

 5.超出部分隐藏

   

代码： overflow: hidden;

6.span转化为行级元素

span转化为行级元素：display: block;
span转化为行级块元素：display: inline-block;

在使用span标签后，在写样式时需要定位，调整位置等操作时需要将span转化为行级元素。

7.圆形的样式

   

代码： border-radius: 50%;

改变border-radius的数值为其他数值，图形变为圆角矩形，如下，将数值设为20px  ：

8.去掉a链接下划线

代码：text-decoration: none;

9.删除线

加删除线之前：

加删除线之后：

代码：

10.特殊图标

通过 i 标签导入即可

11.字体加粗

  代码： font-weight: bold;