购物网页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;
}
时间: 2024-10-21 22:54:09

购物网页css的相关文章

购物网页

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物网页</title> <meta name='viewport' content='width=device-width,initial-scale=1.0'> <link rel="stylesheet" href

网页css样式表部分

层叠样式表:CSS Cascading Style Sheet.V2.1  (3.0版本有些旧系统不支持) 控制页面样式外观. 一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用. <input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" />       (solid意思是实线) 2.内嵌样式表.

网页CSS

层叠样式表:CSS Cascading Style Sheet.V2.1 控制页面样式外观. 一.样式表分三类:1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; border-bottom:1px solid black;" type="text" /> 2.内嵌样式表.——放在页面的<head></head>中间.——可

网页 css

css---- 层叠样式表(Cascading Style Sheet) 一,层叠样式表的分类 1,外部样式表:在外部定义样式表,然后在页面head里面附加该样式表 2,内嵌样式表:直接在网页head标签里定义样式表 3,内联样式表:放在标签的style属性里面 二,选择器 1,基本选择器 (1)id选择器:用#xx定义 (2)class选择器:用.xx定义 (3)标签选择器:<p style=""></p> 2,组合选择器 (1)用逗号隔开:表示并列关系 (2

网页CSS中*{margin:0; padding:0;}有什么用

* 这东西叫"通配符"用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等--都有默认的margin 或padding值的,加上这句就可以删除浏览器这些默认值,方面后面的设置.(注:不是没它不行,只是方便而已) 你加上面那句后页面乱,那是当然的,因为你没加时是基于有默认的margin或padding 进行设置的,去掉了默认值,就当然会乱了.咋办?一,就是不加*{margin:0; paddin

网页CSS样式属性:font字体常识

同时声明中文字体的字体名称(英文)和显示名称(中文): font-family:SimSun,"宋体"; font-family:"Microsoft YaHei","微软雅黑"; font-family:STXihei,"华文细黑","Microsoft YaHei","微软雅黑"; 永远不要忘记声明英文字体,并且英文字体应该在中文字体之前 Font-family: Georgia,

网页 css 样式 初始化

body, div, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4 {margin:0;padding:0;font-style:normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica,sans-serif} ol, ul ,li{list-style: none;} img {border: 0; vertical-align:middle;} body{color:#000000;backgro

pc网页css reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }  table { border-collapse: collapse; border-spacing: 0; }  fieldset,img { border: 0; }  ol,ul { list-style: none; }  th { text-

CSS美化自己的完美网页

CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用css. CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中