/* base.css 的初始化 */
/* 指定当前css文件, 编码格式是utf-8 */
@charset "UTF-8";
/* 清除默认的外边距和内边距
其实并不是每个标签都有默认的内外边距的,原来使用*的方法在大项目,
动辄几万个标签的页面就非常消耗性能了,所以大项目中一般会找到有默认
margin和padding的标签单独清除会更好一点
*/
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {
margin: 0;
padding: 0;
}
img, input, button, textarea {
border: none;
padding: 0;
margin: 0;
/*去除点击之后的轮廓线*/
outline-style: none;
}
ul, ol {
list-style: none;
}
input {
font-family: "SimSun", "宋体";
}
select, input, textarea {
font-size: 12px;
margin: 0;
}
textarea {
/*禁止文本框的用户自由缩放*/
resize: none;
}
img {
border: 0;
/* 设置图片默认的垂直对齐方式为中线对齐*/
vertical-align: middle;
}
table {
/*边框合并*/
border-collapse: collapse;
}
body {
/* 将整个页面的字体, 默认重置 */
font: 12px/18px Microsoft YaHei, Arial, Verdana, "SimSun";
color: #666;
background: #fff;
}
/*双伪元素清除法:
1、清除浮动
2、解决margin的塌陷问题
*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
/* 兼容 IE 67 */
.clearfix {
*zoom: 1;
}
a {
color: #666;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
/*
buis因为没有语义,所以不推荐用来给文字设置样式,但是有的时候需要一些没有语言的标签来打下手,
比如字体图标等等,此时可以废物利用,把之前不推荐使用的标签去除样式,来用于其他用途。
*/
i, s {
font-style: normal;
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
/*
版心:宽度固定并且水平居中的盒子
在使用别人写好的base.css文件时,注意每个页面的版心可能是不一样的,需要单独测量设置
*/
.w {
width: 1200px;
margin: 0 auto;
}
body {
height: 3000px;
}
/*-top的样式*/ .top { /*width: */ height: 31px; background-color: #f1f1f1; } .top .content { height: 31px; /*ps*/ background-color: pink; } .top .content .left { width: 200px; height: 31px; background-color: yellow; line-height: 31px; float: left; }
| .top .content .left a { color: #be1920; } .top .content .right { float: right; } .top .content .right li { float: left; line-height: 31px; } .top .content .right li a { margin: 0px 16px; } .top .content .right li a .icon-moreunfold { font-size: 12px; margin-left: 10px; } .top .content .right li .last { margin-right: 0px; }
|
/*search的样式*/ .search { height: 80px; /*ps*/ /*background-color: hotpink;*/ margin-top: 25px; }
.search .logo { width: 171px; height: 62px; background: url(../images/logo.png); float: left; }
.search .cart { width: 140px; height: 36px; box-sizing:border-box; background-color: #f8f8f8; float: right; margin-right: 63px; border: 1px solid #dedede; text-align: center; line-height: 36px; position: relative; } .search .cart .icon-cart { font-size: 14px; color: #d15357; font-weight: 700; } .search .cart .icon-more { font-size: 14px; margin-left: 4px; } .search .cart .num { /*最小宽度*/ min-width: 16px; height: 14px; background-color: #dc1b30; position: absolute; top: -8px; /*right: 18px;*/ left: 104px; border-radius: 6px 6px 6px 0px; color: #fff; line-height: 14px; }
| .search .cart .h { width: 200px; height: 100px; background-color: #f8f8f8; position: absolute; right: -1px; top: 34px; border: 1px solid #dedede; /*border-top: none;*/ display: none; } .search .cart .h .hh { width: 138px; height: 1px; background-color: #f8f8f8; position: absolute; right: 0px; top: -1px; } .search .cart:hover .h { display: block; } .search .center { padding-left: 346px; } .search .center input[type="text"] { width: 458px; height: 36px; box-sizing:border-box; border: 2px solid #af1918; vertical-align: top; padding-left: 10px; } .search .center input[type="button"] { width: 80px; height: 36px; background-color: #af1918; color: #fff; font-size: 16px; } .search .center ul { padding-top: 8px; } .search .center ul li { float: left; } .search .center ul li a { font-size: 12px; padding: 0px 12px; } .search .center ul li .red { color: #d1171c; }
|
/*nav的样式*/ .nav { /*width: */ height: 45px; border-bottom: 2px solid #b1181a; } .nav .content { height: 45px; /*ps*/ background-color: pink; }
.nav .content .all { width: 209px; height: 45px; background-color: #b1181a; color: #fff; font-size: 16px; text-align: center; line-height: 45px; float: left; } .nav .content ul { float: left; padding-top: 13px; } .nav .content ul li { float: left; } .nav .content ul li a { color: #000; font-size: 16px; margin-left: 41px; } /*-banner的样式*/ .banner { height: 465px; /*ps*/ /*background-color: pink;*/ }
| /*左边的部分*/ .banner .left { width: 209px; height: 465px; background-color: #c81622; float: left; }
.banner .left li { height: 31px; /*ps*/ /*background-color: hotpink;*/ line-height: 31px; padding: 0px 11px; } .banner .left li:hover { background-color: #f7f7f7; } .banner .left li:hover a { color: #c81622; } .banner .left li:hover .icon-more { color: #c81622; } .banner .left li a { color: #fff; } .banner .left li .icon-more { font-size: 12px; color: #fff; float: right; }
|
/*-----------------------中间的部分*/ .banner .center { width: 721px; height: 455px; background: url(../images/banner_bg.png); float: left; margin-left: 10px; margin-top: 10px; }
/*------------------------右边的部分*/ .banner .right { width: 250px; height: 455px; /*ps*/ /*background-color: skyblue;*/ float: right; margin-top: 10px; }
.banner .right .one { width: 250px; height: 165px; box-sizing:border-box; border: 1px solid #e3e3e3; border-bottom: none; }
.banner .right .one .otop { height: 32px; border-bottom: 1px dotted #e3e3e3; line-height: 32px; padding: 0px 15px; color: #000; font-size: 14px; }
.banner .right .one .otop a { float: right; font-size: 12px; }
.banner .right .one .otop a .icon-more { font-size: 12px; } | .banner .right .one ul { padding-left: 15px; padding-top: 12px; }
.banner .right .one ul li { height: 24px; font-size: 12px; }
.banner .right .one ul li a { color: #656565; }
.banner .right .one ul li a span { font-weight: 700; margin-right: 5px; }
.banner .right .two { width: 250px; height: 210px; border: 1px solid #e3e3e3; }
.banner .right .two td { border: 1px solid #e3e3e3; text-align: center; width: 25%; height: 33.33%; }
.banner .right .two tr td div { width: 24px; height: 24px; background: url(../images/icons.png) -17px -16px; margin: 0 auto; margin-bottom: 12px; }
.banner .right .three { margin-top: 5px; } |
/*-recommend的样式*/ .recommend { height: 163px; /*ps*/ background-color:#ebebeb ; margin-top: 11px; }
.recommend .today { width: 205px; height: 163px; background-color: #5c5251; color: #fff; font-size: 18px; text-align: center; float: left; }
.recommend .today .clock { width: 57px; height: 57px; background: url(../images/clock.png); margin: 0 auto; margin-top: 31px; margin-bottom: 11px; }
.recommend .good { width: 248px; height: 163px; background: url(../images/recommend01.png); float: left; }
.recommend .line { width: 1px; height: 145px; background-color: #dddddd; float: left; margin-top: 9px; }
/*------------------------like的样式*/ .like { height: 262px; /*ps*/ /*background-color: pink;*/ margin-top: 31px; }
| .like .ltop { height: 28px; /*ps*/ /*background-color: hotpink;*/ color: #000; font-size: 18px; }
.like .ltop a { font-size: 12px; float: right; margin-right: 21px; } .like .ltop a .icon-refresh { font-size: 12px; } .like .lbottom { height: 233px; box-sizing:border-box; border: 1px solid #eeeeee; } .like .lbottom .item { width: 16.66%; height: 100%; /*ps*/ /*background-color: pink;*/ text-align: center; float: left; } .like .lbottom .item img { margin-top: 16px; } .like .lbottom .item .lv { height: 64px; /*ps*/ /*background-color: pink;*/ border-right: 1px solid #ececec; text-align: left; padding-left: 35px; } .like .lbottom .item .lv p { line-height: 21px; } .like .lbottom .item .lv span { color: #d93333; font-size: 16px; } .like .lbottom .item .last { border-right: none; }
|
/*---------------------------------floor的样式*/ .floor { height: 390px; background-color: pink; margin-top: 29px; } .floor .ftop { height: 27px; /*ps*/ background-color: skyblue; border-bottom: 2px solid #cb1524; } .floor .ftop span { color: #b72437; font-size: 18px; } .floor .ftop ul { float: right; } .floor .ftop ul li { /*height: 27px;*/ float: left; line-height: 27px; } .floor .ftop ul li a { padding: 0px 14px; } .floor .fbottom { height: 360px; background-color: hotpink; } .floor .fbottom .tv { width: 210px; height: 360px; background-color: #f9f9f9; text-align: center; } .floor .fbottom .tv ul li { float: left; width: 50%; padding-left: 8px; box-sizing:border-box; } .floor .fbottom .tv ul li a { width: 86px; height: 32px; /*background-color: red;*/ float: left; border-bottom: 1px solid #ededed; text-align: center; line-height: 32px; }
|
.floor .fbottom .tv .one { margin-top: 26px; color: #c41b20; font-size: 18px; text-align: center; height: 23px; }
.floor .fbottom .tv .two { color: #c41b20; text-align: center; height: 30px; }
/*-icon部分的样式*/ .icon { height: 110px; background-color: #f5f5f5; margin-top: 37px; } .icon .content { height: 109px; border-bottom: 1px solid #ececec; } .icon .content .item { width: 20%; height: 100%; /*ps*/ /*background-color: pink;*/ padding-left: 37px; padding-top: 30px; box-sizing:border-box; float: left; } .icon .content .item div { width: 49px; height: 49px; background: url(../images/icons.png) -253px -3px; float: left; margin-right: 7px; } .icon .content .item .p1 { color: #000; font-weight: 700; margin-top: 8px; height: 23px; }
|
/*-link的样式*/ .link { height: 188px; background-color: #f5f5f5; }
.link .content { height: 187px; border-bottom: 1px solid #ececec; background-color: pink; padding-top: 21px; padding-left: 52px; box-sizing:border-box; }
|
.link .content dl { float: left; width: 199px; }
.link .content dt { color: #000; font-size: 16px; height: 30px; } .link .content dd { height: 20px; }
|