首页页面
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.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.页面样式编写
基本思路:左右固定 中间宽度100% 设置间距
样式小结:
a)顶部通告栏
顶部需要固定定位,但是因为设置了固定定位后,
width100%是以浏览器为参照物。
所以直接顶部通告栏设置最大的宽度和最小宽度。
b)顶部logo:
直接使用精灵图 重新给图片background-size设置宽和高,
让图片缩小一倍。左边距离是logo盒子外边距的问题。
c)顶部登录链接
与顶部logo一样的设置 定位修改为距离右边right
注意设置a标签的伪元素hover样式,避免点击链接文字跳动。
d)表单搜索部分
添加了表单(width:100%)后 登录会被挤下,
原因是登录在设置定位是没有设置top值。
搜索框的圆角是设置高度的一半。
表单内元素是不能添加任何伪元素的,
所以搜索框内的小图片搜索镜 只能添加一个标签。
也可以直接给表单本身添加伪元素。
4.2轮播图
基本思路:
利用定位和margin-left来水平居中。
4.3图片导航部分
基本思路:
每行设置4个导航图片 用width:25%;导航图片改小 相对于有设置宽度的最近父元素的宽度修改Li设置了浮动 但是ul 没有高度 导致jd_nav的高度是20px 所以要给所有li的父元素ul添加一个clearfix类 清除浮动
4.4产品部分
基本思路:
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>
<!--在移动端点击弹出输入法 enter键会显示搜索-->
<form action="#">
<input type="search" placeholder="提示"/>
</form>
在移动端调用输入法的时候会弹出小键盘,键盘一般是enter键,那么在搜索框当中我们要求调用是搜索按钮,那么这样的结构才能调用出来。
7.结构性伪类选择器
.sk_product > li > p:nth-of-type(1){
color: #d8505c;
}
E:last-of-type匹配同类型中的最后一个元素E。
E:nth-of-type(n) 匹配同类型中的第n个元素E。