模拟京东手机页面（一）

首页页面

1.移动端页面的设置和css文件和js文件的创建以及引入。

1     <meta name="viewport"
2           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
3     <title>Title</title>
4     <link rel="stylesheet" href="css/base.css">
5     <link rel="stylesheet" href="css/index.css">
6     <script src="js/common.js"></script>
7     <script src="js/index.js"></script>

 

 

2.创建京东页面的整体html结构

3.编写公共样式 base.css

3.1初始化（部分代码）

 1 //清除浮动
 2 .clearfix::before,
 3 .clearfix::after{
 4     content: "";
 5     clear: both;
 6     height: 0;
 7     line-height: 0;
 8     display: block;
 9     /*系统不会进行渲染 提高性能*/
10     visibility: hidden;
11 }
12 body{
13     /*sans-serif:系统默认字体*/
14     font-family: '微软雅黑', sans-serif;
15     font-size: 13px;
16 }
17 .left_f{
18     float: left;
19 }
20 .right_f{
21     float: right;
22 }
23 .m_left10{
24     margin-left:10px;
25 }
26 .m_right10{
27     margin-right:10px;
28 }
29 .m_top10{
30     margin-top:10px;
31 }

 

3.2重置（浏览器默认有的  不想要了，自己写一个）

 1 *,
 2 ::before,
 3 ::after{
 4     padding: 0;
 5     margin: 0;
 6     /*去除移动端特有的点击高亮效果*/
 7     -webkit-tap-highlight-color: transparent;
 8     /*设置盒模型 盒子内减*/
 9     box-sizing: border-box;
10     -webkit-box-sizing: border-box;
11 }
12 ul{
13     list-style: none;
14 }
15 a{
16     color:#666;
17     text-decoration: none;
18 }
19 a:hover{
20     text-decoration: none;
21 }
22 /*清除和重置文本框的边框样式*/
23 input{
24     outline:none;
25     border: none;
26     border: 1px solid #ccc;
27 }

 

4.页面样式编写

4.1顶部搜索框

基本思路：左右固定   中间宽度100% 设置间距

样式小结：

a）顶部通告栏
顶部需要固定定位，但是因为设置了固定定位后，
width100%是以浏览器为参照物。
所以直接顶部通告栏设置最大的宽度和最小宽度。

b)顶部logo:
直接使用精灵图 重新给图片background-size设置宽和高，
让图片缩小一倍。左边距离是logo盒子外边距的问题。

c)顶部登录链接
与顶部logo一样的设置 定位修改为距离右边right
注意设置a标签的伪元素hover样式，避免点击链接文字跳动。

d)表单搜索部分
添加了表单（width:100%）后 登录会被挤下，
原因是登录在设置定位是没有设置top值。
搜索框的圆角是设置高度的一半。
表单内元素是不能添加任何伪元素的，
所以搜索框内的小图片搜索镜 只能添加一个标签。
也可以直接给表单本身添加伪元素。

4.2轮播图

基本思路：

轮播图图片和图片上的小圆点都是用ul>li配合浮动来设置。

利用定位和margin-left来水平居中。

4.3图片导航部分

基本思路：

每行设置4个导航图片   用width：25%；导航图片改小 相对于有设置宽度的最近父元素的宽度修改Li设置了浮动  但是ul 没有高度  导致jd_nav的高度是20px  所以要给所有li的父元素ul添加一个clearfix类  清除浮动

4.4产品部分

基本思路：

1.图片浮动出现了间隙 是<img>元素底部留白。因为<a>标签的框模型是：行内框。行内框没有包含图片的表现,所以应该使用块级框：比如：display:block;或者display:inline-block;

2.秒杀区域   添加一个类名  不设置样式作为标记   将相同结构做不一样的样式。

 

小结回顾：

1.清除点击高亮效果

-webkit-tap-highlight-color:transparent;/*清除点击高亮效果*/

在移动端浏览器会遇见点击出现高亮的效果，如在某个项目不需要这个默认的效果的。那么我们通常会把这个点击的颜色设置成透明。

 

2.所有盒子以内容边框开始计算（盒子内减）

/*设置宽度以内容边框开始计算*/
-webkit-box-sizing: border-box;
box-sizing: border-box;

在移动端通常使用的是百分比布局，那么这样的布局如果使用border或者padding或使容器的宽度超出屏幕的宽度产生滚动条。那么我们的解决方案是什么试用css3属性 box-sizing设置所有的盒子从边框开始计算宽度。

3.清除移动端默认的样式

/*在移动端清除浏览器默认样式*/
-webkit-appearance: none;

在移动设备的浏览器当中表单一般会有默认的属性  通过border：none;outline:none;是无法完全清楚的，还是会有一些浏览器默认的属性，比如：内阴影，立体感....我们可以将属性  -webkit-appearance 这个属性指的是设置成 none;

 

4.最小宽度和最大宽度的限制

max-width: 640px; /*在行业当中的移动端的设计图一般使用的是640px*/
min-width: 320px; /*在移动设备当中现在最小的尺寸320px*/

5.Img的下间隙问题

<div>
<a href="#">
<img src="../images/nv-fy.jpg" alt=""/>
</a>
<a href="#">
<img src="../images/nv-fy.jpg" alt=""/>
</a>
</div>

Img是行内块级元素  它也会有默认的基线对齐。那么和文字一样也会距离底部有一定的间隙。又因为 <a>标签是inline-block的，框模型是：行内框。行内框没有包含图片的表现，所以要使img能像放进一个盒子一样，就应该使用块级框：比如：display:block;或者display:inline-block;

 

6.搜索按钮调用

<!--在移动端点击弹出输入法 enter键会显示搜索-->
<form action="#">
<input type="search" placeholder="提示"/>
</form>

在移动端调用输入法的时候会弹出小键盘，键盘一般是enter键，那么在搜索框当中我们要求调用是搜索按钮，那么这样的结构才能调用出来。

7.结构性伪类选择器

.sk_product > li > p:nth-of-type(1){
color: #d8505c;
}

E:first-of-type匹配同类型中的第一个元素E。

E:last-of-type匹配同类型中的最后一个元素E。

E:nth-of-type(n) 匹配同类型中的第n个元素E。

 

转载于:https://www.cnblogs.com/ZHU-JOHNSON/p/6184623.html