abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>仿UI中國首頁</title><link rel="shortcut icon" type="image/x-icon" href="htt
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿UI中國首頁</title>
<link rel="shortcut icon" type="image/x-icon" href="https://www.ui.cn/Public/img/uichina.jpg">
<style>
*{padding:0;margin:0;}
body{background:#eff3f5;font-family:'微軟雅黑';}
.clear{clear:both;}
.nav{height:70px;background-color: #fff;margin:0 auto;}
.nav .menu{width:1180px; height:70px;}
.logo img{height:70px;margin-right:20px;float: left;}
.daohang{width: 80px;height:65px;line-height:65px;text-align: center;font-size: 14px;color:#34495e;border-top: 5px solid #fff;}
.daohang:hover{border-top: 5px solid #3498db;box-shadow: 0 1px 1px #eee;}
li{list-style: none;float: left;}
.shou{color:#3498db;}
.ad{width:1180px; height: 279px;margin:10px auto;}
.main{width:1180px;margin:0 auto;}
.main_shou{width:136px;height: 40px;text-align:center;line-height:40px;border-radius:20px;border:1px solid #34b1e7;color:#34b1e7;}
.main_nav{width:96px;height: 40px;text-align:center;line-height:40px;color:#7c7c7c;padding:0 10px;}
.main_nav:hover{color:#34b1e7;}
.box{width:280px;height:310px;margin:20px 1px 0 1px;border-radius:6px;;border:6px solid #eff3f5;float:right;}
.box:hover{box-shadow:0 0 10px #ccc;border:6px solid #fff;margin-top:15px;background-color: #fff;}
.jianjie{display:block;margin:8px 0 0 10px;font-size: 12px;}
h4{margin:8px 0 0 10px;}
.user{height:30px;line-height:30px;display:block;font-size: 12px;margin:0px 0 0 10px;}
.user:hover{color:#34b1e7;}
.miaoshu{background-color: #f77200;color:#fff;display:block;width:40px;height:20px;font-size: 12px;text-align: center;line-height:20px;margin-left:8px;}
</style>
</head>
<body>
<div>
<div class="nav menu">
<div><img src="http://img.zcool.cn/community/0177ba5cb323eaa801208f8b309bac.gif" alt="logo"></div>
<ul>
<li class="daohang shou">首頁</li>
<li class="daohang xia">發(fā)現(xiàn)</li>
<li class="daohang xia">學(xué)習(xí)</li>
<li class="daohang xia">培訓(xùn)</li>
<li>榜單</li>
<li class="daohang xia">更多</li>
</ul>
<ul>
<li class="daohang shou" style="float:right;">登錄</li>
</ul>
</div>
<div></div>
</div>
<div>
<img src="https://img.ui.cn/data/upload/201906/1561004542_809.png" alt="" style="width:1180px;border-radius:10px;">
</div>
<div>
<ul>
<li>首頁推薦</li>
<li>即刻作品</li>
<li>最新作品</li>
<li>佳作分享</li>
</ul>
<div></div>
<div>
<div>
<img src="https://img.ui.cn/data/vip/1528255941.jpeg" alt="" style="width:280px;border-radius:6px;">
</div>
<div>
<h4>AI CC 2018大師課</h4>
<span>Adobe全球Top10講師馬丁帶你透徹掌握AI</span>
<span><img src="https://img.ui.cn/data/vip/1528255941.jpeg" alt="" style="width:20px;height:20px;margin-right: 10px;margin-top:5px;border-radius: 10px;">UI中國 X 馬丁</span>
</div>
</div>
<div>
<div>
<img src="https://img.ui.cn/data/vip/1560313454.png" alt="" style="width:280px;border-radius:6px;">
</div>
<div>
<h4>10000個知識點</h4>
<span>每天進步一點點</span>
<span><img src="https://www.ui.cn/Public/img/uichina.jpg" alt="" style="width:20px;height:20px;margin-right: 10px;margin-top:5px;border-radius: 10px;">UI中國</span>
</div>
</div>
<div>
<div>
<img src="https://img.ui.cn/data/file/8/2/7/2560728.jpg" alt="" style="width:280px;border-radius:6px;border-radius: 10px;">
</div>
<div>
<h4>用戶體驗設(shè)計的價值——思考和反思</h4>
<span>原創(chuàng)</span>
<span><img src="https://imgavater.ui.cn/avatar/0/9/4/3/103490.jpg?imageMogr2/auto-orient/crop/!779x779a100a0/thumbnail/60x60" alt="" style="width:20px;height:20px;margin-right: 10px;margin-top:5px;border-radius: 10px;">蘇大牙</span>
</div>
</div>
<div>
<div>
<img src="https://img.ui.cn/data/vip/1557139606.png" alt="" style="width:280px;border-radius:6px;">
</div>
<div>
<h4>Sketch 加薪進階課</h4>
<span>設(shè)計師必備技能</span>
<span><img src="https://www.ui.cn/Public/img/uichina.jpg" alt="" style="width:20px;height:20px;margin-right: 10px;margin-top:5px;border-radius: 10px;">UI中國</span>
</div>
</div>
</div>
</body>
</html>
Correcting teacher：查無此人Correction time：2019-06-25 17:49:42
Teacher's summary：完成的不錯。浮動在移動端用到的比較多。繼續(xù)加油。