第四次作业
补充学习了快捷键的书写形式。
标签的快捷键写法
兄弟标签的快捷键写法
父子标签快捷键的写法
元素重复的快捷键写法
数值递增的快捷键写法
Document
div,body,html,h1,h2,h3,h4,h5,h6,ul,li,em,dt,dd,dl,form
{padding: 0 ;
margin:0;
}
li{list-style: none;
}
img{
border: 0;
}
a{
text-decoration: none;
color:#000;
}
.clear:after{
content: "";
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
zoom: 1;
}
.cb{
clear: both;
}
body{
font-family: "\5B8B\4f53";
font-size:12px;
color: #aaaaaa;
}
a{
color: #3d3d3d;
font-size:14px;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
.w970{
width: 970px;
margin:0 auto;
}
.w968{
width: 968px;
margin: 0 auto;
border: 1px solid #dddddd;
}
.first{
height: 108px;
}
.one{
float:left;
width: 290px;
height: 108px;
}
.one .embed{
width: 290px;
height: 108px;
}
.two{
float:left;
width: 400px;
height:88px;
padding-top: 20px;
}
.two form{
width: 394px;
height: 27px;
border: 3px solid #eeeeee;
}
.q{
width:325px;
height:25px;
border:1px solid #babebf;
border-right: 0 none;
outline: none;
color: #999999;
padding-left: 5px;
}
.four{
width:68px;
height:27px;
background:url() 0px -36px;
outline: none;
border: 0 none;
color: white;
font-size: 14px;
font-weight: bold;
}
.four p{
margin-top: 10px;
}
.four a{
color: #999999;
font-size: 12px;
margin: 0 3px;
}
.three{
float:left;
width: 280px;
height: 68px;
text-align: right;
padding-top: 40px;
color: #e6e6e6;
line-height: 20px;
}
.three a{
font-size: 12px;
color: #999999;
}
.five{
background: url() no-repeat 0 1px;
padding-left: 15px;
}
.nav{
height: 35px;
line-height: 35px;
}
.nav li{
float: left;
display: inline;
}
.seven li{
float: left;
padding: 0 10px;
}
.seven a:hover{
color: #0081cc;
}
.seven .ten a{
color: #0081cc;
font-weight: bold;
}
.eit nav{
margin-left: 10px;
background: url()no-repeat
0 7px;
}
.eit li{
float: left;
padding: 0 11px;
position: relative;
}
.eit a{
font-size: 12px;
}
.eit img{
position: absolute;
top: 0px;
left: 44px;
}
.nine li{
float: left;
position: relative;
margin-right: 40px;
}
.nine{
margin-left: 67px;
color: #666666;
}
.nine .s{
display: block;
width: 5px;
height: 3px;
background:url() 0 -64px;
position: absolute;
right: -9px;
top: 16px
}
.main{
height: 365px;
margin-top: 10px;
background-color: #000000;
padding: 8px 0 7px 0;
}
.banner{
float: left;
width:730px;
height:365px;
background: blue;
}
.banner div{
width:740px;
height:310px;
position: relative;
}
.banner div img{
width:730px;
height:310px;
}
.banner div p{
width: 740px;
height: 33px;
background-color: #000;
position: absolute;
left: 0;
bottom: 0;
font-size: 14px;
color: #fff;
text-indent: 10px;
opacity: 0.5;
filter:alpha(opacity=50);
}
.banner ul{}
.banner li{
width: 56px;
height: 54px;
float:left;
display: inline;
padding-left: 1px;
padding-top: 1px;
background: url() -228px -52px;
margin-right: 4px;
cursor:pointer;
}
.banner li .cur{
padding-top: 5px;
margin-top: -4px;
background-position: -228px 0;
}
.banner ul img{
width: 56px;
height: 45px;
}
.banner-right{
float: right;
border: 1px solid #393939;
width: 227px;
height: 363px;
background: url();
padding: 10px 5px 0;
}
.banner-right-nav{
float: left;
width: 216px;
height: 27px;
border-left: 1px solid #545454;
border-top: 1px solid #545454;
}
.banner-right-nav li{
height: 20px;
line-height: 20px;
padding:0 4px;
border-right: 1px solid #545454;
border-bottom: 1px solid #545454;
float: left;
color: #666666;
}
.banner-right-nav li .s{
display: none;
}
.banner-right-nav li.cur{
background-color:#6f6f6f;
border-bottom: 1px solid #6f6f6f;
color:#fff;
}
.banner-right-nav li.cur .s{
display: block;
width:5px;
height:3px;
background: url() -248px -132px;
position:absolute;
left:50%;
margin-left: -3px;
bottom:-5px;
}
.banner-right ol{
color: #666666;
}
.banner-right ol li{
line-height: 27px;
}
.banner-right olspan{
display: inline-block;
width: 19px;
height: 14px;
line-height: 14px;
border: 1px solid #4d4d4d;
text-align: center;
}
.banner-right .top3 span{
float: left;
background: #29b6e9;
color: white;
font-weight: bold;
}
.banner-right ol a{
color: #bfbfbf;
font-size: 12px;
margin-right: 5px;
}
.banner-right ol.stong{
float: right;
}
.banner-right ol a .pic-link{
display: inline-block;
width: 8px;
height: 11px;
background: url() -237px -100px;
text-indent: -99em;
overflow: hidden;
margin-right: 0;
margin-left: 4px;
}
.banner-right-bottom{
margin-top: 7px;
}
.banner-right-bottom li{
background: url() no-repeat -287px -108px;
padding-left: 9px;
height: 20px;
line-height: 12px;
}
.banner-right-bottom li a{
color: #df7e0d;
font-size: 12px;
}
.section1{
height: 435px;
margin-top: 10px;
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.section1 .hot{
height: 435px;
width: 161px;
float: left;
border-top:3px solid #e188c2;
border-right: 1px solid #dddddd;
float: left;
}
.section1 .hot h2{
color: #e188c2;
}
.section1 .man{
height: 435px;
width: 161px;
border-top:3px solid #879ac5;
border-right: 1px solid #dddddd;
float: left;
}
.section1 .man h2{
color: #879ac5;
}
.section1 .syn{
height: 435px;
width: 160px;
border-top:3px solid #a6a6a6;
border-right: 1px solid #dddddd;
float: left;
}
.section1 .syn h2{
color: #a6a6a6;
}
.section1 .tvb{
height: 435px;
width: 160px;
border-top:3px solid #7ec8da;
border-right: 1px solid #dddddd;
float: left;
}
.section1 .tvb h2{
color: #7ec8da;
}
.section1 .overseas{
height: 435px;
width: 160px;
border-top:3px solid #e18786;
border-right: 1px solid #dddddd;
float: left;
}
.section1 .overseas h2{
color: #e18786;
}
.section1 .ent{
height: 435px;
width: 160px;
border-top:3px solid #e4cd6f;
border-right: 1px solid #dddddd;
float: left;
}
.section1 .ent h2{
color: #e4cd6f;
}
.section1 h2{
height: 47px;
line-height: 47px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.item{}
.item .img-link{
width: 136px;
height: 96px;
display: block;
position: relative;
}
.item .img-link img{
width: 136px;
height: 96px;
border: 1px solid #eeeeee;
padding: 1px;
}
.img-link span{
font-size: 12px;
color: #c1c2bd;
width: 100px;
height: 20px;
line-height: 20px;
text-align: right;
background: url();
position: absolute;
right: 2px;
bottom: 2px;
}
.item p{
width: 141px;
padding-top: 4px;
padding-bottom: 10px;
position: relative;
}
.pic-link{
width: 8px;
height: 10px;
background: url() -237px -100px;
text-indent: -99em;
overflow: hidden;
position: absolute;
right: 0;
top: 8px;
}
.section1 dl{
border-top: 1px dashed #dddddd;
padding-top:10px;
}
.section1 dt{
height: 20px;
}
.section1 dd{
height: 20px;
}
.today{
width: 950px;
height: 870px;
position: relative;
}
.today h2{
color: #3b3b3b;
font-size: 18px;
font-weight: bold;
font-family: "宋体";
position:absolute;
left: 15px;
top: 12px;
}
.today-section{
width: 952px;
}
.today-title{
float: right;
display: inline;
padding-top: 18px;
padding-bottom: 13px;
}
.today-title a{
font-size: 12px;
}
.today ul{
margin:left;
}
.today .item{
margin-left: 15px;
float: left;
display: inline;
}
.today .item .img-link img{
width: 100px;
height: 140px;
}
.today .item .img-link{
width: 104px;
height: 144px;
}
.today .item p{
width: 104px;
padding-bottom: 4px;
}
.footer{
margin-top: 15px;
padding-top: 25px;
}
.footer fieldset{
margin-left: 260px;
}
.footer ul li{
line-height: 27px;
float: left;
display: inline;
}
.footer ul li a{
font-size: 12px;
color: #a9a9a9;
margin: 0 8px;
}
.footer dl{
height: 82px;
width: 192px;
padding-left: 20px;
border-right: 1px solid #dddddd;
float: left;
display: inline;
}
.footer dt{
line-height: 23px;
color: #666666;
font-weight: bold;
}
.footer dd{
line-height: 22px;
float: left;
display: inline;
}
.footer dd a{
font-size: 12px;
margin-right:11px;
}