abstract:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动案例展示</title&
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动案例展示</title> <style type="text/css"> body{ margin: 0; padding: 0; } .header{ background-color: lightgray; height: 60px; } .clear{ clear: both; } .header .nav{ width: 1000px; margin: 0 auto; } .header .nav .nav_l{ margin-top: 0; margin-bottom: 0; padding-left: 0; width: 750px; } .header .nav .nav_r{ width: 230px; float: right; } .header .nav .nav_l .item{ list-style: none; background-color: forestgreen; float: left; } .header .nav .nav_l .item a{ float: left; min-width: 80px; min-height: 60px; line-height: 60px; font-size: 1.1rem; color: white; text-decoration-line: none; padding: 0 15px; text-align: center; } .header .nav .nav_l .item a:hover{ font-size: 20px; background-color: orangered; text-decoration: none; } .nav_r p{ font-size: 20px; color: forestgreen; } .banner{ width: 1920px; height: 350px; background-color: green; margin: 2px auto; } </style> </head> <body> <div class="header"> <div class="nav"> <ul class="nav_l"> <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> <li class="item"><a href="">联系我们</a></li> </ul> <div class="nav_r"> <p>联系电话:15679999999</p> </div> <div class="clear"></div> </div> <div class="banner">banner图</div> </div> </body> </html>
Correcting teacher:查无此人Correction time:2019-05-16 09:32:59
Teacher's summary:完成的不错。常用的css样式,可以单独写一个公用文件。继续加油。