摘要:<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>常用布局导航案例</title> <link rel="shortcun icon" type="image
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>常用布局导航案例</title> <link rel="shortcun icon" type="image/x-icon" href="images/tao.png"> <link rel="stylesheet" type="text/css" href="css/daohang.css"> <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <div class="header"> <div class="header_content"> <div class="header_left"> <a href="" class="header_a" style="color:black">中国大陆 <i class=" fa fa-angle-down"></i></a> <a href="" style="color:#F22E00">亲,请登录</a> <a href="">免费注册 </a> <a href="">手机逛淘宝</a> </div> <div class="header_right"> <a href="" class="header_a">我的淘宝 <i class="fa fa-angle-down"></i> <ul> <li>已买到的宝贝</li> <li>我的足迹</li> </ul> </a> <a href=""><i class="fa fa-cart-plus" style="color:#F22E00"></i> 购物车 <span class="fa fa-angle-down"></span></a> <a href="" class="header_a"> <i class="fa fa-star"></i> 收藏夹 <span class="fa fa-angle-down"></span> <ul> <li>收藏的宝贝</li> <li>收藏的店铺</li> </ul> </a> <a href=""> 商品分类 <div class="shuxian"></div> </a> <a href="" class="header_a">卖家中心 <span class="fa fa-angle-down"> </span> <ul> <li>免费开店</li> <li>已卖出的宝贝</li> <li>出售中的宝贝</li> <li>卖家服务市场</li> </ul> </a> <a href="" class="header_a">联系客服 <span class="fa fa-angle-down"></span></a> <a href="" class="header_a"><i class="fa fa-reorder" style="color:#F22E00"> </i>网站导航 <span class="fa fa-angle-down"></span> <div class="table_1"> <div class="table_1_1"> <table> <tr> <td colspan="4" style="color:red; font-size:20px">主题市场</td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> <tr> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> <td><a href="">女装</a></td> </tr> </table> </div> <div class="table_1_1"></div> <div class="table_1_1"></div> <div class="table_1_1"></div> </div> <div class="clear"></div> </a> </div> </div> <div class="clear"> </div> </div> </body> </html>
*{margin:0px; padding:0px;} a{text-decoration:none; color:#6C6C6C; font-size:13px; line-height:36px;} li{list-style:none;} .table_1{display:none;} .clear{clear:both;} .header{width:100%; background-color:#F5F5F5;} .header_content{width:1200px; margin: 0px auto;} .header_left{height:36px; float:left;} .header_left a{margin-left:5px;} .header_content a:hover{color:#FF4400;} .header_right{height:36px; float:right;} .header_a{display:inline-block; width:80px; height:36px; text-align:center; position:relative;} .shuxian{display:inline-block; width:13px; height:13px; border-right:1px solid #DEDEE3;} .header_a:hover{background-color:#FFFFFF;} .header_a ul{border:1px solid #F5F5F5;display:none; border-top:none;} .header_a:hover ul{display:block; position:absolute;width:90px; } .header_a ul li:hover{background-color:#F5F5F5;} .header_a ul li{height:27px; line-height:27px; color:#6C6C6C; text-align:left; padding:0px 3px; margin:5px 0px;} .table_1{width:1195px; height:305px; position:absolute; right:0px;} .header_a:hover .table_1{display:block;} .table_1_1{width:296.75px; height:305px; border:1px solid #F5F5F5; margin:0px; float:left; border-top:none;} .table_1_1 table{width:296.75px; height:305px;padding:0px 10px;} .table_1_1 a{display:inline-block;width:30px; height:25px; line-height:25px; } .table_1_1 a:hover{background:#FF5500; color:#FFFFFF;}
不知道是我基础掌握的不好的原因吗,总想不起来什么地方该用什么方式来实现效果,只会按部就班的按老师的课程走
批改老师:灭绝师太批改时间:2018-12-07 15:17:36
老师总结:其实知识点运用的不错,就是布局的时候对于标签的运用不是很熟练,关于案例不要着急,后面有大案例等着你