从上至下分别为:
- index.css首页
- list.css产品列表页
- register.css注册页
- common.css公共样式
index.css
/* ------------------------------------------------------------------------------------------------------ */
/* main首页专有的模块开始 */
.main {
width: 980px;
height: 455px;
margin-left: 220px;
margin-top: 10px;
}
.focus {
float: left;
width: 721px;
height: 455px;
background-color: blue;
}
.newsflash {
width: 250px;
height: 455px;
float: right;
}
.news {
width: 100%;
height: 164px;
border: 1px solid #e4e4e4;
}
.news-hd {
height: 33px;
border-bottom: 1px dashed #e8e8e7;
line-height: 33px;
}
.news-hd h6 {
float: left;
font-weight: 400;
/* padding-top: 10px;*/
padding-left: 15px;
font-size: 14px;
}
.news-hd a {
float: right;
font-size: 12px;
margin-right: 20px;
}
.news-bd ul {
width: 100%;
padding-top: 5px;
padding-left: 15px;
}
.news-bd ul li {
line-height: 24px;
/* 下面这三句为溢出内容用省略号表示 */
/* 一行显示 */
white-space:nowrap;
/* 溢出隐藏 */
overflow:hidden;
/* 以省略号显示 */
text-overflow:ellipsis;
}
.lifeservice {
height: 210px;
width: 255px;
border-left: 1px solid #e4e4e4;
}
/* ********************************************* */
/* 也可以通过overflow:hidden来做 */
/* .lifeservice {
overflow: hidden;
height: 210px;
width: 250px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
} */
/* .lifeservice ul li {
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
} */
/* ******************************************** */
/* 只有让ul宽度变大一些才能容纳四个小li */
.lifeservice ul {
width: 252px;
}
.lifeservice ul li {
position: relative;
float: left;
width: 62.2px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
padding-top: 13px;
}
.lifeservice ul li i {
display: inline-block;
width: 24px;
height: 28px;
background-color: pink;
background: url(../images/icons.png) no-repeat -17px -16px;
}
.lifeservice ul li em {
position: absolute;
top: -3px;
right: 0;
}
/* .newsflash .news a {
float: right;
} */
.bargain {
margin-top: 5px;
}
/* main首页专有的模块结束 */
/* ------------------------------------------------------------------------------------------------------ */
/* 推荐recom模块开始 */
.recom {
height: 163px;
margin-top: 10px;
background-color: #ebebeb;
}
.recom_hd {
float: left;
width: 206px;
height: 163px;
}
.recom_bd {
float: left;
}
.recom_bd ul li {
float: left;
position: relative;
}
.recom_bd ul li img {
width: 248px;
height: 163px;
/* 技巧:这样设置后不论图像上传时尺寸多大,显示时都定死了,不会乱 */
}
.recom_bd ul li:nth-child(-n+3):after {
content: '';
/* 子绝父相 */
position: absolute;
right: 0;
top: 10px;
width: 1px;
height: 143px;
background-color: #dddddd;
}
/* 也可以直接在li后面添加竖线来做(即在li后面加一个宽度为1的盒子),更简单,如下:
.recom_bd ul .line {
float: left;
width: 1px;
height: 143px;
background-color: #