摘要：<style> ul , li{margin:0;padding:0;} li{list-style: none;} /* 菜单 */ .middle{width:100%;background:url(3.jpg);background-size:cover;margin-top:40px;} /* 内容&nbs
<style>
ul , li{margin:0;padding:0;}
li{list-style: none;}
/* 菜单 */
.middle{width:100%;background:url(3.jpg);background-size:cover;margin-top:40px;}
/* 内容 */
.middle-container{width:1200px;margin:0 auto;}
/* 菜单 */
.menu{width:200px;float:left;background:rgba(0,0,0,.4);position: relative;}
.menu li {height:33px;line-height: 33px;}
.menu a {color:#fff;}
.menu i {margin-left:16px;margin-right:10px;}
.menu li:hover{background:#f1f1f1;}
.menu li:hover a{color:#777;}
.menu li:hover i {color:#e00;}
.menu li:hover .menu-li{display: block;}
/* 清除浮动的类 */
.cle:after{content: "";display: block;clear: both;}
/* li菜单内的div */
.menu-li {background:#fff;left:200px;position: absolute;width:860px;font-size:15px;top:0;height:330px;display: none;}
.menu-li div {float: left;}
.menu-li p {float:left;margin:10px 0 10px 20px;}
.menu-li a {color:#333;padding:0 4px;}
/* 左边 */
.menu-li div:first-child{width:660px;}
/* 右边 */
.menu-li div:last-child{background-color:#f1f1f1;width:200px;height:100%;padding-left: 5px; box-sizing: border-box;}
.menu-li-right a {padding:0;}
.menu-li-right img{height:56px;width:93px;}
/* 下边框 */
.hr {border-bottom:1px dashed #999;padding-bottom:6px;}
</style>
<!--中间的内容 -->
<div class="middle cle">
<div class="middle-container">
<!-- 菜单 -->
<ul class="menu">
<li><a href="#"><i class="fa fa-random"></i>菜单选项</a>
<div class="menu-li">
<!-- 左 -->
<div>
<p>当前流行 ></p>
<p class="hr">
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<br>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
</p>
<p>当前流行 ></p>
<p class="hr">
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<br>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
</p>
<p>当前流行 ></p>
<p class="hr">
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<br>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
</p>
<p>当前流行 ></p>
<p >
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
<a href="">牛字库</a>
</p>
</div>
<!-- 右 -->
<div class="menu-li-right">
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
<a href="#"><img src="3.jpg" alt=""></a>
</div>
</div>
</li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
<li><a href="#"><i class="fa fa-heart"></i>菜单选项</a></li>
</ul>
</div>
</div>
批改老师：灭绝师太批改时间：2019-02-11 09:29:44
老师总结：代码逻辑正确,是可以反复使用的,完成的不错,
