2019-6-24 css小案例
<!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">发现</li>
<li class="daohang xia">学习</li>
<li class="daohang xia">培训</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>用户体验设计的价值——思考和反思</h4>
<span>原创</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>设计师必备技能</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>