banner和content设计
< divclass = " banner" > < divclass = " banCon main clearFixed" > < divclass = " banLeft fl" > < ulclass = " banList" > < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> < li> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < ahref = " " > </ a> < spanclass = " fr" > > </ span> </ li> </ ul> </ div> < divclass = " banRight fr" > < divclass = " banImgBox" > < imgsrc = " img/banner.JPG" alt = " " class = " banImg" > </ div> < spanclass = " btnLeft" > < </ span> < spanclass = " btnRight" > > </ span> </ div> </ div> </ div> .banner {
.banCon {
padding-top : 46px;
.banLeft {
width : 300px;
.banList {
font-size : 12px;
li {
margin-bottom : 33px;
a {
padding : 0 13px;
color : #555555;
:first-child {
font-size : 17px;
padding : 0;
}
}
span {
font-family : '宋体' ;
margin-top : 5px;
color : #555555;
}
}
}
}
.banRight {
position : relative;
width : 840px;
height : 347px;
.banImgBox {
width : 840px;
height : 347px;
.banImg {
width : 100%;
height : 100%;
}
}
span {
position : absolute;
top : 50%;
margin-top : -17px;
width : 22px;
height : 34px;
font-size : 34px;
color : #000;
font-family : '宋体' ;
font-weight : blod;
display : none;
}
.btnRight {
right : 20px;
}
.btnLeft {
left : 20px;
}
}
.banRight:hover {
span {
display : block;
}
}
}
}
```html
< divclass = " content main" > < divclass = " line1" > < divclass = " lineTop" > < divclass = " top1" > < ahref = " " class = " hotBtn" > </ a> < ahref = " " class = " newBtn" > </ a> </ div> < divclass = " top2" > < spanclass = " fl" > </ span> < ahref = " " class = " fl" > </ a> < ahref = " " class = " fl" > </ a> </ div> </ div> < ulclass = " conUl" > < liclass = " clearFixed" > < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> </ li> < liclass = " clearFixed" > < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> </ li> < liclass = " clearFixed" > < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> < divclass = " conBox fl" > < pclass = " job clearFixed" > < spanclass = " jobTxt fl" > </ span> < spanclass = " time fl" > </ span> < imgsrc = " img/icon_chat.png" alt = " " class = " fl" > < spanclass = " money fr" > </ span> </ p> < pclass = " btn btn2" > </ p> < pclass = " clearFixed pBor" > < spanclass = " btn fl spa" > </ span> < spanclass = " btn fl spa" > </ span> </ p> < divclass = " imgBox clearFixed" > < imgsrc = " img/con2.png" alt = " " class = " fl" > < divclass = " imgTxt" > < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> </ div> </ div> </ div> </ li> </ ul> < pclass = " more" > </ p> </ div> < divclass = " line2" > < divclass = " lineTop" > < divclass = " top1" > < ahref = " " class = " hotBtn" > </ a> < ahref = " " class = " newBtn" > </ a> </ div> < divclass = " top2" > < spanclass = " fl" > </ span> < ahref = " " class = " fl" > </ a> < ahref = " " class = " fl" > </ a> </ div> </ div> < divclass = " con2Box clearFixed" > < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> < divclass = " listBox fl" > < imgsrc = " img/con2.png" alt = " " > < spanclass = " spa1" > </ span> < pclass = " txt1" > </ p> < pclass = " txt2" > </ p> < divclass = " listCon clearFixed" > < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> < divclass = " box1 fl" > < p> </ p> </ div> </ div> </ div> </ div> < pclass = " more" > </ p> </ div> </ div>
.content {
.line1 {
margin-top : 20px;
margin-bottom : 50px;
li {
margin-bottom : 17px;
.conBox {
width : 355px;
border : 1px solid #eaeeed;
padding : 24px 17px 16px;
.job {
font-size : 18px;
.time {
margin : 0px 8px;
}
img {
margin-top : 6px;
}
.money {
font-size : 12px;
color : #fa6041;
margin-top : 4px;
}
}
.btn {
font-size : 18px;
color : #9999b2;
}
.btn2 {
margin-top : 13px;
margin-bottom : 13px;
}
.spa {
border : 1px solid #eaeeed;
padding : 8px 25px;
margin-right : 12px;
font-size : 12px;
}
.pBor {
border-bottom : 1px dashed #eaeeed;
padding-bottom : 20px;
}
.imgBox {
padding-top : 18px;
img {
width : 40px;
height : 40px;
margin-right : 14px;
}
.imgTxt {
font-size : 12px;
.txt1 {
color : #555;
}
.txt2 {
color : #999;
}
}
}
}
div:nth-of-type(2) {
margin : 0px 13px 0px 14px;
}
}
}
.lineTop {
height : 118px;
.top1 {
height : 53px;
line-height : 53px;
border-bottom : 1px solid #e8e8e8;
.hotBtn {
border-bottom : 2px solid #000;
padding-bottom : 15px;
margin-right : 60px;
}
.newBtn {
color : #999;
}
}
.top2 {
height : 42px;
padding-top : 24px;
font-size : 12px;
span {
width : 18px;
height : 18px;
background : #e6e6e6;
color : #fff;
text-align : center;
border-radius : 50%;
margin-right : 14px;
}
a:nth-of-type(1) {
color : #999;
margin-right : 55px;
}
a:nth-of-type(2) {
color : #00b38a;
}
}
}
.more {
width : 388px;
height : 42px;
border : 1px solid #00b38a;
margin : 0 auto;
text-align : center;
line-height : 42px;
color : #00b38a;
}
.line2 {
.con2Box {
.listBox {
width : 248px;
height : 244px;
border : 1px solid #eeeeee;
padding : 12px 20px;
text-align : center;
margin : 0px 8px;
margin-bottom : 16px;
}
.listBox:nth-child(2n-1) {
margin-left : 0 ;
}
.listBox:nth-child(4n) {
margin-right : 0;
}
img {
width : 80px;
height : 80px;
margin : 0 auto;
margin-bottom : 16px;
}
.txt1 {
font-size : 12px;
color : #999;
margin-top : 10px;
margin-bottom : 12px;
}
.txt2 {
font-size : 12px;
color : #555;
// 让多余文字以...形式显示
// 1.让文字一行显示，即不换行
// 2.溢出隐藏
// 3.溢出文字显示方式
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
border-bottom : 1px dashed #e0e0e0;
padding-bottom : 16px;
}
.listCon {
font-size : 12px;
color : #999;
margin-top : 18px;
p {
color : #00b38a;
}
.box1 {
width : 78px;
}
.box1:nth-child(2) {
border-left : 1px solid #999;
border-right : 1px solid #999;
margin : 0 6px;
}
}
}
}
}
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
