您的位置：首页 > 产品设计 > UI/UE

模拟UI中国首页

2017-02-21 00:00 148 查看
<!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:0px;padding:0px;}

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:0px;position:absolute;float:left;}

#menu .search .icon img{margin-left:0 auto;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:0px;}

#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;margin-bottom: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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  UI中国 Web前端
相关文章推荐
新的分享
章节导航