HTML+CSS的练习之网上书城主页面的实现

最新推荐文章于 2025-03-05 14:15:11 发布

striner

最新推荐文章于 2025-03-05 14:15:11 发布

阅读量3.1w

点赞数 37

分类专栏： ## 前端 HTML CSS 文章标签： HTML css 前端

本文链接：https://blog.youkuaiyun.com/striner/article/details/78690490

版权

博主终于把CSS学完了,废话不说,先上代码~

<!DOCTYPE html>
<html>
<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 img{
		margin-bottom: -5px;
	}
	#top_right a{
		text-decoration: none;
		color:#06F;
	}
	#top_right a:hover{
		color:#909;
	}
	#menu{
		background-color: #1C3F09;
		border-top:5px solid #82B211;
		padding: 10px 0px;
		text-align: center;
	}
	#menu a{
		margin: 0 8px;
		color: #fff;
		text-decoration: none;
		font-weight: bold;
		font-size: 15px;
	}
	#menu a:hover{
		color: #999;
	}
	#menu .all{
		color: yellow
	}
	#search{
		background-color: #B6B684;
		padding:7px 0;
		text-align: right;
		
	}
	#search input[type='image']{
		/* margin-top: 5px; */
		margin-right: 250px;
		margin-bottom: -4px;
	}
	#search input[type='text']{
		height: 16px;
		border:1px solid #999;
	}
	
	/*-------------------------------------------------------*/
	
	#content{
		width:900px;
		margin:8px auto 15px;/*auto div居中*/
	}
	
	#content_top{
		text-align: right;
		font-size:13px;
	}
	#content_bottom{
		border:1px solid #999;
		background-color: #FCFDEF;
		padding:10px 15px;
	}
	#content_bottom h1{
		font-size: 15px;
		display: inline;
	}
	#content_bottom span{
		font-size: 13px;
	}
	#productlist_img img{
		width: 100%;
	}
	.book{
		float: left;
		width: 25%;
		text-align: center;
		padding:10px 0px;
	}
	.bookimg img{
		width: 130px;
		height: 196px;
	}
	#jumpPage{
		text-align: center;
		margin: 10px;
	}
	#jumpPage a{
		padding:2px 6px;
		border: 1px solid #9AAFE5;
		text-decoration: none;
		color:#9AAFE5;
	}
	#jumpPage a:hover{
		color:#2B66A5;
		border: 1px solid #2B66A5;
	}
	.current{
		background-color: blue;
	}
    
    /*-------------------------------------------------------*/
    
    #bottom{
        background-color: #EFEEDC;
        height:60px;
        padding:10px 0

最低0.47元/天解锁文章