前端技术——4——CSS练习
Posted kaoa000
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端技术——4——CSS练习相关的知识，希望对你有一定的参考价值。
仿抽屉新热榜界面：
写一个类似的页面，练习CSS的使用。
整个页面分为两大部分，一是蓝色的页头，然后是页体
头部，即蓝色一行的设置，是页面的头部：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
margin: 0;
padding: 0;
/*清空默认设置，让元素没有外边距和填充*/
a
text-decoration: none; /*将a标签的下划线样式全部去掉*/
body
font-size: 12px;
.head-box
background-color: #2459a2;
height: 44px;
width: 100%;
position: fixed; /*设置盒子为固定位置*/
top: 0;
left: 0;
.head-content
margin: 0 auto;
width: 1016px;
height: 44px;
background-color: #2459a2;
line-height: 44px; /*这一步为了使后面的a标签内容，即菜单能够垂直居中*/
position: relative; /*为了导航条——注册、登录的position定位，这个是参考点*/
.logo
background: url("images/logo.png") no-repeat 0 0;
height: 23px;
width: 121px;
float: left;
margin-top: 11px;
/*display: inline-block;*/
/*显示logo图标，这里使用背景的方式，不使用插入img标签*/
/*a标签是内联标签，float后就类似inline-block标签，可设置宽高等属性*/
/*a标签是一个空标签，空标签其背景是无法显示的，即无内容无法撑起，所以需要设置宽高*/
/*如果a标签有内容，背景会随内容的长度显示部分或全部*/
/*如果不使用float，又无内容，则无法显示背景的，这时可以使用display：inline-block*/
.action-menu
float: left;
margin-left: 20px ;/*让菜单与logo之间有一段距离*/
.action-menu a.tb
color: #c0cddf;
margin-left: -8px;
/*两个a标签之间有换行的，默认会多出一个空隙，设置margin-left为负数，就是为了消除这个空隙，使效果看起来是紧挨着*/
padding: 0 13px 0 13px; /*使各个a标签分离开*/
display: inline-block;
/*不设置inline-block，高度撑不起来，只有内容的高度*/
.action-menu a.tb:hover
color: #ffffff;
background-color: rosybrown;
.action-menu a.active,.action-menu a.active:hover
color: gold;
background-color: blue;
/*单独设置全部这个菜单项，并且使菜单项的样式和鼠标放上去的样式一样*/
.key-search
float: right;
margin-top: 5px;
.key-search .search-txt,.key-search a.i
float: left;
.key-search .search-txt
width: 91px;
height: 25px;
padding: 2px 2px 2px 5px;
color: red;
.key-search .ico
background: url("images/icon.png") no-repeat 3px -195px;
height: 13px;
width: 13px;
display: inline-block;
margin-left: 4px;
.key-search a.i
height: 29px;
width: 30px;
background-color: #f4f4f4;
display: inline-block;
border: 1px yellow solid;
border-left: none;
margin-top: 1px;
line-height: 29px;
.action-nav
position: absolute;
right: 132px;
/*这里设置position定位，其参考点是.head-content*/
.action-nav a
color: #fff;
padding: 0 20px;
display: inline-block;
.action-nav a:hover
background-color: #c0cddf;
</style>
</head>
<body>
<div class="head-box">
<div class="head-content">
<a href="#" class="logo"></a>
<div 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">挨踢1024</a>
<a href="#" class="tb">你问我答</a>
</div>
<div class="key-search">
<form action="/" method="post">
<input type="text" class="search-txt" 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>
</body>
</html>结果页面如下：
对页体中左边新闻栏进行设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
margin: 0;
padding: 0;
/*清空默认设置，让元素没有外边距和填充*/
a
text-decoration: none; /*将a标签的下划线样式全部去掉*/
body
font-size: 12px;
.head-box
background-color: #2459a2;
height: 44px;
width: 100%;
position: fixed; /*设置盒子为固定位置*/
top: 0;
left: 0;
.head-content
margin: 0 auto;
width: 1016px;
height: 44px;
background-color: #2459a2;
line-height: 44px; /*这一步为了使后面的a标签内容，即菜单能够垂直居中*/
position: relative; /*为了导航条——注册、登录的position定位，这个是参考点*/
.logo
background: url("images/logo.png") no-repeat 0 0;
height: 23px;
width: 121px;
float: left;
margin-top: 11px;
/*display: inline-block;*/
/*显示logo图标，这里使用背景的方式，不使用插入img标签*/
/*a标签是内联标签，float后就类似inline-block标签，可设置宽高等属性*/
/*a标签是一个空标签，空标签其背景是无法显示的，即无内容无法撑起，所以需要设置宽高*/
/*如果a标签有内容，背景会随内容的长度显示部分或全部*/
/*如果不使用float，又无内容，则无法显示背景的，这时可以使用display：inline-block*/
.action-menu
float: left;
margin-left: 20px ;/*让菜单与logo之间有一段距离*/
.action-menu a.tb
color: #c0cddf;
margin-left: -8px;
/*两个a标签之间有换行的，默认会多出一个空隙，设置margin-left为负数，就是为了消除这个空隙，使效果看起来是紧挨着*/
padding: 0 13px 0 13px; /*使各个a标签分离开*/
display: inline-block;
/*不设置inline-block，高度撑不起来，只有内容的高度*/
.action-menu a.tb:hover
color: #ffffff;
background-color: rosybrown;
.action-menu a.active,.action-menu a.active:hover
color: gold;
background-color: blue;
/*单独设置全部这个菜单项，并且使菜单项的样式和鼠标放上去的样式一样*/
.key-search
float: right;
margin-top: 5px;
.key-search .search-txt,.key-search a.i
float: left;
.key-search .search-txt
width: 91px;
height: 25px;
padding: 2px 2px 2px 5px;
color: red;
.key-search .ico
background: url("images/icon.png") no-repeat 3px -195px;
height: 13px;
width: 13px;
display: inline-block;
margin-left: 4px;
.key-search a.i
height: 29px;
width: 30px;
background-color: #f4f4f4;
display: inline-block;
border: 1px yellow solid;
border-left: none;
margin-top: 1px;
line-height: 29px;
.action-nav
position: absolute;
right: 132px;
/*这里设置position定位，其参考点是.head-content*/
.action-nav a
color: #fff;
padding: 0 20px;
display: inline-block;
.action-nav a:hover
background-color: #c0cddf;
/*-----------以上是头部的CSS------------*/
.main-content-box
background-color: #ededed;
width: 100%;
padding-top: 44px;
/*因为头部的大盒子.head-box设置为position：fixed，脱离了文档流，这个盒子会顶上去，会有44px高度被遮盖*/
/*上面的大盒子中又分为两部分，main-content和footer-box*/
.main-content
margin: 0 auto;
background-color: #fff;
width: 960px;
height: auto; /*高度为自适应，根据内容自动填充扩展*/
min-height: 700px; /*设置最初高度，内容小于这个值，就显示这个值大小*/
padding: 6px 28px 60px 28px;
/*上面的大盒子又分为左右两个小盒子，左边是内容区，右边是对话区*/
.content-L
float: left;
width: 630px;
.top-area
border-bottom: 1px solid #c0cddf ;
overflow: hidden;
/*这个盒子中有三个小盒子.child-nav,.sort-nav.publish-btn，都float后，这个盒子中就没有内容了，无法撑起*/
/*显示的盒子的底边框就会跑到上面去，设置overflow，就撑起来，灰色线显示在正确位置*/
.child-nav,.sort-nav
float: left;
padding-bottom: 10px;
.publish-btn
float: right;
padding-bottom: 10px;
.child-nav a
display: inline-block;
width: 60px;
height: 26px;
line-height: 26px;
text-align: center;
color: #369;
font-weight: 700;
margin-top: 5px;
.child-nav .active
background: url("images/tip.png") no-repeat 0 -299px;
color: black;
.sort-nav
margin-left: 144px;
margin-top: 10px;
.sort-nav .active
color: #b4b4b4;
.sort-nav a
margin-left: 10px;
color: darkgreen;
.publish-btn
display: inline-block;
background-color: #84a42b;
width: 134px;
height: 26px;
color:#ffffff;
line-height: 32px;
text-align: center;
/*-----------------上边是top_area-----------*/
.content-list .item
border-bottom: 1px solid #c0cddf;
margin-top: 10px;
.item .news-pic
float: right;
margin-top: 3px;
margin-left: 12px;
.part2
padding-top: 6px;
color: #b4b4b4;
margin-bottom: 10px;
.hand-icon
background: url("images/icon_18_118.png") no-repeat 0 0;
width: 18px;
height: 18px;
display: inline-block;
vertical-align: -4px;
/*垂直居中，对图片来说的，让小图标与文本按要求的位置显示，原来没对齐*/
.icon-recommend
background-position: 0 -160px;
.icon-discuss
background-position: 0 -100px;
.icon-collect
background-position: 0 -140px;
.user-a span
vertical-align: -4px;
.part2 a
margin-left: 10px;
.part1
line-height: 20px;
.part1 .content-source,.content-kind
color:#b4b4b4;
.part1 .content-kind
text-decoration: underline;
.part1 .show-content
color: #369;
font-size: 14px;
font-weight: 700;
.part2 b,.time-into i
color: #b4b4b4;
.share-icon a
background: url("images/share_icon.png") no-repeat 0 0;
height: 14px;
width: 17px;
display: inline-block;
vertical-align: -4px;
opacity: 0.2; /*让小图标一开始显示比较模糊*/
.share-icon a:hover
opacity: 1; /*鼠标悬停在小图标，则显示明亮*/
.share-site-to .share-icon a.icon-sina
background-position: 0 -90px;
.share-site-to .share-icon a.icon-douban
background-position: 0 -105px;
.share-site-to .share-icon a.icon-qqzone
background-position: 0 -120px;
.share-site-to .share-icon a.icon-tenxun
background-position: 0 -136px;
.share-site-to .share-icon a.icon-renren
background-position: 0 -151px;
.share-site-to
float: right;
</style>
</head>
<body>
<div class="head-box">
<div class="head-content">
<a href="#" class="logo"></a>
<div 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">挨踢1024</a>
<a href="#" class="tb">你问我答</a>
</div>
<div class="key-search">
<form action="/" method="post">
<input type="text" class="search-txt" 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>
<div class="main-content-box">
<div class="main-content">
<div class="content-L">
<div class="top-area">
<div class="child-nav">
<a href="#" class="hotbtn active" >最热</a>
<a href="#" class="newbtn" >最新</a>
<a href="#" class="personbtn" >人类发布</a>
</div>
<div class="sort-nav">
<a href="#" class="sortbtn active" >即时排序</a>
<a href="#" class="newbtn" >24小时</a>
<a href="#" class="newbtn" >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="images/news.jpg" alt="抽屉新热榜">
</div>
<div class="news-content">
<div class="part1">
<a href="#" class="show-content" target="_blank">
@大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
</a>
<span class="content-source">-ww4.sinaimg.cn</span>
<a href="#" class="n2">
<span class="content-kind">42区</span>
</a>
</div>
<div class="part2">
<a href="#" class="recommend" title="推荐">
<span class="hand-icon icon-recommend"></span>
<b>4</b>
</a>
<a href="javascript:;" class="discuss">
<span class="hand-icon icon-discuss"></span>
<b>5</b>
</a>
<a href="javascript:;" class="collect" title="加入私藏">
<span class="hand-icon icon-collect"></span>
<b>私藏</b>
</a>
<a href="#" class="user-a">
<span>
<img src="images/13.png">
</span>
<b>乱太郎</b>
</a>
<span class="left time-into">
<a class="time-a" href="#" target="_blank">
<b>4分钟前</b>
</a>
<i>入热榜</i>
</span>
<!-- 分享各微博的按钮 -->
<span class="share-site-to">
<i>分享到</i>
<span class="share-icon">
<a class="icon-sina" title="分享到新浪微博" href="#" ></a>
<a class="icon-douban" title="分享到豆瓣" href="#" ></a>
<a class="icon-qqzone" title="分享到QQ空间" href="#" ></a>
<a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a>
<a class="icon-renren" title="分享到人人网" href="#" ></a>
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="content-R">
</div>
</div>
</div>
</body>
</html>最后的结果：
对item项进行复制，就可以实现新闻的多条显示，格式都如同第一条样式。
然后设置分页及footer的设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*
margin: 0;
padding: 0;
/*清空默认设置，让元素没有外边距和填充*/
a
text-decoration: none; /*将a标签的下划线样式全部去掉*/
body
font-size: 12px;
.head-box
background-color: #2459a2;
height: 44px;
width: 100%;
position: fixed; /*设置盒子为固定位置*/
top: 0;
left: 0;
.head-content
margin: 0 auto;
width: 1016px;
height: 44px;
background-color: #2459a2;
line-height: 44px; /*这一步为了使后面的a标签内容，即菜单能够垂直居中*/
position: relative; /*为了导航条——注册、登录的position定位，这个是参考点*/
.logo
background: url("images/logo.png") no-repeat 0 0;
height: 23px;
width: 121px;
float: left;
margin-top: 11px;
/*display: inline-block;*/
/*显示logo图标，这里使用背景的方式，不使用插入img标签*/
/*a标签是内联标签，float后就类似inline-block标签，可设置宽高等属性*/
/*a标签是一个空标签，空标签其背景是无法显示的，即无内容无法撑起，所以需要设置宽高*/
/*如果a标签有内容，背景会随内容的长度显示部分或全部*/
/*如果不使用float，又无内容，则无法显示背景的，这时可以使用display：inline-block*/
.action-menu
float: left;
margin-left: 20px ;/*让菜单与logo之间有一段距离*/
.action-menu a.tb
color: #c0cddf;
margin-left: -8px;
/*两个a标签之间有换行的，默认会多出一个空隙，设置margin-left为负数，就是为了消除这个空隙，使效果看起来是紧挨着*/
padding: 0 13px 0 13px; /*使各个a标签分离开*/
display: inline-block;
/*不设置inline-block，高度撑不起来，只有内容的高度*/
.action-menu a.tb:hover
color: #ffffff;
background-color: rosybrown;
.action-menu a.active,.action-menu a.active:hover
color: gold;
background-color: blue;
/*单独设置全部这个菜单项，并且使菜单项的样式和鼠标放上去的样式一样*/
.key-search
float: right;
margin-top: 5px;
.key-search .search-txt,.key-search a.i
float: left;
.key-search .search-txt
width: 91px;
height: 25px;
padding: 2px 2px 2px 5px;
color: red;
.key-search .ico
background: url("images/icon.png") no-repeat 3px -195px;
height: 13px;
width: 13px;
display: inline-block;
margin-left: 4px;
.key-search a.i
height: 29px;
width: 30px;
background-color: #f4f4f4;
display: inline-block;
border: 1px yellow solid;
border-left: none;
margin-top: 1px;
line-height: 29px;
.action-nav
position: absolute;
right: 132px;
/*这里设置position定位，其参考点是.head-content*/
.action-nav a
color: #fff;
padding: 0 20px;
display: inline-block;
.action-nav a:hover
background-color: #c0cddf;
/*-----------以上是头部的CSS------------*/
.main-content-box
background-color: #ededed;
width: 100%;
padding-top: 44px;
/*因为头部的大盒子.head-box设置为position：fixed，脱离了文档流，这个盒子会顶上去，会有44px高度被遮盖*/
/*上面的大盒子中又分为两部分，main-content和footer-box*/
.main-content
margin: 0 auto;
background-color: #fff;
overflow: hidden;
/*超出部分默认是溢出，hidden是隐藏，不显示，还有一个auto，自动加滚动条，还可以是scroll,也是加滚动条*/
width: 960px;
height: auto; /*高度为自适应，根据内容自动填充扩展*/
min-height: 700px; /*设置最初高度，内容小于这个值，就显示这个值大小*/
padding: 6px 28px 60px 28px;
/*上面的大盒子又分为左右两个小盒子，左边是内容区，右边是对话区*/
.content-L
float: left;
width: 630px;
.content-R
float: right;
width: 329px;
background-color: #84a42b;
border-left: 1px solid #b4b4b4;
.top-area
border-bottom: 1px solid #c0cddf ;
overflow: hidden;
/*这个盒子中有三个小盒子.child-nav,.sort-nav.publish-btn，都float后，这个盒子中就没有内容了，无法撑起*/
/*显示的盒子的底边框就会跑到上面去，设置overflow，就撑起来，灰色线显示在正确位置*/
.child-nav,.sort-nav
float: left;
padding-bottom: 10px;
.publish-btn
float: right;
padding-bottom: 10px;
.child-nav a
display: inline-block;
width: 60px;
height: 26px;
line-height: 26px;
text-align: center;
color: #369;
font-weight: 700;
margin-top: 5px;
.child-nav .active
background: url("images/tip.png") no-repeat 0 -299px;
color: black;
.sort-nav
margin-left: 144px;
margin-top: 10px;
.sort-nav .active
color: #b4b4b4;
.sort-nav a
margin-left: 10px;
color: darkgreen;
.publish-btn
display: inline-block;
background-color: #84a42b;
width: 134px;
height: 26px;
color:#ffffff;
line-height: 32px;
text-align: center;
/*-----------------上边是top_area-----------*/
.content-list .item
border-bottom: 1px solid #c0cddf;
margin-top: 10px;
.item .news-pic
float: right;
margin-top: 3px;
margin-left: 12px;
.part2
padding-top: 6px;
color: #b4b4b4;
margin-bottom: 10px;
.hand-icon
background: url("images/icon_18_118.png") no-repeat 0 0;
width: 18px;
height: 18px;
display: inline-block;
vertical-align: -4px;
/*垂直居中，对图片来说的，让小图标与文本按要求的位置显示，原来没对齐*/
.icon-recommend
background-position: 0 -160px;
.icon-discuss
background-position: 0 -100px;
.icon-collect
background-position: 0 -140px;
.user-a span
vertical-align: -4px;
.part2 a
margin-left: 10px;
.part1
line-height: 20px;
.part1 .content-source,.content-kind
color:#b4b4b4;
.part1 .content-kind
text-decoration: underline;
.part1 .show-content
color: #369;
font-size: 14px;
font-weight: 700;
.part2 b,.time-into i
color: #b4b4b4;
.share-icon a
background: url("images/share_icon.png") no-repeat 0 0;
height: 14px;
width: 17px;
display: inline-block;
vertical-align: -4px;
opacity: 0.2; /*让小图标一开始显示比较模糊*/
.share-icon a:hover
opacity: 1; /*鼠标悬停在小图标，则显示明亮*/
.share-site-to .share-icon a.icon-sina
background-position: 0 -90px;
.share-site-to .share-icon a.icon-douban
background-position: 0 -105px;
.share-site-to .share-icon a.icon-qqzone
background-position: 0 -120px;
.share-site-to .share-icon a.icon-tenxun
background-position: 0 -136px;
.share-site-to .share-icon a.icon-renren
background-position: 0 -151px;
.share-site-to
float: right;
/* --------------上边是新闻内容区的CSS设置 -------------- */
.page-area ul li
display: inline-block; /*使li在一行*/
float: left;
/*color: red;*/
height: 34px;
line-height: 34px; /*文本居中*/
text-align: center;
width: 34px;
border: 1px solid #e1e1e1;
margin-top: 3px;
border-radius: 20%;/*圆角设置*/
margin-left: 3px; /*各个页号之间有个空隙*/
ul li a
color: red;
.page-area ul
margin-left: 10px; /*分页栏整体向右一点*/
.page-area ul li.next
width: 50px;
/*下一页三个字在li宽度为34px是不足以一行显示，这里需要单独设置，覆盖上面的设置*/
.page-area ul li:hover
color: white;
/*这里的字体颜色设置没有起作用，这里设置的是li的字体，对li包裹的a标签的字体颜色不起作用*/
background-color: #336699;
/*-----------以上是分页显示的设置----------*/
.footer-box
background-color: #fff;
clear: both ;/*清除两端的浮动，使自己独占一行，不被覆盖*/
border-top:1px solid #b4b4b4;
position: relative; /*设置position定位，在原来的位置上向下10px*/
top:10px
.footer-box .foot-nav
padding-top: 15px;
text-align: center;
.footer-box .foot-nav2
text-align: center;
.foot-nav2 .foot_b
color: gray;
</style>
</head>
<body>
<div class="head-box">
<div class="head-content">
<a href="#" class="logo"></a>
<div 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">挨踢1024</a>
<a href="#" class="tb">你问我答</a>
</div>
<div class="key-search">
<form action="/" method="post">
<input type="text" class="search-txt" 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>
<div class="main-content-box">
<div class="main-content">
<div class="content-L">
<div class="top-area">
<div class="child-nav">
<a href="#" class="hotbtn active" >最热</a>
<a href="#" class="newbtn" >最新</a>
<a href="#" class="personbtn" >人类发布</a>
</div>
<div class="sort-nav">
<a href="#" class="sortbtn active" >即时排序</a>
<a href="#" class="newbtn" >24小时</a>
<a href="#" class="newbtn" >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="images/news.jpg" alt="抽屉新热榜">
</div>
<div class="news-content">
<div class="part1">
<a href="#" class="show-content" target="_blank">
@大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
</a>
<span class="content-source">-ww4.sinaimg.cn</span>
<a href="#" class="n2">
<span class="content-kind">42区</span>
</a>
</div>
<div class="part2">
<a href="#" class="recommend" title="推荐">
<span class="hand-icon icon-recommend"></span>
<b>4</b>
</a>
<a href="javascript:;" class="discuss">
<span class="hand-icon icon-discuss"></span>
<b>5</b>
</a>
<a href="javascript:;" class="collect" title="加入私藏">
<span class="hand-icon icon-collect"></span>
<b>私藏</b>
</a>
<a href="#" class="user-a">
<span>
<img src="images/13.png">
</span>
<b>乱太郎</b>
</a>
<span class="left time-into">
<a class="time-a" href="#" target="_blank">
<b>4分钟前</b>
</a>
<i>入热榜</i>
</span>
<!-- 分享各微博的按钮 -->
<span class="share-site-to">
<i>分享到</i>
<span class="share-icon">
<a class="icon-sina" title="分享到新浪微博" href="#" ></a>
<a class="icon-douban" title="分享到豆瓣" href="#" ></a>
<a class="icon-qqzone" title="分享到QQ空间" href="#" ></a>
<a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a>
<a class="icon-renren" title="分享到人人网" href="#" ></a>
</span>
</span>
</div>
</div>
</div>
<div class="item">
<div class="news-pic">
<img src="images/news.jpg" alt="抽屉新热榜">
</div>
<div class="news-content">
<div class="part1">
<a href="#" class="show-content" target="_blank">
@大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
</a>
<span class="content-source">-ww4.sinaimg.cn</span>
<a href="#" class="n2">
<span class="content-kind">42区</span>
</a>
</div>
<div class="part2">
<a href="#" class="recommend" title="推荐">
<span class="hand-icon icon-recommend"></span>
<b>4</b>
</a>
<a href="javascript:;" class="discuss">
<span class="hand-icon icon-discuss"></span>
<b>5</b>
</a>
<a href="javascript:;" class="collect" title="加入私藏">
<span class="hand-icon icon-collect"></span>
<b>私藏</b>
</a>
<a href="#" class="user-a">
<span>
<img src="images/13.png">
</span>
<b>乱太郎</b>
</a>
<span class="left time-into">
<a class="time-a" href="#" target="_blank">
<b>4分钟前</b>
</a>
<i>入热榜</i>
</span>
<!-- 分享各微博的按钮 -->
<span class="share-site-to">
<i>分享到</i>
<span class="share-icon">
<a class="icon-sina" title="分享到新浪微博" href="#" ></a>
<a class="icon-douban" title="分享到豆瓣" href="#" ></a>
<a class="icon-qqzone" title="分享到QQ空间" href="#" ></a>
<a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a>
<a class="icon-renren" title="分享到人人网" href="#" ></a>
</span>
</span>
</div>
</div>
</div>
<div class="item">
<div class="news-pic">
<img src="images/news.jpg" alt="抽屉新热榜">
</div>
<div class="news-content">
<div class="part1">
<a href="#" class="show-content" target="_blank">
@大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
</a>
<span class="content-source">-ww4.sinaimg.cn</span>
<a href="#" class="n2">
<span class="content-kind">42区</span>
</a>
</div>
<div class="part2">
<a href="#" class="recommend" title="推荐">
<span class="hand-icon icon-recommend"></span>
<b>4</b>
</a>
<a href="javascript:;" class="discuss">
<span class="hand-icon icon-discuss"></span>
<b>5</b>
</a>
<a href="javascript:;" class="collect" title="加入私藏">
<span class="hand-icon icon-collect"></span>
<b>私藏</b>
</a>
<a href="#" class="user-a">
<span>
<img src="images/13.png">
</span>
<b>乱太郎</b>
</a>
<span class="left time-into">
<a class="time-a" href="#" target="_blank">
<b>4分钟前</b>
</a>
<i>入热榜</i>
</span>
<!-- 分享各微博的按钮 -->
<span class="share-site-to">
<i>分享到</i>
<span class="share-icon">
<a class="icon-sina" title="分享到新浪微博" href="#" ></a>
<a class="icon-douban" title="分享到豆瓣" href="#" ></a>
<a class="icon-qqzone" title="分享到QQ空间" href="#" ></a>
<a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a>
<a class="icon-renren" title="分享到人人网" href="#" ></a>
</span>
</span>
</div>
</div>
</div>
<div class="item">
<div class="news-pic">
<img src="images/news.jpg" alt="抽屉新热榜">
</div>
<div class="news-content">
<div class="part1">
<a href="#" class="show-content" target="_blank">
@大脸撑在小胸：刚在以色列大使馆经历史上最严的安检。过完常规扫描还有二
次安检，包里所有东西都掏出来，唇膏拧开，粉盒打开，润喉糖打开，钱包里所有卡和钱摸
一遍，纸巾摸一遍，包包链子每一个扣都仔细摸过。对方一直说还有东西但找不到，我都慌
了以为被人偷放了，最后终于从小袋角落摸出一颗不知何时掉的维生素。
</a>
<span class="content-source">-ww4.sinaimg.cn</span>
<a href="#" class="n2">
<span class="content-kind">42区</span>
</a>
</div>
<div class="part2">
<a href="#" class="recommend" title="推荐">
<span class="hand-icon icon-recommend"></span>
<b>4</b>
</a>
<a href="javascript:;" class="discuss">
<span class="hand-icon icon-discuss"></span>
<b>5</b>
</a>
<a href="javascript:;" class="collect" title="加入私藏">
<span class="hand-icon icon-collect"></span>
<b>私藏</b>
</a>
<a href="#" class="user-a">
<span>
<img src="images/13.png">
</span>
<b>乱太郎</b>
</a>
<span class="left time-into">
<a class="time-a" href="#" target="_blank">
<b>4分钟前</b>
</a>
<i>入热榜</i>
</span>
<!-- 分享各微博的按钮 -->
<span class="share-site-to">
<i>分享到</i>
<span class="share-icon">
<a class="icon-sina" title="分享到新浪微博" href="#" ></a>
<a class="icon-douban" title="分享到豆瓣" href="#" ></a>
<a class="icon-qqzone" title="分享到QQ空间" href="#" ></a>
<a class="icon-tenxun" title="分享到腾讯微博" href="#" ></a>
<a class="icon-renren" title="分享到人人网" href="#" ></a>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="page-area">
<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 class="next"><a href="#" class="ct_page_edge">下一页</a></li>
</ul>
</div>
</div>
<div class="content-R">
</div>
<div class="footer-box">
<div class="foot-nav">
<a href="#" target="_blank">关于我们</a>
<span>|</span>
<a href="#" target="_blank">联系我们</a>
<span>|</span>
<a href="#" target="_blank">服务条款</a>
<span>|</span>
<a href="#" target="_blank">隐私政策</a>
<span>|</span>
<a href="#" target="_blank">抽屉新热榜工具</a>
<span>|</span>
<a href="#" target="_blank">下载客户端</a>
<span>|</span>
<a href="#" target="_blank">意见与反馈</a>
<span>|</span>
<a href="#" target="_blank">友情链接</a>
<span>|</span>
<a href="#" target="_blank">公告</a>
<a href="#" target="_blank" style="margin-left:0;vertical-align:-2px;">
<img src="images/ct_rss.gif" width="36" height="14">
</a>
</div>
<div class="foot-nav2">
<a target="_blank" href="#">
<img class="foot_e" src="images/footer1.gif" width="36" height="14">
</a>
<span class="foot_d">旗下站点</span>
<span class="foot_a">©2016chouti.com</span>
<a target="_blank" href="#" class="foot_b">京ICP备09053974号-3 京公网安备 110102004562</a>
<div style="margin-top:6px;">版权所有：北京格致璞科技有限公司</div>
</div>
</div>
</div>
</div>
</body>
</html>最终结果：
对于页码的设置，有一点问题，对li标签设置inline-block，其内的a标签在做hover时，字体颜色不会变，就是hover只作用到li层，做一个修改：
.page-area ul li
display: inline-block;
float: left;
.page-area ul li span
display: inline-block;
color: #b4b4b4;
height: 34px;
line-height: 34px;
text-align: center;
width: 34px;
/*border: 1px solid #e1e1e1;*/
border-radius: 20%;
margin: 10px;
.page-area ul li a
display: inline-block;
color: #84a42b;
height: 34px;
line-height: 34px;
text-align: center;
width: 34px;
border: 1px solid #e1e1e1;
border-radius: 20%;
margin: 3px;
margin-top: 10px;
ul li a.ct_page_edge
width: 50px;
.page-area ul li a:hover
color: #fff;
background-color: #336699;
以上是关于前端技术——4——CSS练习的主要内容，如果未能解决你的问题，请参考以下文章