html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/index.css"/> </head> <body> <header> <div class="header border center"> <div class="logo"> <a href="index.html"><img src="" ></a> </div> <nav> <ul> <li><a href=""><strong>电影台词</strong></a> </li> <li><a href=""><strong>电视剧台词</strong></a> </li> <li><a href=""><strong>英文台词</strong></a> </li> <li><a href=""><strong>搞笑台词</strong></a> </li> <li><a href=""><strong>经典台词</strong></a> </li> <li><a href=""><strong>网络台词</strong></a> </li> </ul> </nav> </div> </header> <div id="container" class="border center"> <article class="bg"> </article><aside class="bg"> </aside> </div> <footer class="bg"> </footer> </body> </html>
css
/* 样式初始化*/
*{
margin: 0px;
padding: 0px;
}
/*公用样式*/
.border{
border: 1px solid #ff0000;
}
.center{
margin: 0px auto;
}
.bg{
background: yellowgreen;
}
body{
background: #FBFBFB;
}
header{
width: 100%;
height: 60px;
background: #FFFFFF;
position: fixed;
top: 0;
left: 0;
}
#container{
width: 1200px;
height: 800px;
margin-top: 70px;
}
#container article{
width: 821px;
height: 600px;
display: inline-block;
}
#container aside{
width: 354px;
height: 600px;
display: inline-block;
margin-left: 20px;
}
footer{
width: 1198px;
height: 115px;
margin: 10px auto;
}
header .header{
width: 1200px;
height: 60px;
vertical-align: middle;
}
header .header nav{
width: 630px;
height: 30px;
display: inline-block;
vertical-align: middle;
}
header .header nav ul li{
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
display: inline-block;
}
时间： 2024-10-07 16:35:57