码迷,mamicode.com
首页 > Web开发 > 详细

购物网页css

时间:2016-11-03 23:21:00      阅读:388      评论:0      收藏:0      [点我收藏+]

标签:footer   url   ade   absolute   for   div   char   pos   round   

@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;
}

 

购物网页css

标签:footer   url   ade   absolute   for   div   char   pos   round   

原文地址:http://www.cnblogs.com/xiaoyumi666/p/6028581.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!