模拟UI中国首页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>UI中国</title>
<meta name="Keywords" content="关键字,关键字">
<meta name="description" content="">
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;font-family:"微软雅黑";color:#666;}
/* start menu */
#menu{width:100%;height:65px;background:#27445C;position:relative;}
#menu .logo{width:170px;height:63px;margin-left:100px;border:1px solid red;float:left;cursor:pointer;}
#menu .items ul{width:600px;height:65px;float:left;cursor:pointer;}
#menu .items ul li{list-style:none;float:left;color:#FFF;font-size:14px;width:60px;height:65px;text-align:center;line-height:65px;}
#menu .items ul li:first-child{background:#34495E;}
#menu .items ul li:hover{background:#34495E;}
#menu .search{width:90px;height:30px;background:#223242;border-radius:15px;position:absolute;top:17px;right:230px;}
#menu .search .content{width:30px;float:left;color:#7A8897;padding-left:15px;line-height:30px;outline:none;}
#menu .search .icon{width:30px;height:30px;right:0;position:absolute;float:left;}
#menu .search .icon img{margin:4px 4px 0 0;}
#menu .btn{width:100px;height:30px;float:right;margin-right:100px;margin-top:15px;}
#menu .btn a{width:50px;height:30px;display:block;text-decoration:none;color:#B8C4CE;font-size:14px;float:
left;text-align:center;line-height:30px;}
#menu .btn a:hover{background:#34495E;color:#3498DB;}
/* menu end */
/* start pic */
#pic{width:100%;}
#pic .content{width:1180px;height:350px;overflow:hidden;margin:0 auto;position:relative;}
#pic ul{width:9000px;height:350px;position:absolute;}
#pic ul li{float:left;}
#pic .btn a img{display:none;}
#pic .btn a.prev{width:90px;height:350px;display:block;position:absolute;top:65px;left:0;}
#pic .btn a.next{width:90px;height:350px;display:block;position:absolute;top:65px;right:0;}
/* pic end */
/* start home */
#home{width:1180px;margin:0 auto;}
/* start home title */
#home .title{width:1180px;height:45px;margin:30px auto 5px;display:block;}
#home .title .items{width:244px;height:40px;float:left;}
#home .title .items ul li{float:left;margin:0 10px;list-style:none;font-size:14px;line-height:40px;}
#home .title .items ul li:first-child{color:#3498DB;}
#home .title .upload{width:169px;height:40px;background:#3499DA;float:right;text-align:center;line-height:40px;
color:#F2E5EA;font-size:16px;border-radius:3px;}
#home .title .info{width:550px;height:40px;background:#FFEDC7;line-height:40px;font-size:14px;float:right;
padding:0 20px;margin-right:20px;border-radius:3px;color:#6B3612;}
#home .title .info a{text-decoration:none;color:#6B3612;}
#home .title .info a:hover{text-decoration:underline;}
/* home title end */
/* start home content */
#home .content{width:1180px;}
#home .content .item{height:695px;}
#home .content .item ul li{width:295px;height:337px;float:left;list-style:none;color:#9EAEBB;text-align:center;
border-bottom:1px solid #EFF1F3;-webkit-transition-duration: 500ms;-moz-transition-duration: 500ms;
-o-transition-duration: 0.5s;}
#home .content .item ul li:hover{box-shadow:0 0 5px #666;-webkit-box-shadow:0 0 5px #666;
-moz-box-shadow:0 0 5px #666;;opacity:1;}
#home .content .item ul li .a_img{margin:10px auto;width:280px;height:210px;display:block;}
#home .content .item ul li .a_name{width:280px;height:20px;text-decoration:none;color:#394A58;margin:10px 0;
display:block;}
#home .content .item ul li a img{margin-top:0;}
#home .content .item ul li a h3{text-align:left;margin-left:10px;}
#home .content .item ul li span{width:50px;height:20px;margin:5px;display:block;float:left;}
#home .content .item ul li span img{vertical-align:middle;}
#home .content .item ul li .original{width:34px;height:20px;background:#DFE5E9;color:#9EAEBB;line-height:20px;}
#home .content .item ul li .user{clear:both;width:75px;height:35px;display:block;color:#9EAEBB;}
#home .content .item ul li .user img{border-radius:50%;vertical-align:bottom;margin-top:10px;}
#home .content .page{width:1180px;height:40px;margin:0 auto 15px;}
#home .content .page ul li{float:left;list-style:none;width:40px;height:40px;background:#EFF2F5;margin-right:10px;
color:#99A1A9;text-align:center;line-height:40px;font-size:16px;font-style:italic;font-weight:bold;
border-radius:2px;}
#home .content .page ul li:first-child{background:#2C3E50;color:#FFF;}
#home .content .page ul li:hover{background:#2C3E50;color:#FFF;cursor:pointer;}
#home .content .page ul li.last_page{width:75px;}
#home .content .page ul li.to_page{width:60px;text-align:left;text-indent:5px;background:#FFF;border:1px solid #EBEFF3;}
#home .content .page ul li.to_page:hover{cursor:text;}
#home .content .page ul li.next_page{width:160px;height:40px;text-align:left;float:right;margin-right:0;}
#home .content .page ul li.next_page p{width:100px;float:left;text-indent:20px;}
#home .content .page ul li.next_page img{float:left;margin:5px 0 0 10px;}
/* home content end */
/* home end */
/* start comment */
#comment_container{width:100%;height:1263px;border-top:1px solid #EFF2F5;}
#comment{width:1180px;height:100%;margin:0 auto;}
/* start comment content */
#comment .content{width:880px;height:100%;float:left;border-right:1px solid #EFF2F5;}
#comment .content h1{height:36px;color:#5D6D7E;margin:20px 0;}
#comment .content ul li{width:880px;height:180px;list-style:none;border-bottom:1px dashed #EFF2F5;}
#comment .content ul li a{float:left;margin:10px 5px;}
#comment .content ul li .icon img{width:25px;height:25px;border-radius:50%;}
#comment .content ul li .text{float:left;width: 700px;height: 160px;margin:10px 10px;}
#comment .content ul li .text a{margin:0;}
#comment .content ul li .text p{line-height:22px;}
#comment .content ul li .text p a{width:85px;height:19px;color:#8C98DB;}
#comment .content ul li .text .date{color:#BDBDC5;margin-top:8px;font-size:12px;}
#comment .menu{width:880px;height:40px;margin:30px 0;}
#comment .menu ul li{width:40px;height:40px;float:left;margin:0 5px;font-size:16px;font-weight:bold;
font-style: italic;text-align:center;line-height:40px;color:#99A1A7;background:#EFF2F5;border-radius:2px;border:none;}
#comment .menu ul li:hover{background:#2C3E50;color:#FFF;cursor:pointer;}
#comment .menu ul li:first-child{background:#2C3E50;color:#FFF;}
#comment .menu ul li:last-child{float:right;}
#comment .menu ul li.next_page{width:160px;height:40px;text-align:left;float:right;margin-right:10px;}
#comment .menu ul li.next_page p{width:100px;float:left;text-indent:20px;}
#comment .menu ul li.next_page img{float:left;margin:5px 0 0 10px;}
/* comment content end */
/* start comment member */
#comment .member{width:296px;height:100%;float:left;}
#comment .member h1{font-size:24px;line-height:1.5;margin:20px 15px;}
#comment .member ul li{width:285px;height:76px;list-style:none;margin-left:10px;padding:12px 0;}
#comment .member ul li a img{border-radius:50%;float:left;}
#comment .member ul li .content{width:215px;height:60px;float:left;margin-left:9px;border:none;}
#comment .member ul li .content h5{color:#3498DB;font-weight:normal;font-size:14px;}
#comment .member ul li .content p{margin-top:3px;}
#comment .member ul li .content p:last-child{color:#DBE8F3;}
/* comment member end */
/* comment end */
/* start copyright */
#copyright{width:100%;height:100px;background:#EFF2F5;padding:55px 0;}
#copyright .content{width:1180px;height:100px;margin:0 auto;}
#copyright .content .info{width:450px;height:80px;float:left;}
#copyright .content .info a img{float:left;border:1px solid red;}
#copyright .content .info .details{float:left;margin-left:20px;}
#copyright .content .info .details h4{font-size:16px;font-weight:500;line-height:26px;}
#copyright .content .info .details p{color:#BBC6CF;font-size:12px;line-height:20px;}
#copyright .content .list{width:620px;height:100px;float:right;}
#copyright .content .list .con{float:left;}
#copyright .content .list .con .menu{width:500px;height:30px;text-align:right;}
#copyright .content .list .con .menu a{margin-left:20px;line-height:30px;text-decoration:none;color:#85919B;}
#copyright .content .list .con p{font-size:12px;color:#C5CCD3;}
#copyright .content .list img{float:right;}
/* copyright end */
</style>
</head>
<body>
<!-- start menu -->
<div id="menu">
<div class="logo"><img src="" width="170" height="65" alt="logo"/></div>
<div class="items">
<ul>
<li>首页</li>
<li>作品</li>
<li>学习</li>
<li>学院</li>
<li>灵感</li>
<li>活动</li>
<li>阅读</li>
<li>工具</li>
<li>招聘</li>
<li>话题</li>
</ul>
</div>
<div class="search">
<div class="content" contenteditable="true" onclick="javascript:void(0);">搜索</div>
<div class="icon"><img src="images/search_icon.png" width="20" height="20" alt="search"/></div>
</div>
<div class="btn">
<a href="#">登录</a>
<a href="#">注册</a>
</div>
</div>
<!-- menu end -->
<!-- start pic -->
<div id="pic">
<div class="content">
<ul>
<li><a href="#"><img src="images/1.jpeg" width="1180" height="350" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpeg" width="1180" height="350" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpeg" width="1180" height="350" alt=""/></a></li>
<li><a href="#"><img src="images/4.png" width="1180" height="350" alt=""/></a></li>
<li><a href="#"><img src="images/5.png" width="1180" height="350" alt=""/></a></li>
<li><a href="#"><img src="images/6.jpeg" width="1180" height="350" alt=""/></a></li>
<li><a href="#"><img src="images/7.jpeg" width="1180" height="350" alt=""/></a></li>
</ul>
</div>
<div class="btn">
<a href="#" class="prev"><img src="images/prev.png" width="90" height="350" alt="上一张"/></a>
<a href="#" class="next"><img src="images/next.png" width="90" height="350" alt="下一张"/></a>
</div>
</div>
<!-- pic end -->
<!-- start home -->
<div id="home">
<div class="title">
<div class="items">
<ul>
<li>首页推荐</li>
<li>最新</li>
<li>热门</li>
<li>源文件</li>
</ul>
</div>
<div class="upload">上传作品/经验</div>
<div class="info">心灵鸡汤：<a href="#">生活是一道致幻剂~</a></div>
</div>
<div class="content">
<div class="item">
<ul>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
<li>
<a href="#" class="a_img"><img src="images/a.jpg" width="280" height="210" alt=""></a>
<a href="#" class="a_name" target="_blank" title="品会APP 页面 GUI 移动APP界面">
<h3>品会APP 页面 GUI 移动APP界面</h3>
</a>
<span class="original">原创</span>
<span><img src="images/see.png" width="20" height="20" alt=""/> 717</span>
<span><img src="images/comment.png" width="20" height="20" alt=""/> 1</span>
<span><img src="images/leaf.png" width="20" height="20" alt=""/> 7</span>
<a href="#" class="user"><img src="images/user1.jpeg" width="20" height="20" alt="马王对"/>马王对</a>
</li>
</ul>
</div>
<div class="page">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="last_page">...227</li>
<li class="to_page" contenteditable="true"></li>
<li class="next_page">
<p>下一页</p>
<img src="images/next_page.png" width="30" height="30" alt="下一页"/>
</li>
</ul>
</div>
</div>
</div>
<!-- home end -->
<!-- start comment_container -->
<div id="comment_container">
<div id="comment">
<div class="content">
<h1>精彩评论</h1>
<ul>
<li>
<a href="#">
<img src="images/comment11.gif" width="106" height="80" alt="评论"/>
</a>
<a href="#" class="icon">
<img src="images/comment12.jpeg" width="25" height="25" alt="评论"/>
</a>
<div class="text">
<h3>WHH</h3>
<p>
<a href="#">@JaminWoo</a>
： 先感谢你指导规范的，确实不符合ios也不符合安卓的规范，用英文也是我自己的问题今后会用中文，批评意见都虚心接受。不过你开口闭口妈不妈的我就不明白了，我做这个也仅仅是个人爱好，你觉得碍到你眼了只要是针对作品的随便指教我都接受，带上父母就不太好了吧？你说我不会设计也好，不懂规范也好，用英文装逼也好，我有则改之无则加勉，请你不要张口闭口妈不妈的，不管我妈看不看的明白我妈都在支持我做我喜欢的事，希望作为前辈批评人的时候不要带上别人的父母，这是最起码的涵养和尊重。
</p>
<div class="date">8-30 12:29</div>
</div>
</li>
<li>
<a href="#">
<img src="images/comment11.gif" width="106" height="80" alt="评论"/>
</a>
<a href="#" class="icon">
<img src="images/comment12.jpeg" width="25" height="25" alt="评论"/>
</a>
<div class="text">
<h3>WHH</h3>
<p>
<a href="#">@JaminWoo</a>
： 先感谢你指导规范的，确实不符合ios也不符合安卓的规范，用英文也是我自己的问题今后会用中文，批评意见都虚心接受。不过你开口闭口妈不妈的我就不明白了，我做这个也仅仅是个人爱好，你觉得碍到你眼了只要是针对作品的随便指教我都接受，带上父母就不太好了吧？你说我不会设计也好，不懂规范也好，用英文装逼也好，我有则改之无则加勉，请你不要张口闭口妈不妈的，不管我妈看不看的明白我妈都在支持我做我喜欢的事，希望作为前辈批评人的时候不要带上别人的父母，这是最起码的涵养和尊重。
</p>
<div class="date">8-30 12:29</div>
</div>
</li>
<li>
<a href="#">
<img src="images/comment11.gif" width="106" height="80" alt="评论"/>
</a>
<a href="#" class="icon">
<img src="images/comment12.jpeg" width="25" height="25" alt="评论"/>
</a>
<div class="text">
<h3>WHH</h3>
<p>
<a href="#">@JaminWoo</a>
： 先感谢你指导规范的，确实不符合ios也不符合安卓的规范，用英文也是我自己的问题今后会用中文，批评意见都虚心接受。不过你开口闭口妈不妈的我就不明白了，我做这个也仅仅是个人爱好，你觉得碍到你眼了只要是针对作品的随便指教我都接受，带上父母就不太好了吧？你说我不会设计也好，不懂规范也好，用英文装逼也好，我有则改之无则加勉，请你不要张口闭口妈不妈的，不管我妈看不看的明白我妈都在支持我做我喜欢的事，希望作为前辈批评人的时候不要带上别人的父母，这是最起码的涵养和尊重。
</p>
<div class="date">8-30 12:29</div>
</div>
</li>
<li>
<a href="#">
<img src="images/comment11.gif" width="106" height="80" alt="评论"/>
</a>
<a href="#" class="icon">
<img src="images/comment12.jpeg" width="25" height="25" alt="评论"/>
</a>
<div class="text">
<h3>WHH</h3>
<p>
<a href="#">@JaminWoo</a>
： 先感谢你指导规范的，确实不符合ios也不符合安卓的规范，用英文也是我自己的问题今后会用中文，批评意见都虚心接受。不过你开口闭口妈不妈的我就不明白了，我做这个也仅仅是个人爱好，你觉得碍到你眼了只要是针对作品的随便指教我都接受，带上父母就不太好了吧？你说我不会设计也好，不懂规范也好，用英文装逼也好，我有则改之无则加勉，请你不要张口闭口妈不妈的，不管我妈看不看的明白我妈都在支持我做我喜欢的事，希望作为前辈批评人的时候不要带上别人的父母，这是最起码的涵养和尊重。
</p>
<div class="date">8-30 12:29</div>
</div>
</li>
<li>
<a href="#">
<img src="images/comment11.gif" width="106" height="80" alt="评论"/>
</a>
<a href="#" class="icon">
<img src="images/comment12.jpeg" width="25" height="25" alt="评论"/>
</a>
<div class="text">
<h3>WHH</h3>
<p>
<a href="#">@JaminWoo</a>
： 先感谢你指导规范的，确实不符合ios也不符合安卓的规范，用英文也是我自己的问题今后会用中文，批评意见都虚心接受。不过你开口闭口妈不妈的我就不明白了，我做这个也仅仅是个人爱好，你觉得碍到你眼了只要是针对作品的随便指教我都接受，带上父母就不太好了吧？你说我不会设计也好，不懂规范也好，用英文装逼也好，我有则改之无则加勉，请你不要张口闭口妈不妈的，不管我妈看不看的明白我妈都在支持我做我喜欢的事，希望作为前辈批评人的时候不要带上别人的父母，这是最起码的涵养和尊重。
</p>
<div class="date">8-30 12:29</div>
</div>
</li>
<li>
<a href="#">
<img src="images/comment11.gif" width="106" height="80" alt="评论"/>
</a>
<a href="#" class="icon">
<img src="images/comment12.jpeg" width="25" height="25" alt="评论"/>
</a>
<div class="text">
<h3>WHH</h3>
<p>
<a href="#">@JaminWoo</a>
： 先感谢你指导规范的，确实不符合ios也不符合安卓的规范，用英文也是我自己的问题今后会用中文，批评意见都虚心接受。不过你开口闭口妈不妈的我就不明白了，我做这个也仅仅是个人爱好，你觉得碍到你眼了只要是针对作品的随便指教我都接受，带上父母就不太好了吧？你说我不会设计也好，不懂规范也好，用英文装逼也好，我有则改之无则加勉，请你不要张口闭口妈不妈的，不管我妈看不看的明白我妈都在支持我做我喜欢的事，希望作为前辈批评人的时候不要带上别人的父母，这是最起码的涵养和尊重。
</p>
<div class="date">8-30 12:29</div>
</div>
</li>
</ul>
<div class="menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="next_page">
<p>下一页</p>
<img src="images/next_page.png" width="30" height="30" alt="下一页">
</li>
</ul>
</div>
</div>
<div class="member">
<h1>活跃会员</h1>
<ul>
<li>
<a href="#"><img src="images/user1.jpeg" width="60" height="60" alt="用户"/></a>
<div class="content">
<h5>化石马:</h5>
<p>下山</p>
<p>最近一周:发布25,被赞3,评论6</p>
</div>
</li>
<li>
<a href="#"><img src="images/user1.jpeg" width="60" height="60" alt="用户"/></a>
<div class="content">
<h5>化石马:</h5>
<p>下山</p>
<p>最近一周:发布25,被赞3,评论6</p>
</div>
</li>
<li>
<a href="#"><img src="images/user1.jpeg" width="60" height="60" alt="用户"/></a>
<div class="content">
<h5>化石马:</h5>
<p>下山</p>
<p>最近一周:发布25,被赞3,评论6</p>
</div>
</li>
<li>
<a href="#"><img src="images/user1.jpeg" width="60" height="60" alt="用户"/></a>
<div class="content">
<h5>化石马:</h5>
<p>下山</p>
<p>最近一周:发布25,被赞3,评论6</p>
</div>
</li>
<li>
<a href="#"><img src="images/user1.jpeg" width="60" height="60" alt="用户"/></a>
<div class="content">
<h5>化石马:</h5>
<p>下山</p>
<p>最近一周:发布25,被赞3,评论6</p>
</div>
</li>
<li>
<a href="#"><img src="images/user1.jpeg" width="60" height="60" alt="用户"/></a>
<div class="content">
<h5>化石马:</h5>
<p>下山</p>
<p>最近一周:发布25,被赞3,评论6</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- comment_container end -->
<!-- start copyright -->
<div id="copyright">
<div class="content">
<div class="info">
<a href="#"><img src="" width="100" height="80" alt="图标"></a>
<div class="details">
<h4>UI中国 专业界面设计平台</h4>
<p>前身为iconfans.com。国内最专业的UI设计平台!</p>
<p>七年来一直为UI设计师做最好的服务而不断努力着!</p>
</div>
</div>
<div class="list">
<div class="con">
<div class="menu">
<a href="#">小米主题学院</a>
<a href="#">原讨论组</a>
<a href="#">商务合作</a>
<a href="#">问题反馈</a>
<a href="#">关于我们</a>
</div>
<p>京ICP备14007358号-1 \ 京公网安备11010802014104号 \ Powered by © 2008-2015 UI.CN</p>
</div>
<img src="images/qrcode.png" width="100" height="100" alt="二维码"/>
</div>
</div>
</div>
<!-- copyright end -->
<!-- javascript -->
<script type="text/javascript"src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var islaunch = 0;
$(".search").click(function() {
if (islaunch == 0) {
$(this).css({"width":"200px", "background":"#FFF"});
$(this).find(".content").css("width","120px");
$(this).find(".content").text("");
islaunch = 1;
}
});
$("#pic .btn a").mouseover(function() {
$(this).find("img").css("display", "block");
}).mouseout(function() {
$(this).find("img").css("display", "none");
});
$("#pic .btn a.prev img").click(function() {
$("#pic .content ul").prepend($("#pic .content ul li:last"));
$("#pic .content ul").css("left", "-1180px");
$("#pic .content ul").animate({"left" : "0px"}, 1000);
});
$("#pic .btn a.next img").click(imgNext);
function imgNext() {
$("#pic .content ul").animate({"left" : "-1180px"}, 1000, function() {
$("#pic .content ul").append($("#pic .content ul li:first"));
$("#pic .content ul").css("left", "0px");
});
}
var autoPlay = setInterval(imgNext, 5000);
$("#pic .content ul").hover(function() {
clearInterval(autoPlay);
}, function() {
autoPlay = setInterval(imgNext, 2000);
});
</script>
<!-- javascript -->
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/02/21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读