<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽屉官网</title>
<link rel="icon" href="3.jpg">
<style>
*{
margin: 0;
}
a{
text-decoration: none;
}
body{
font-size: 14px;
}
.head-box{
background-color: #364e98;
width: 100%;
height: 72px;
position: fixed;
top: 0;
left: 0;
}
.head-content{
margin: auto;
width: 1116px;
height: 72px;
background-color: #178cfa;
line-height: 70px;
position: relative;
}
.head-logo1{
background: url("01.png") no-repeat 0 0;
width: 72px;
height: 72px;
float: left;
/*margin: 10px 0 0 0;*/
}
.head-logo2{
background: url("02.png") no-repeat 0 0;
width: 224px;
height: 44px;
float: left;
/*display: inline-block;*/
margin: 15px 10px 10px 10px;
}
.head-box a.action-menu{
float: left;
margin-left: 30px;
background-color: #5fb57d;
}
.head-box a.tb{
color: green;
margin-left: -6px;
padding: 1px 13px 1px 13px;
display: inline-block;
background-color: #fac237;
}
.head-box a.tb:hover{
color: #fafbfc;
background-color: #b9bdc1;
}
.head-box a.active{
background-color: #b18621;
}
.key-search{
float: right;
margin-top: 20px;
}
.key-search .search-text,.key-search a.i{
float: left;
}
.key-search .search-text{
width: 125px;
height: 37px;
color: #ffd050;
padding: 5px 3px 0 3px;
margin-top: -5px;
}
.key-search .ico{
background: url("4.png") no-repeat 0 0;
width: 46px;
height: 44px;
display: inline-block;
margin-top: 1px;
}
.key-search a.i{
background-color: #d1d5da;
width: 46px;
height: 44px;
display: inline-block;
margin-top: -4px;
border-left: none;
}
.head-content .action-nav{
position: absolute;
right: 200px;
margin-top: -70px;
margin-right: 20px;
}
.head-content .action-nav a{
color: #fafbfc;
padding: 0 10px;
display: inline-block;
}
.head-content .action-nav a:hover{
background-color: #d1d5da;
}
/*——————————————————————————————————————————————————————————*/
/* 以上为!*head*!*/
.main-content-box{
background-color: #e1e4e8;
width: 100%;
padding-top: 72px;
}
.main-content{
background-color: #fff!important;
margin: 0 auto;
width: 960px;
height: auto;
min-height: 2000px;
padding: 6px 28px 60px;
}
.content-lift{
float: left;
width: 630px;
/*border: 1px dashed #178cfa;*/
}
.child-nav{
float: left;
padding-bottom: 10px;
padding-right: 10px;
}
a .publish-btn{
float: right;
}
.top-area{
overflow: hidden;
border-bottom: 1px solid #364e98;
}
.child-nav .active{
background-color: darkorange;
display: inline-block;
width: 30px;
height: 26px;
padding:1px 5px 0 5px ;
}
.child-nav a{
display: inline-block;
/*width: 30px;*/
/*height: 26px;*/
line-height: 26px;
text-align: center;
color: #5fb57d;
font-weight: 700;
margin: 10px;
}
.sort-nav{
margin-left: 244px;
margin-top: 15px;
}
.sort-nav a{
margin-left: 10px;
margin-right: 10px;
color: #959da5;
}
.publish-btn{
display: inline-block;
width: 134px;
height: 30px;
background-color: #5fb57d;
color: #fafbfc;
line-height: 30px;
text-align: center;
margin-top: -23px;
float: right;
}
.content-list .item{
border-bottom: 1px red solid;
/*overflow: hidden;*/
overflow: auto;
/*overflow: hidden; # ---将超出部分隐藏*/
}
.item .news-pic img{
/*float: right;*/
margin-top: 10px;
width: 630px;
height: 300px;
}
.item .part2{
padding-top: 15px;
margin-bottom: 5px;
float: left;
}
.hand-icon img{
display: inline-block;
width: 18px;
height: 18px;
vertical-align: -3px;
/*margin-left: 10px;*/
/*margin-right: 5px;*/
}
.hand-icon b{
color:#b9bdc1;
margin-right: 20px;
}
.share-icon a{
background: url("m.png");
width: 22px;
height: 22px;
display: inline-block;
/*opacity: 0.9;*/
}
.share-icon .icon-taobao{
background-position: 0 -45px;
/*width: 22px;*/
/*height: 22px;*/
}
.share-icon .icon-qq{
background-position: -45px -45px;
margin-right: 10px;
}
.share-icon .icon-cmcc{
background-position: -200px -45px;
}
.share-icon .icon-baidu{
background-position: -245px -45px;
}
.item .part3{
padding-top: 15px;
margin-bottom: 5px;
float: right;
}
.part3 a{
display: inline-block;
width: 22px;
height: 22px;
vertical-align: -4px;
}
.ct_pagepw{
color: #303030 !important;
/*-- !important*!*/
}
.page-area ul li{
display: inline-block;
color: #364e98;
line-height: 34px;
text-align: center;
width: 44px;
border: 1px solid #5fb57d;
border-radius: 20%;
margin-top: 15px;
margin-right: 3px;
float: left;
}
.dig_lcpage{
margin-left: 10px;
}
.page-area ul li:hover{
color: #fafbfc;
background-color: #178cfa;
}
</style>
</head>
<body>
<!--/*——————————————————————————————————————————————————————————*/-->
<!--/*head*/-->
<div class="head-box">
<div class="head-content">
<a href="#" class="head-logo1"></a>
<a href="#" class="head-logo2"></a>
<a class="action-menu">
<a href="#" class="tb active">全部</a>
<a href="#" class="tb">42区</a>
<a href="#" class="tb">段子</a>
<a href="#" class="tb">图片</a>
<a href="#" class="tb">爱了</a>
<a href="#" class="tb">你问我答</a>
</a>
<div class="key-search">
<form action="/" method="post">
<input type="text" class="search-text" autocomplete="off">
<a href="#" class="i">
<span class="ico"></span>
</a>
</form>
</div>
<div class="action-nav">
<a href="#" class="register-btn">注册</a>
<a href="#" class="login-btn">登录</a>
</div>
</div>
</div>
<!--/*——————————————————————————————————————————————————————————*/-->
<!--/*content*/-->
<div class="main-content-box">
<div class="main-content">
<div class="content-lift">
<div class="top-area">
<div class="child-nav">
<a href="#" class="hot-btn active">最热</a>
<a href="#" class="new-btn">最新</a>
<a href="#" class="persion-btn">人类发布</a>
</div>
<div class="sort-nav">
<a href="#" class="imm-sort">即时顺序</a>
<a href="#" class="24-hour-btn">24小时</a>
<a href="#" class="3-day-btn">3天</a>
</div>
<a href="#" class="publish-btn">
<span class="n2">发布</span>
</a>
</div>
<div class="content-list">
<div class="item">
<div class="news-pic">
<img src="5.jpg" alt="新热抽屉网">
</div>
<div class="news-content">
<div class="part1">
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
</div>
<div class="part2">
<a href="#" class="hand-icon user-icon">
<span>
<img src="6.jpg">
</span>
<b>乱太郎</b>
</a>
<a href="#" class="hand-icon video-icon">
<span>
<img src="7.png">
</span>
<b>视频</b>
</a>
<a href="#" class="hand-icon read-icon">
<span>
<img src="8.png">
</span>
<b>相关阅读</b>
</a>
</div>
<span class="part3">
<i>分享：</i>
<span class="share-icon">
<a href="#" title="分享到淘宝" class="icon-taobao"></a>
<a href="#" title="分享到QQ" class="icon-qq"></a>
<a href="#" title="分享到QQ" class="icon-cmcc"></a>
<a href="#" title="分享到百度" class="icon-baidu"></a>
</span>
</span>
</div>
</div>
<div class="item">
<div class="news-pic">
<img src="5.jpg" alt="新热抽屉网">
</div>
<div class="news-content">
<div class="part1">
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
</div>
<div class="part2">
<a href="#" class="hand-icon user-icon">
<span>
<img src="6.jpg">
</span>
<b>乱太郎</b>
</a>
<a href="#" class="hand-icon video-icon">
<span>
<img src="7.png">
</span>
<b>视频</b>
</a>
<a href="#" class="hand-icon read-icon">
<span>
<img src="8.png">
</span>
<b>相关阅读</b>
</a>
</div>
<span class="part3">
<i>分享：</i>
<span class="share-icon">
<a href="#" title="分享到淘宝" class="icon-taobao"></a>
<a href="#" title="分享到QQ" class="icon-qq"></a>
<a href="#" title="分享到QQ" class="icon-cmcc"></a>
<a href="#" title="分享到百度" class="icon-baidu"></a>
</span>
</span>
</div>
</div>
<div class="item">
<div class="news-pic">
<img src="5.jpg" alt="新热抽屉网">
</div>
<div class="news-content">
<div class="part1">
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
人们都说：“桂林山水甲天下。”我们乘着木船荡漾在漓江上，来观赏桂林的山水。
</div>
<div class="part2">
<a href="#" class="hand-icon user-icon">
<span>
<img src="6.jpg">
</span>
<b>乱太郎</b>
</a>
<a href="#" class="hand-icon video-icon">
<span>
<img src="7.png">
</span>
<b>视频</b>
</a>
<a href="#" class="hand-icon read-icon">
<span>
<img src="8.png">
</span>
<b>相关阅读</b>
</a>
</div>
<span class="part3">
<i>分享：</i>
<span class="share-icon">
<a href="#" title="分享到淘宝" class="icon-taobao"></a>
<a href="#" title="分享到QQ" class="icon-qq"></a>
<a href="#" title="分享到QQ" class="icon-cmcc"></a>
<a href="#" title="分享到百度" class="icon-baidu"></a>
</span>
</span>
</div>
</div>
</div>
<div id="page-area" class="page-area">
<div class="dig_lcpage">
<ul>
<li><span class="ct_pagepw">1</span></li>
<li><a href="#" class="ct_pagepa">2</a></li>
<li><a href="#" class="ct_pagepa">3</a></li>
<li><a href="#" class="ct_pagepa">4</a></li>
<li><a href="#" class="ct_pagepa">5</a></li>
<li><a href="#" class="ct_pagepa">6</a></li>
<li><a href="#" class="ct_pagepa">7</a></li>
<li><a href="#" class="ct_pagepa">8</a></li>
<li><a href="#" class="ct_pagepa">9</a></li>
<li><a href="#" class="ct_pagepa">10</a></li>
<li><a href="#" class="ct_pagepa_edge">下一页</a></li>
</ul>
</div>
</div>
</div>
<div class="content-right"></div>
</div>
<div class="footer-band"></div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/zxy01/p/13289433.html