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


需要素材点击图片联系我或私信、评论

效果图

【Web】CSS(No.18)Css经典案例(二)《畅销书排行榜》_第1张图片

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,Web,Css)