【Web】CSS（No.18）Css经典案例（二）《畅销书排行榜》

效果图

在这里插入图片描述

HTML源码

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="UTF-8">
	<title>畅销书排行榜</title>
	<link rel="stylesheet" href="css/index.css">
  </head>
  <body>
	<div class="box">

	  <div class="bang">
	    <p>畅销书排行</p>
        <div class="picbang"></div>
	  </div>

	  <div class="one">
	    <div class="picone"></div>
	    <p>不抱怨的世界(畅...</p>
	  </div>

	  <div class="two">
	    <div class="pictwo"></div>
	    <p>遇见未知的自己..</p>
	  </div>

	  <div class="three">
	    <div class="picthree"></div>
	    <p>活法（季羡林、...</p>
	  </div>

	  <div class="four">
	    <div class="picfour"></div>
	    <p>高效能人士的七个习惯</p>
	  </div>

	  <div class="five">
	    <div class="picfive"></div>
	    <p>被迫强大（北外女生香奈儿...</p>
	  </div>

	  <div class="six">
	    <div class="picsix"></div>
	    <p>遇见心想事成的自己（《遇...</p>
	  </div>

	  <div class="seven">
	    <div class="picseven"></div>
	    <p>世界上最伟大的推销员（插...</p>
	  </div>

	  <div class="eight">
	    <div class="piceight"></div>
	    <p>我的成功可以复制（唐骏亲...</p>
	  </div>

	  <div class="nine">
	    <div class="picnine"></div>
	    <p>少有人走的路：心智成熟的...</p>
	  </div>

	  <div class="ten">
	    <div class="picten"></div>
	    <p>活出全新的自己——唤醒...</p>
	  </div>

	</div>
  </body>
</html>

Css源码

/*--------------------通配符选择器---------------------*/
*{
	margin:0;
	padding:0;
}
/*--------------------整体---------------------*/
.box{
    width:260px;
    margin:100px auto;
    background-color:#f9fad0;
}
/*--------------------标题---------------------*/
.bang{
	height:30px; 
	padding-top:7px;
	padding-left:15px;
	background-color:#4e8900;
}
/*--------------------标题文字---------------------*/
.bang p{
	font-size:17px;
	color:#ffffff;
	float:left;
}
/*--------------------正文---------------------*/
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten{
    width:100%;
	height:25px;
	margin:9px 0;
}
/*--------------------正文文字---------------------*/
.one p,.two p,.three p,.four p,.five p,.six p,.seven p,.eight p,.nine p,.ten p{
	font-size:14px;
	float:left;
}
/*--------------------标题图片---------------------*/
.picbang{
	background-image:url(../img/bang.gif);
	width:22px;
	height:24px;
	margin-left:20px;
	float:left;
}
/*--------------------正文图片一---------------------*/
.picone{
	background-image:url(../img/book_no01.gif);
	width:17px;
	height:20px;
	margin-left:5px;
	margin-right:5px;
	float:left;
}
/*--------------------正文图片二---------------------*/
.pictwo{
	background-image:url(../img/book_no02.gif);
	width:17px;
	height:20px;
	margin-left:5px;
	margin-right:5px;
	float:left;
}
/*--------------------正文图片三---------------------*/
.picthree{
    background-image: url(../img/book_no03.gif);
    width:17px;
	height:20px;
	margin-left:5px;
	margin-right:5px;
	float:left;
}
/*--------------------正文图片四---------------------*/
.picfour{
    background-image:url(../img/book_no04.gif);
    width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}
/*--------------------正文图片五---------------------*/
.picfive{
    background-image:url(../img/book_no05.gif);
    width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}
/*--------------------正文图片六---------------------*/
.picsix{
    background-image:url(../img/book_no06.gif);
    width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}
/*--------------------正文图片七---------------------*/
.picseven{
    background-image:url(../img/book_no07.gif);
    width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}
/*--------------------正文图片八---------------------*/
.piceight{
    background-image:url(../img/book_no08.gif);
   width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}
/*--------------------正文图片九---------------------*/
.picnine{
    background-image:url(../img/book_no09.gif);
    width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}
/*--------------------正文图片十---------------------*/
.picten{
	background-image:url(../img/book_no10.gif);
	width:12px;
	height:12px;
	margin-left:8px;
	margin-right:8px;
	margin-top:5px;
	float:left;
}

【Web】CSS（No.18）Css经典案例（二）《畅销书排行榜》

效果图

HTML源码

Css源码

猜你喜欢