购物网页css
@charset "utf-8"; /*清掉浏览器默认间距*/ *{margin: 0;padding: 0;}/*内外间距*/ body{ background: #f5f5f5; } .header{ width: 100%; height: 42px; } .header img{ height: 42px; float: left; } .header form{ width: 65%; height: 30px; float: left; margin-top: 5px;/*上边距*/ border: 1px solid grey;/*边框*/ border-radius: 15px;/*变椭圆角*/ position: relative;/*相对定位*/ background: #fff; } .search{ width: 65%; height: 20px; left: 15px; top:3px; position: absolute;/*绝对定位*/ border: none;/*去除边框*/ outline: none;/*去除选中时中的边框*/ } .searching{ width: 19px; height: 20px; position: absolute; right: 15px;/*距离父标签右边*/ top:5px;/*距离父标签上边*/ } .ren{ width: 32px; height: 42px; float: right; background: url('./img/prodicon_7.png') -92px 0px no-repeat;/*背景图*/ } .header-img{ width: 100%; } .header-img img{ width: 100%; } .nav{ width: 100%; } .nav a{ width: 25%; float: left; display: block;/*把标签转为块级标签*/ text-align: center;/*内容居中*/ text-decoration: none;/*去除默认样式*/ color: #666;/*字体颜色*/ font-size: 12px;/*字体大小*/ background: #fff; padding: 10px 0px;/*内补白*/ } .nav a div{ width: 38px; height: 38px; margin: 0 auto;/*div水平居中*/ background-size: 196px 38px; } .nav_1{ background: url('./img/indexicon.png') no-repeat ; } .nav_2{ background: url('./img/indexicon.png') no-repeat -39px 0px;/*设置背景大小*/ } .nav_3{ background: url('./img/indexicon.png') no-repeat -78px 0px; } .nav_4{ background: url('./img/indexicon.png') no-repeat -118px 0px; } .nav p{ margin-top: 3px; font-size: 12px; } .nav hr{ width: 100%; border: 0px solid grey; } .main{ width: 100%; margin-top: 10px; padding-bottom: 5px; border-top: 1px solid grey; background: #fff; } .main a hr{ width: 95%; margin: 0 auto; border-top: 0 solid grey; margin-top: 10px; } .main a{ font-size: 12px; text-decoration:none; color: grey; } .main div{ width: 95%; /*水平居中*/ margin: 0 auto; margin-top: 10px; border-top: 1px solid grey; } .main div img{ width: 100%; } .main a div p{ height: 14px; } .footer{ width: 100%; margin-top: 10px; padding: 10px 0; background: #e7e7e7; text-align: center; color: #b3b3b3; font-size: 12px; } .icon{ width: 39px; height: 39px; /*固定位置*/ position: fixed; /*底部大小*/ bottom: 20px; right: 10px; background-size: 39px 39px; } .f1{ background: url('./img/carticon.png'); background-size: 39px 39px; bottom: 2%; left: 10px; } .f2{ background: url('./img/top_2.png'); background-size: 39px 39px; bottom: 2%; right: 10px; }