您的位置：首页 > Web前端 > CSS

用css/html制作简易bookstore网页

2016-11-22 23:05 375 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航