html:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css1.css"> <title>页面布局作业</title> </head> <body> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="">首页</a></li> <li class="item"><a href="">新闻</a></li> <li class="item"><a href="">产品</a></li> <li class="item"><a href="">关于我们</a></li> <li class="item"><a href="">联系我们</a></li> </ul> </div> </div> <div class="contoner"></div> <div class="footer"> <div class="content"> <p> <a href="">©:php中文网</a> <a href="">联系我们</a> <a href="">网站备案号1111111</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css:
实例
.header
{background: darkslategray;
}
.header .content
{ width: 1000px;
height: 60px;
background: aqua;
margin:0 auto;
}
.header .content .nav
{ margin: 0;
padding: 0;
}
.header .content .nav .item
{
list-style: none;
}
.header .content .nav .item a
{
float:left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: white;
text-decoration: none;
padding: 0 15px;
}
.header .content .nav .item a:hover
{
background-color: red;
font-size: 1.1rem;
}
.contoner
{
width: 1000px;
height: 800px;
margin: 5px auto;
background: darkslategray;
}
.footer
{
background: aqua;
}
.footer .content
{
width: 1000px;
height: 60px;
margin: 0 auto;
background: 044#;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
没有写完，下次补上