base.css
/*把我们所有的标签的内外边距清零 */ * { margin: 0; padding: 0; /*CSS3盒子模型*/ box-sizing: border-box; } /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html{ color:#000; background:#fff; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;} /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;} /* 要注意表单元素并不继承父级 font 的问题 */ body,button,input,select,textarea{ font:12px/1.5 tahoma,arial,\5b8b\4f53;} input,select,textarea{ font-size:100%;} /* 去掉各Table cell 的边距并让其边重合 */ table{ border-collapse:collapse;border-spacing:0;} /* IE bug fixed: th 不继承 text-align*/ th{ text-align:inherit;} /* 对齐是排版最重要的因素, 别让什么都居中 */ caption,th { text-align:left; } /* 去除默认边框 */ fieldset,img{ border:0;} /* ie6 7 8(q) bug 显示为行内表现 */ iframe{ display:block;} /* 去掉列表前的标识, li 会继承 */ ol,ul,li{ list-style:none;} /* 一致的 del 样式 */ del{ text-decoration:line-through; } /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */ h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500;} q:before,q:after {content:'';} /* 统一上标和下标 */ sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} /* 默认不显示下划线,保持页面简洁 */ ins,a{ text-decoration:none;} /* 清理浮动 */ .clearFloat:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;} .clearFloat{ zoom:1; /* for IE6 IE7 */} /* 设置内联, 减少浮动带来的bug */ .floatLeft, .floatRight{ display:inline;} .floatLeft{ float:left;} .floatRight{ float:right;} /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;} /* HTML5 媒体文件跟 img 保持一致 */ audio,canvas,video{ display: inline-block;*display: inline;*zoom: 1;} /* 去掉 firefox 下此元素的边框 */ abbr,acronym{ border:0;font-variant:normal;} address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:500;} body{ color:#333;} a{ color: #666666;} a:hover{ color:#FF6600;} button, input { font-family: Microsoft YaHei, Heiti SC, tahoma, Arial, Hiragino Sans GB, "\2B8B\4F53", sans-serif; border: 0; /*去除默认的灰色边框*/ outline: none; }
common.css
/*声明字体图标 这里要注意路径的更换*/ @font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?50kdyc'); src: url('../fonts/icomoon.eot?50kdyc#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?50kdyc') format('truetype'), url('../fonts/icomoon.woff?50kdyc') format('woff'), url('../fonts/icomoon.svg?50kdyc#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } /*版心*/ .w { width: 1200px; margin: 0 auto; } .fl { float: left; } .fr { float: right; } .style_red { color: #c81623; } /*快捷导航*/ .shortcut { height: 31px; line-height: 31px; background-color: #f1f1f1; } .shortcut ul li { float: left; } /*选择所有偶数的小li*/ .shortcut .fr ul li:nth-child(even) { width: 1px; height: 12px; background-color: #666; margin: 9px 15px 0; } .arrow-icon::after { content: "\ea50"; font-family: 'icomoon'; margin-left: 6px; } /*header 头部制作*/ .header { position: relative; height: 110px; } .logo { top: 25px; position: absolute; width: 254px; height: 83px; } .logo a { display: block; width: 254px; height: 83px; background: url(../images/logo.png) no-repeat; font-size: 0px; } .search { position: absolute; left: 346px; top:25px; width: 538px; height: 36px; border: 2px solid #b1191a; } .search input { width: 454px; height: 32px; padding-left: 10px; } .search button { float: right; width: 80px; height: 32px; background-color: #b1191a; font-size: 16px; color: #fff; } .hotWords { position: absolute; top: 66px; left: 346px; } .hotWords a { margin: 0 10px; } .shopCar { position: absolute; right: 60px; top: 25px; width: 140px; height: 35px; line-height: 35px; text-align: center; border: 1px solid #dfdfdf; background-color: #f7f7f7; } .count { position: absolute; top: -5px; left: 105px; height: 14px; line-height: 14px; color: #ffffff; background-color: #e60012; padding: 0 6px; border-radius: 7px 7px 7px 0; } .nav { height: 47px; border-bottom: 2px solid #b1191a; } .nav .dropdown { float: left; width: 210px; height: 45px; background-color: #b1191a; } .nav .navitems { float: left; } .dropdown .dt { width: 100%; height: 100%; color: #fff; text-align: center; line-height: 45px; font-size: 16px; } .dropdown .dd { /*display: none;*/ width: 210px; height: 465px; background-color: #c81623; margin-top: 2px; } .dropdown .dd ul li { position: relative; height: 31px; line-height: 31px; margin-left: 2px; padding-left: 10px; } .dropdown .dd ul li:hover { background-color: #fff; } .dropdown .dd ul li::after { position: absolute; top: 1px; right: 10px; color: #ffffff; content: ">"; } .dropdown .dd ul li a { font-size: 14px; color: #ffffff; } .dropdown .dd ul li:hover a { color: #c81623; } .navitems ul li { float: left; } .navitems ul li a { display: block; height: 45px; line-height: 45px; font-size: 16px; padding: 0 25px; } /*底部模块制作*/ .footer { height: 415px; padding-top: 30px; } .mod_service { height: 80px; border-bottom: 1px solid #ccc; } .mod_service ul li { float: left; width: 300px; height: 50px; padding-left: 35px; } .mod_service ul li h5 { float: left; width: 50px; height: 50px; background: url("../images/图标.png") no-repeat -110px -60px; margin-right: 8px; } .service-txt h4 { font-size: 14px; } .service-txt p { font-size: 12px; } .mod_help { height: 185px; border-bottom: 1px solid #ccc; padding-top: 20px; padding-left: 50px; } .mod_help dl { float: left; width: 200px; } .mod_help dl:last-child { width: 100px; text-align: center; } .mod_help dl dt { font-size: 16px; margin-bottom: 10px; } .mod_copyright { text-align: center; padding-top: 20px; } .links { margin-bottom: 15px; } .links a{ margin:0 10px; } .copyright { line-height: 20px; }
index.css
.main { width: 980px; height: 455px; margin-left: 220px; margin-top: 10px; } .focus { float: left; width: 721px; height: 455px; background-color: purple; } .newflash { float: right; width: 250px; height: 455px; } .news { height: 165px; border: 1px solid #e4e4e4; } .news-hd { height: 33px; line-height: 33px; border-bottom: 1px dotted #e4e4e4; padding: 0 15px; } .news-hd h5 { font-size: 14px; float: left; } .news-hd a { float: right; } .news-bd { padding: 5px 15px 0; } .news-bd ul li { height: 24px; line-height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lifeservice { overflow: hidden; height: 209px; /*background-color: purple;*/ border-right: 1px solid #e4e4e4; border-top: 0; } .lifeservice ul { width: 252px; } .lifeservice ul li { float: left; width: 63px; height: 71px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center; } .lifeservice ul li i { display: inline-block; width: 24px; height: 28px; /*background-color: skyblue;*/ margin-top: 12px; background: url("../images/生活服务小图标.png") no-repeat -21px -14px; } .bargain { margin-top: 5px; } /*推荐模块*/ .recom { height: 163px; /*background-color: skyblue;*/ margin-top: 12px; } .recom_hd { float: left; width: 205px; height: 163px; font-size: 20px; font-weight: bold; background-color: #5c5251; color: #ffffff; text-align: center; padding-top: 30px; } .recom_bd { float: left; } .recom_bd ul li { float: left; margin-top: 6px; } .recom_bd ul li:nth-child(even) { width: 1px; height: 133px; background-color: #ddd; margin-top: 11px; } /*家用电器模块*/ .box-hd { height: 30px; border-bottom: 2px solid #c81623; margin-top: 20px; } .box-hd h3 { float: left; font-size: 18px; font-weight: bold; color: #c81623; } .tab_list { float: right; line-height: 30px; } .tab_list ul li{ float: left; } .tab_list ul li:nth-child(even) { width: 1px; height: 14px; background-color: #666666; margin: 8px 5px; } .box-bd { height: 361px; /*background-color: skyblue;*/ } .tab_list_item>div{ float: left; height: 361px; } .col_210 { width: 210px; text-align: center; background-color: #f9f9f9; } .col_210 ul { padding-left: 12px; } .col_210 ul li { float: left; width: 85px; height: 34px; border-bottom: 1px solid #cccccc; text-align: center; line-height: 33px; margin-right: 10px; } .col_329 { width: 329px; text-align: center; } .col_221 { width: 221px; text-align: center; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; } .col_219 { width: 219px; text-align: center; border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; } .bb { display: block; border-bottom: 1px solid #cccccc; }