返回2019-6-......登陆

2019-6-24 css小案例

辰晨2019-06-24 19:21:0245

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网