预览效果
index.html
index.css
.layout{ width:100%; max-width: 640px; min-width: 300px; margin:0 auto; position: relative;}.jd_header{ position: fixed; left: 0; top:0; height:40px; width:100%; z-index:1000;}.jd_header>.jd_header_box{ position: relative; width: 100%; max-width: 640px; min-width: 300px; margin:0 auto; background: rgba(201,21,35,0); height:40px;}.jd_header>.jd_header_box>.icon_logo{ width:60px; height:36px; position: absolute; /*background: url("../images/sprites.png") no-repeat;*/ /*background-size:200px 200px;*/ background-position: 0 -103px; top: 4px; left: 10px;}.jd_header>.jd_header_box>.login{ width: 50px; height: 40px; line-height:40px; text-align: center; color: #ffffff; position: absolute; right:0; top:0; font-size: 15px;}.jd_header>.jd_header_box>form{ width:100%; padding-left:75px; padding-right:50px; height:40px; position: relative;}.jd_header>.jd_header_box>form>input{ width:100%; height:30px; border-radius:15px; margin-top:5px; padding-left:34px;}.jd_header>.jd_header_box>form>.icon_search{ height:20px; width:20px; position: absolute; background-position: -60px -109px; top:10px; left:85px;}.jd_banner{ width: 100%; position: relative; overflow: hidden;}.jd_banner>ul:first-child{ width: 1000%;transform: translateX(-10%); -webkit-transform:translateX(-10%);}.jd_banner>ul:first-child>li{ width: 10%; float: left;}.jd_banner>ul:first-child>li>a{ width: 100%; display: block;}.jd_banner>ul:first-child>li>a>img{ width: 100%; display: block;}.jd_banner>ul:last-child{ width: 118px; position: absolute; height: 6px; bottom: 6px; left: 50%; margin-left: -59px;}.jd_banner>ul:last-child>li{ width: 6px; height: 6px; float: left; border-radius: 3px; border:1px solid #ffffff; margin-left: 10px;}.jd_banner>ul:last-child>li.now{ background: #ffffff;}.jd_banner>ul:last-child>li:nth-child(1){ margin-left: 0;}/*导航栏模块*/.jd_nav{ width: 100%; background: #ffffff;border-bottom: 1px solid #e0e0e0;}.jd_nav>ul{ width: 100%; padding:10px 0;}.jd_nav>ul>li{ width: 25%; float: left;}.jd_nav>ul>li>a{ display: block;}.jd_nav>ul>li>a>img{ width: 40px; height: 40px; display: block; margin:0 auto ;}.jd_nav>ul>li>a>p{ text-align: center; color: #666666; font-size: 12px; padding: 6px 0;}/*商品主盒子*/.jd_product{ padding:0 5px;}.jd_product>.product_box{ width: 100%; background: #ffffff; margin-top: 10px; box-shadow: 0 0 1px #e0e0e0;}.jd_product>.product_box>.product_box_tit{ height: 32px; line-height: 32px; border-bottom: 1px solid #e0e0e0;}.jd_product>.product_box>.product_box_tit.no_border{ border-bottom: none;}.jd_product>.product_box>.product_box_tit>h3{ font-weight: normal; font-size: 15px; padding-left: 20px; position: relative; color: #666666;}.jd_product>.product_box>.product_box_tit>h3::before{ content: ''; position: absolute; top: 10px; left: 10px; width: 3px; height: 12px; background: #d8505c;}/*掌上秒杀*/.jd_sk{}.jd_sk .sk_icon{ background:url("../images/seckill-icon.png") no-repeat; background-size:16px 20px; width: 16px; height: 20px; float: left; margin-top: 6px;}.jd_sk .sk_name{ color: #d8505c; font-size: 15px; float: left;}.jd_sk .sk_time{ float: left; margin-top: 8px;}.jd_sk .sk_time>span{ float: left; width: 15px; height: 15px; line-height: 15px; text-align: center; background: #333333; color: #ffffff; margin-left: 3px;}.jd_sk .sk_time>span:nth-child(3n){ background: #ffffff; color: #333333; width: 5px;}.jd_sk .product_box_con>ul{ width: 100%; font-size: 12px; padding-top: 10px;}.jd_sk .product_box_con>ul>li{ width: 33.333%; float: left; text-align: center;}.jd_sk .product_box_con>ul>li>a{ display: block; width: 100%; border-right: 1px solid #e0e0e0;}.jd_sk .product_box_con>ul>li:last-child>a{ border-right:0;}.jd_sk .product_box_con>ul>li>a>img{ width: 64%; display: block; margin: 0 auto;}/*e:first-of-type 选择e同类型的同级的 第一个元素*//*e:last-of-type 选择e同类型的同级的 第一个元素*//*e:nth-of-type(n) 选择e同类型的同级的 第n个元素*/.jd_sk .product_box_con>ul>li>p:first-of-type{ color:#d8505c; margin-top: 5px; margin-top: 5px;}.jd_sk .product_box_con>ul>li>p:last-of-type{ text-decoration: line-through; color: #666666; margin-top: 5px;}/*组合样式*/.w_50{ width: 50%; display: block;}.w_50 >img{ display: block; width: 100%;}.b_left{ border-left:1px solid #e0e0e0;}.b_right{ border-right:1px solid #e0e0e0;}.b_bottom{ border-bottom:1px solid #e0e0e0;} base.css
/*重置样式*/*,::before,::after{ /*选择所有的标签*/ margin:0; padding:0; /*清楚移动端默认的 点击高亮效果*/ -webkit-tap-highlight-color:transparent; /*设置所有的都是以边框开始计算宽度 百分比*/ -webkit-box-sizing:border-box;/*兼容*/ box-sizing:border-box;}body{ font-size:14px; font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/ color:333;}a{ color:333; text-decoration:none;/*不显示下划线*/}a:hover{ text-decoration:none;/*不显示下划线*/}ul,ol{ list-style:none;}input{ border:none; outline:none; /*清除移动端默认的表单样式*/ -webkit-appearance:none;}/*公共样式*/.f_left{ float:left;}.f_right{ float:right;}.clearfix::before,.clearfix::after{ content:""; height:0; line-height:0; display:block; visibility:hidden; clear:both;}[class^="icon_"]{ background: url("../images/sprites.png") no-repeat; background-size:200px 200px;}.m_l10{ margin-left: 10px;}.m_r10{ margin-right: 10px;}.m_b10{ margin-bottom: 10px;}.m_t10{ margin-top: 10px;} 1、box-shadow: 0 0 1px #e0e0e0;
box-shadow 属性向框添加一个或多个阴影。
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
| 值 | 描述 | |
|---|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 | |
| v-shadow | 必需。垂直阴影的位置。允许负值。 | |
| blur | 可选。模糊距离。 | |
| spread | 可选。阴影的尺寸。 | |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 | |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |