收藏
批改状态：合格
老师批语：咱们这期学员的基本功还是有的, 要相信自己
处理这个完整点的内容布局，在综合运用知识上并没有很好的掌握，本想拷贝别网站的页面样式，最后没有那么做，我想既然深入学习，那么就应该去写，哪怕错了对自己来说也是一个进步吧。总体来说，实际去做还是收获很多，知道了自己哪里不足。
<!DOCTYPE html>
<html>
<head>
<title>页面布局</title>
<style>
body{
padding:0px;
margin:0px;
}
.header{
width:90%;
min-height:50px;
background:#666666;
margin:0 auto;
}
.header h2{
margin:0;
padding:0;
text-align: center;
line-height: 50px;
}
.container{
width:90%;
background:green;
margin:5px auto;
}
.left{
width:200px;
min-height: 600px;
background:black;
}
.right{
width:200px;
min-height: 600px;
background:#555555;
}
.wrap{
width:100%;
background:#777777;
}
.main{
min-height:600px;
}
.wrap,.left, .right{
float:left;
}
.container{
overflow:hidden;
}
.main{
padding: 0 200px;
}
.left{
margin-left: -100%;
}
.right{
margin-left:-200px;
}
.footer {
background:#444444;
width:90%;
margin:5px auto;}
.footer .content{
hight:110px;
line-height:50px;
text-align:center;}
.container .left h2{
font-size:14px;
color:white;
text-align:center;
border-bottom:1px solid white;}
ul li{
color:white;
font-size:14px;
}
/*以下header引入老师的样式*/
.header .content {
width: 100%;
background-color: black;
margin: 0 auto;
height: 60px;
}
/*以下header引入老师的样式*/
.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;
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 60px;
/*导航前景色*/
color: white;
padding: 0 15px;
/*去掉a标签的默认下划线*/
text-decoration: none;
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 1.1rem;
}
.main ul {
height:600px;
padding:0;
margin:0;
list-style:none;
}
.main ul li{
text-align:center;
width:200px;
color:white;
float:left;
margin-left:32px;
}
.mian ul li p{
text-align:center;
}
.right ul{
padding:0;
margin:0;
list-style:none;
}
.right ul li {
margin-left:42px;
}
.right ul li img{
width:100px;
}
</style>
</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="container">
<div class="wrap">
<div class="main">
<ul>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
</ul>
</div>
</div>
<div class="left">
<h2>产品分类</h2>
<div class='content'>
<ul>
<li><a>产品一</li>
<li>产品二</li>
<li>产品三</li>
</ul>
</div>
</div>
<div class="right">
<ul>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
<li>
<img src='1.jpg' width='200'>
<p>产品名称：黄金</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class='content'><p>版权归属：php中文网</p></div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
【总结】 自己去写还是生了很多，不知道怎么全面去思考，还需要加强练习，打好基本功。感谢老师的辛勤付出！
老师，教师节快乐！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
