Correction status:qualified
Teacher's comments:咱们这期学员的基本功还是有的, 要相信自己
处理这个完整点的内容布局,在综合运用知识上并没有很好的掌握,本想拷贝别网站的页面样式,最后没有那么做,我想既然深入学习,那么就应该去写,哪怕错了对自己来说也是一个进步吧。总体来说,实际去做还是收获很多,知道了自己哪里不足。
<!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>
点击 "运行实例" 按钮查看在线实例
【总结】 自己去写还是生了很多,不知道怎么全面去思考,还需要加强练习,打好基本功。感谢老师的辛勤付出!
老师,教师节快乐!