最终效果
index.html头部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>豆阅小说网</title>
<link href="http://at.alicdn.com/t/font_1518637_dyl6tdrp16.css">
<link rel="stylesheet" type="text/css" href="css/pubic.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
pubic.css 添加全站样式
*{
margin: 0;
padding: 0;
}
body{
min-width: 1200px;
width: 100%;
overflow-x:auto;
overflow-y: auto;
}
/* 常用css代码!! */
input, select, option, textarea, button {
font: 0.6rem/1 tahoma, arial, 'Microsoft YaHei', simsun;
}
* {
-webkit-tap-highlight-color: rgba(180,180,180,0.2);
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
table {
border-collapse: collapse;
}
li {
list-style: none;
}
img, iframe {
border: none;
}
dt {
font-weight: bold;
}
em, i {
font-style: normal;
}
input[type="submit"], input[type="reset"], input[type="button"], button {
-webkit-appearance: none;
line-height: normal !important;
}
::-webkit-input-placeholder {
color:#999;
}
.placeholder-text {
color: #999;
}
.hidden {
display: none !important;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
overflow: hidden;
}
.float-left {
float: left !important;
}
.float-right {
float: right !important;
}
.absolute-left {
position: absolute !important;
left: 0 !important;
}
.absolute-right {
position: absolute !important;
right: 0 !important;
}
.over-hidden {
overflow: hidden !important;
}
.inline-block {
display: inline-block !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.border-box {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.middle {
vertical-align: middle;
}
.block {
display: block !important;
}
.weight {
font-weight: bold !important;
}
.both {
clear: both !important;
}
.ellipsis {
display: block;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.circle {
border-radius: 50%;
overflow: hidden;
}
.more{
color: #999;
font-size: 13px;
}
.more:hover{
color: #cb4829;
}
.radius{
border-radius: 4px;
}
.pointer{
cursor: pointer;
}
/*通用头部*/
.head{
width: 1200px;
margin: 0 auto;
padding: 5px 0 10px;
position: relative;
background-color: #fff;
}
/*通用网站中间部分*/
.body{
width: 1200px;
margin: 0 auto;
min-height:500px ;
}
/*通用底部*/
.footer{
margin-top: 20px;
width: 100%;
height: 150px;
background-color:#333;
}
头部制作
logo
<div class="head">
<div class="head-top clearfix">
<!-- logo-->
<div class="head-logo float-left">
<a href="/">
<img src="images/toplogo.png">
</a>
</div>
</div>
</div>
pubic.css
.head{
width: 1200px;
margin: 0 auto;
padding: 5px 0 10px;
position: relative;
background-color: #fff;
}
/*头部logo*/
.head-top .head-logo a img{
width: 170px;
vertical-align: middle;
}
头部搜索
<!-- 搜索-->
<div class="head-search float-left">
<input class="search-text float-left" type="text" placeholder="请输入">
<input class="search-btn float-right" type="submit" >
</div>
pubic.css
/*头部搜索*/
.head-search{
background: #fafafa;
border-radius: 2px;
margin-left: 240px;
margin-top: 20px;
width: 338px;
height: 34px;
}
.search-text{
border: 1px solid #e0e0e0;
border-radius: 2px 0px 0px 2px;
height: 32px;
line-height: 32px;
width: 283px;
border-right: 0 none;
padding-left: 14px;
font-size: 14px;
letter-spacing: 1px;
color: #333;
}
.search-btn{
width: 40px;
height: 34px;
background: url(../images/search.png) no-repeat center center #cb4829;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
cursor: pointer;
outline: 0;
border: 0;
text-indent: -9999px;
}
.search-btn:hover{
background-color:#d66043;
}
头部右侧用户信息
<!-- 用户信息-->
<div class="head-info float-right clearfix">
<div class="info info-login float-left">
<a href="">登录</a>
</div>
<div class="info info-register float-left">
<a href="">注册</a>
</div>
<div class="info info-mess float-left">
<a href="">消息</a>
</div>
<div class="info info-recharge float-left">
<a href="" class=""><i class="iconfont iconchongzhi"></i>充值</a>
</div>
</div>
pubic.css
/*头部信息*/
.head-info {
margin-top: 13px;
}
.head-info .info{
padding-left: 18px;
letter-spacing: 1px;
margin-top: 12px;
font-size: 13px;
}
.head-info .info a:hover{
color: #cb4829;
}
头部导航
<div class="head-nav clearfix">
<!-- 大导航-->
<ul class="nav-l float-left">
<li class="on">
<a href="index.html">首页</a>
</li>
<li class="">
<a href="library.html">书库</a>
</li>
<li class="">
<a href="ranking.html">排行</a>
</li>
<li class="">
<a href="">完本</a>
</li>
<li class="">
<a href="">免费</a>
</li>
</ul>
<ul class="nav-r float-right">
<li class="">
<a href="">联系我们</a>
</li>
<li class="">
<a href="">未来工作室</a>
</li>
</ul>
</div>
pubic.css
/*导航栏 左右*/
.head-nav{
width: 100%;
border-bottom: 2px solid #ededed;
}
.head-nav .nav-l li{
margin-right: 70px;
color: #333;
height: 24px;
font-weight: 600;
font-size: 16px;
float: left;
}
.head-nav .nav-r li{
margin-left: 70px;
height: 24px;
color: #333;
font-weight: 600;
font-size: 15px;
float: right;
}
.head-nav .nav-l li:hover,.head-nav .nav-r li:hover{
border-bottom: 2px solid #cb4829;
color: #cb4829;
}
.head-nav .nav-l li.on,.head-nav .nav-r li.on{
border-bottom: 2px solid #cb4829;
color: #cb4829;
}
.head-nav .nav-l li a,.head-nav .nav-r li a{
color: initial;
letter-spacing: 1px;
}
.head-nav .nav-l li a:hover,.head-nav .nav-r li a:hover{
color: #cb4829;
}
.fs-12{
font-size: 12px;
}
首页主体开发
轮播图
<div class="body">
<!-- 轮播块 最新资讯-->
<div class="body-carousel clearfix">
<div class="carousel float-left">
</div>
</div>
</div>
index.css
/*主页轮播图 和旁边最新资讯*/
.body .body-carousel{
width: 100%;
margin-top: 20px;
}
.body-carousel .carousel{
width: 870px;
height: 350px;
border: 1px solid #cb4829;
box-sizing: border-box;
}
轮播图旁边最新资讯
<div class="news float-right">
<div class="news-tit">
<h2>最新资讯</h2>
</div>
<ul class="news-list">
<li>
<a href="">更新都市绝品玄医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">绝品玄医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">玄医：绝品玄医：绝品玄医：绝品玄医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">承，咸鱼翻身</a>
</li>
<li>
<a href="">更医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">更新都市绝品玄医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">更新都玄医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">都市绝品玄医：仙帝传承，咸鱼翻身</a>
</li>
<li>
<a href="">更新玄医：仙帝传承，咸鱼翻身</a>
</li>
</ul>
</div>
index.css
/*轮播图旁最新资讯*/
.body-carousel .news{
width: 300px;
}
.body-carousel .news .news-tit{
height: 37px;
line-height: 37px;
border-bottom: 1px solid #E0E0E0;
margin-bottom: 20px;
}
.body-carousel .news .news-tit h2{
line-height: 30px;
border-left: 4px solid #cb4829;
text-indent: .5em;
margin-top: 0px;
font-size: 23px;
font-weight: 400;
}
.body-carousel .news .news-list{
width: 100%;
}
.body-carousel .news .news-list li{
border-bottom: 1px dotted #ddd;
padding: 7px 0 7px 10px;
line-height: 18px;
color: #999;
text-indent: 5px;
background: url(../images/dian.gif) no-repeat left;
}
.body-carousel .news .news-list li a{
font-size: 13px;
color: #666;
display: block;
overflow: hidden !important;
white-space: nowrap;
text-overflow: ellipsis;
}
.body-carousel .news .news-list li a:hover{
color: #cb4829;
}
推荐书籍模块
推荐书籍左侧
<div class="ranking float-left">
<div class="ranking-tit">
<span class="tit">新书榜</span>
<a class="float-right more" href="">更多></a>
</div>
<ul class="ranking-list">
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
</ul>
</div>
/*推荐书籍*/
.body-recommend{
width: 100%;
margin-top: 30px;
}
/*推荐书籍左侧 and 右侧 同样的模块*/
.body-recommend .ranking{
width: 235px;
}
.ranking .ranking-tit{
line-height: 40px;
height: 40px;
border-bottom: 1px solid #E0E0E0;
margin-bottom: 12px;
}
.ranking .ranking-tit .tit{
line-height: 30px;
height: 30px;
font-size: 23px;
font-weight: 400;
border-left:4px solid #cb4829 ;
padding-left:30px ;
}
.ranking .ranking-list{
width: 100%;
}
.ranking-list .ranking-book{
border-bottom: 1px dotted #E0E0E0;
line-height: 38px;
height: 38px;
}
.ranking-list .ranking-book a:hover{
color: #cb4829;
}
.ranking-list .ranking-Type{
float: left;
color: #999;
font-size: 12px;
}
.ranking-list .ranking-Name{
color: #333;
font-size: 12px;
margin-left: 10px;
}
.ranking-list .ranking-Click{
color: #999;
float: right;
font-size: 12px;
}
推荐书籍中间
<!-- 推荐书籍中间-->
<div class="recommend float-left">
<div class="recommend-tit">
<span class="tit">经典完本</span>
<a class="float-right more" href="">更多></a>
</div>
<div class="recommend-list clearfix">
<div class="recommend-book float-left clearfix" >
<a class="recommend-bookimg float-left" href="">
<img src="images/book1.jpg">
</a>
<div class="recommend-bookinfo float-left">
<a class="recommend-bookname" href="">
<span>无限统御</span>
</a>
<p class="recommend-bookintr">陈涛，非凡藏品股份有限公司的执行董事，穿越到了号称能获得任何力量的梦幻空间，开启他带领轮回者大军征战诸天万界的故事……</p>
<div class="recommend-booktype">
<span class="recommend-bookavater float-left">天产土豆</span>
<a class="booktype float-right" href="">
<span>科幻游戏</span>
</a>
</div>
</div>
</div>
<div class="recommend-book float-left clearfix" >
<a class="recommend-bookimg float-left" href="">
<img src="images/book1.jpg">
</a>
<div class="recommend-bookinfo float-left">
<a class="recommend-bookname" href="">
<span>无限统御</span>
</a>
<p class="recommend-bookintr">陈涛，非凡藏品股份有限公司的执行董事，穿越到了号称能获得任何力量的梦幻空间，开启他带领轮回者大军征战诸天万界的故事……</p>
<div class="recommend-booktype">
<span class="recommend-bookavater float-left">天产土豆</span>
<a class="booktype float-right" href="">
<span>科幻游戏</span>
</a>
</div>
</div>
</div>
<div class="recommend-book float-left clearfix" >
<a class="recommend-bookimg float-left" href="">
<img src="images/book1.jpg">
</a>
<div class="recommend-bookinfo float-left">
<a class="recommend-bookname" href="">
<span>无限统御</span>
</a>
<p class="recommend-bookintr">陈涛，非凡藏品股份有限公司的执行董事，穿越到了号称能获得任何力量的梦幻空间，开启他带领轮回者大军征战诸天万界的故事……</p>
<div class="recommend-booktype">
<span class="recommend-bookavater float-left">天产土豆</span>
<a class="booktype float-right" href="">
<span>科幻游戏</span>
</a>
</div>
</div>
</div>
<div class="recommend-book float-left clearfix" >
<a class="recommend-bookimg float-left" href="">
<img src="images/book1.jpg">
</a>
<div class="recommend-bookinfo float-left">
<a class="recommend-bookname" href="">
<span>无限统御</span>
</a>
<p class="recommend-bookintr">陈涛，非凡藏品股份有限公司的执行董事，穿越到了号称能获得任何力量的梦幻空间，开启他带领轮回者大军征战诸天万界的故事……</p>
<div class="recommend-booktype">
<span class="recommend-bookavater float-left">天产土豆</span>
<a class="booktype float-right" href="">
<span>科幻游戏</span>
</a>
</div>
</div>
</div>
<div class="recommend-book float-left clearfix" >
<a class="recommend-bookimg float-left" href="">
<img src="images/book1.jpg">
</a>
<div class="recommend-bookinfo float-left">
<a class="recommend-bookname" href="">
<span>无限统御</span>
</a>
<p class="recommend-bookintr">陈涛，非凡藏品股份有限公司的执行董事，穿越到了号称能获得任何力量的梦幻空间，开启他带领轮回者大军征战诸天万界的故事……</p>
<div class="recommend-booktype">
<span class="recommend-bookavater float-left">天产土豆</span>
<a class="booktype float-right" href="">
<span>科幻游戏</span>
</a>
</div>
</div>
</div>
<div class="recommend-book float-left clearfix" >
<a class="recommend-bookimg float-left" href="">
<img src="images/book1.jpg">
</a>
<div class="recommend-bookinfo float-left">
<a class="recommend-bookname" href="">
<span>无限统御</span>
</a>
<p class="recommend-bookintr">陈涛，非凡藏品股份有限公司的执行董事，穿越到了号称能获得任何力量的梦幻空间，开启他带领轮回者大军征战诸天万界的故事……</p>
<div class="recommend-booktype">
<span class="recommend-bookavater float-left">天产土豆</span>
<a class="booktype float-right" href="">
<span>科幻游戏</span>
</a>
</div>
</div>
</div>
</div>
</div>
/*推荐书籍中的中间部分 暂定是经典完本*/
.body-recommend .recommend{
width: 690px;
margin: 0px 20px;
}
.recommend .recommend-tit{
line-height: 40px;
height: 40px;
border-bottom: 1px solid #E0E0E0;
margin-bottom: 12px;
}
.recommend .recommend-tit .tit{
line-height: 30px;
height: 30px;
font-size: 23px;
font-weight: 400;
border-left:4px solid #cb4829 ;
padding-left:30px ;
}
.recommend .recommend-list{
margin: 20px 0 10px;
}
.recommend-list .recommend-book{
margin: 0px 0px 10px;
}
.recommend-list .recommend-book:nth-child(2n-1){
margin: 0px 20px 20px 0px;
}
.recommend-list .recommend-bookimg{
display: block;
width: 95px;
height: 126px;
border-radius: 4px;
margin-right: 15px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
overflow: hidden;
}
.recommend-bookimg img{
width: 95px;
height: 126px;
border-radius: 4px;
}
.recommend-bookinfo{
width: 225px;
height: 126px;
position: relative;
}
.recommend-bookinfo .recommend-bookname{
display: block;
height: 21px;
font-size: 16px;
color: #333;
margin-bottom: 7px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recommend-bookinfo .recommend-bookintr{
line-height: 24px;
color: #666;
height: 72px;
overflow: hidden;
margin-bottom: 5px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 13px;
}
.recommend-bookinfo .recommend-booktype{
width: 100%;
}
.recommend-booktype .recommend-bookavater{
font-size: 12px;
color: #8a8989;
}
.recommend-booktype .booktype{
display: block;
color: #8a8989;
border: 1px solid #8a8989;
padding:1px 3px;
font-size: 12px;
}
.booktype:hover{
color: #cb4829;
border: 1px solid #cb4829;
}
.recommend-list a:hover{
color: #cb4829;
}
推荐书籍右侧
<!-- 推荐书籍右侧-->
<div class="ranking float-left">
<div class="ranking-tit">
<span class="tit">本站受欢迎榜</span>
<a class="float-right more" href="">更多></a>
</div>
<ul class="ranking-list">
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
<li class="ranking-book">
<a href="" class="ranking-Type">[都市]</a>
<a href="" class="ranking-Name">斗罗大陆</a>
<span class="ranking-Click">1244</span>
</li>
</ul>
</div>
共用推荐书籍左侧css
最新小说
<!-- 最新-->
<div class="body-news">
<div class="news-tit">
<span class="free active">最新免费小说更新</span> |
<span class="vip">最新VIP小说更新</span>
<a class="more float-right" href="">更多></a>
</div>
<div class="allnews">
<div class="news-head clearfix">
<span class="type">类别</span>
<span class="bookname">书名</span>
<span class="chapter">章节</span>
<span class="author">作者</span>
<span class="count">字数</span>
<span class="time">更新时间</span>
</div>
<ul class="news-table clearfix">
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
<li class="table-head">
<span class="type ">
<a href="">修真</a>
</span>
<span class="bookname">
<a href="" class="bookclick">诛仙3</a>
</span>
<span class="chapter" >
<a href="" >正文 第二十五章 十三香？正文 第二十五章 十三</a>
</span>
<span class="author">易碎的脑子</span>
<span class="count">8.5万</span>
<span class="time bookclick">11-20 11:20 </span>
</li>
</ul>
</div>
</div>
/*最新小说更新 以及 vip书籍更新*/
.body-news{
width: 100%;
margin-top: 30px;
}
.news-tit{
line-height: 40px;
height: 40px;
border-bottom: 1px solid #E0E0E0;
font-size: 19px;
margin-bottom: 12px;
color: #999;
}
.news-tit span.active{
display: inline-block;
height: 39px;
color: #cb4829;
font-weight: 600;
border-bottom: 2px solid #cb4829;
}
.news-tit .free,.news-tit .vip{
cursor: pointer;
}
.allnews .news-head{
border-bottom: 1px dotted #ccc;
letter-spacing: .86px;
line-height: 40px;
overflow: hidden;
height: 40px;
}
.table-head{
border-bottom: 1px dotted #ccc;
}
.table-head:after{
display: block;
content: '';
clear: both;
}
.news-head span{
color: #333;
float: left;
font-size: 13px;
}
.allnews .type{
width: 60px;
padding-right: 15px;
}
.allnews .bookname{
width: 250px;
padding-right: 15px;
}
.allnews .chapter{
width: 450px;
padding-right: 15px;
}
.allnews .author{
width: 150px;
padding-right: 15px;
}
.allnews .count{
width: 85px;
padding-right: 15px;
}
.allnews .time{
float: right;
text-align: right;
width: 110px;
padding-right: 15px;
}
.table-head span{
color: #999;
float: left;
font-size: 13px;
line-height: 35px;
}
.table-head a:hover{
color: #cb4829;
}
.table-head .bookclick{
color: #333333;
}
.type a{
color: #999999;
}
.chapter a{
width: 450px;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
