用css/html制作简易bookstore网页

最新推荐文章于 2022-11-20 08:38:44 发布

INstamina

最新推荐文章于 2022-11-20 08:38:44 发布

阅读量2k

点赞数 5

本文链接：https://blog.csdn.net/ZF_9420/article/details/53293145

版权

1.这里采用的是css的内部方式来修饰html

2.首先可以在图纸上画出网页的样式，然后利用html的<div></div>标签模块化，即将网页看成由多个模块组成，然后逐个实现

3.参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>bookstore</title>
	<style type="text/css">
	   .clear{
	   	clear :both;
	   }
	   #top_left{
	   	width: 300px;
	   	float: left;
	   }
	   #top_right{
	   	width: 400px;
	   	float: right;
	   	margin-top: 15px;
	   	font-size: 13px;
	   }
	   #top_right a{
         text-decoration: none;
	   }
	   #top_right img{
	   	margin-bottom: -5px
	   }
	   #top_right a:hover{
	   	color: gray
	   }
	   #menu{
	   	background-color: #006400;
	   	text-align: center;
	   	padding: 9px 0px;
	   	font-size: 15px;
	   	border-top: 7px solid #32CD32

	   }
	   #menu a{
	   	font-weight: bold;
	   	/*text-align: center;*/
	   	text-decoration: none;
	   	margin: 0px 8px;
	   	color: #FFFFFF
	   }
	   #menu #all{
	   	color: yellow;
	   }
	   #menu a:hover{
	   	color: #D3D3D3
	   }

	   #search{
	   	text-align: right;
	   	background-color: #808080;
	   	padding-top: 5px;
	   	padding-right: 230px;
        padding-bottom:5px
	   }
	   #search img{
         margin-bottom: -5px;

	   }
	   #content{
	   	width: 900px;
	   	margin: 5px auto 10px;
	   	font-size: 10px
	   }
	   #cont_top{
	   	font-size: 10px;
	   	float: right;
	   	
	   }
	   #cont_top a{
	   	text-decoration:none;
	   }
	   #cont_bottom{
         border: 1px solid #5F9EA0;
         padding: 10px 15px;
         background-color: #B0C4DE
	   }
	   #cont_bottom h1{
	   	display: inline;
	   	font-size: 13px
	   }
	   #productlist img{
	   	width: 870px
	   }
	   #booklist{
	   	padding: 10px 30px
	   }
	   .book{
	   	width: 130px;
	   	height: 228px;
	   	margin: 5px 35px;
	   	float:left;
	   }
	   .bookimg img{
         width: 130px;
         height: 198px;
	   }
	   .bookintr{
	   	text-align: center;
	   }
	   #jumpPage{
	   	font-weight: bold;
	   	text-align: center;
	   	margin: 15px 0px;
	   	/*color: #C0C0C0*/
	   }
	   #jumpPage a{
	   	text-decoration: none;
        border: 1px solid #DC143C;
        padding: 3px 5px;
	   }
	   #jumpPage #current{
	   	background-color: black;
	   }
	   /*--------------------------------------------------*/
	   #bottom_left{
	   	width: 200px;
	   	float: left;
	   	margin-left: 190px;
	   }
       #bottom_right{
       	width: 400px;
       	float: right;
       	margin-right: 230px;
       }
	</style>
</head>
<body>
	<div id="page">
	    <div id="top">
	    	<div id="top_left">
	    	    <img src="bookimages/logo.png">
	        </div>
	        <div id="top_right">
	        	<img src="bookimages/cart.gif">
	    	    <a href="#">购物车</a>|
	    	    <a href="#">帮助中心</a>|
	    	    <a href="#">我的账户</a>|
	    	    <a href="#">新用户注册</a>|
	        </div>
	    </div>
	    <div class="clear"></div>
	    <div id="menu">
	    	<a href="#">文学</a>
	    	<a href="#">生活</a>
	    	<a href="#">计算机</a>
	    	<a href="#">外语</a>
	    	<a href="#">经管</a>
	    	<a href="#">励志</a>
	    	<a href="#">社科</a>
	    	<a href="#">学术</a>
	    	<a href="#">少儿</a>
	    	<a href="#">艺术</a>
	    	<a href="#">原版</a>
	    	<a href="#">科技</a>
	    	<a href="#">考试</a>
	    	<a href="#">生活百科</a>
	    	<a href="#" id="all">全部目录商品</a>
	    </div>
	    <div id="search">
	    	<span>Search</span>
	    	<input type="text"/>
	    	<img src="bookimages/serchbutton.gif">
	    </div>
	    <div class="clear"></div>
	    <div id="content">
	    	<div id="cont_top">
	    		<a href="#">首页 </a>>
                <a href="#">旅游 </a>>
                <span>图书列表</span>
	    	</div>
	    	<div class="clear"></div>
	    	<div id="cont_bottom">
	    		<h1>商品目录</h1>
	    		<hr/>
	    		<h1>计算机类</h1>
	    		<span>共100种商品</span>
	    		<hr/>
	    		<div id="productlist">
	    			<img src="bookimages/productlist.gif">
	    		</div>
	    		<div id="booklist">
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/101.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/102.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/103.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/104.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/105.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/106.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/107.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    			<div class="book">
	    				<div class="bookimg">
	    				   <img src="bookcover/108.jpg">
	    			    </div>
	    			    <div class="bookintr">
		    				<span>书名：xxx</span><br/>
		    				<span>价格：xxx</span>
		    			</div>
	    			</div>
	    		</div>
	    		<div class="clear"></div>
	    		<div id="jumpPage">
	    			<a href="#">上一页</a>
	    			<a href="#" id="current">1</a>
	    			<a href="#">2</a>
	    			<a href="#">3</a>
	    			<a href="#">4</a>
	    			<a href="#">5</a>
	    			<a href="#">6</a>
	    			<a href="#">7</a>
	    			<a href="#">下一页</a>
	    		</div>
	    	</div>
	    </div>
	    <div id="bottom">
	    	<div id="bottom_left">
	    		<img src="bookimages/logo.png">
	    	</div>
	    	<div id="bottom_right">
	    		<span>CONTACT US</span><br/><br/>
                <span>copyright 2008 © BookStore All Rights RESERVED</span>

	    	</div>
	    </div>
	    <div class="clear"></div>	
	</div>
</body>
</html>