网上书店程序——html+css实现

最新推荐文章于 2024-06-06 13:38:54 发布
最新推荐文章于 2024-06-06 13:38:54 发布
阅读量1.9w 收藏 184
点赞数 20
分类专栏： css Html 文章标签： css div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Richard1997/article/details/79341069
版权
Html 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

这也是网上某教程的代码，主要布局用div+css, 觉得有必要记录下来。

实现效果：

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>BookStore</title>
	<style type="text/css">

	
	
	#top_left{ 
			width: 70%;
			float: left;
		}

		#top_right{
			margin-top: 15px;
			font-size: 13px;
			float: right;
		}
		#top_right img{
			margin-bottom:-3px;
		}

		#top_right a{
			text-decoration: none;
			color: #06f;
		}

		#top_right a:hover{
			text-decoration: none;
			color: #909;
		}
		.clear{
			clear:both;
		}
		#menu{
			background-color:#1C3F09;
			border-top:5px solid #82B211;
			padding: 10px 0px;
			text-align: center;
		}

		#menu a{
			margin: 0px,8px;
			color:#fff;
			text-decoration: none;
			font-weight: bold;
			font-size: 15px;
		}

		#menu a:hover{
			color: #999;
		}

		#menu  .all{
			color: yellow;
		}

		#search input[type="image"] {
			margin-right: 250px;
			margin-bottom: -6px;
		}

		#search input[type="text"] {
			height:  16px;
			border: 1px solid #999;
		}
		#search{
			background-color: #B6B684;
			padding: 7px 0px;
			text-align: right;
		}
		
		#content{
			width: 900px;
			margin: 5px auto 15px;
		}
		#content_top{
			font-size: 13px;
			text-align: right;
		}

		#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%;
		}

		.bookimg img{
			width: 120px;
			height: 196px;
		}

		.book{
		float: left;
		width: 25%;
		text-align: center;
		padding:10px 0px;
	}

		#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;
			padding: 10px 0px;
			height: 60px;
		}
		#bottom_left{
				width: 400px;
				float: left;
				margin-left: 200px;
		}

		#bottom_right{
				width: 500px;
				float: left;
				line-height: 28px;
		}


	</style>
	<script type="text/javascript">
		
	</script>
</head>
<body>
<div id="page">
	<div id="top">
		<div id="top_left">
			<img src="images\logo.png">
		</div>

		<div id="top_right">
			<img src="images\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="#" class="all">全部商品目录</a>
	 </div>

	<div id="search">
		<span>Search</span>
		<input type="text" />
		<input type="image" src="images/serchbutton.gif"/>
	</div>

<div id="content">
		<div id="content_top">
			<span>首页 > 旅游 > 图书列表</span>
		</div>
		   
		<div id="content_bottom">
			<h1>商品目录</h1>
			<hr/>
			<h1>计算机类</h1>
			<span>共100种商品</span>
			<hr/>

			 <div id="productlist">
				<div id="productlist_img">
					<img src="images/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="clear"></div>
					   <div id="jumpPage">
							<a href="#">上一页</a>
							<a class="current" href="#">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>
	 </div>

	<div id="bottom"> 
		<div id="bottom_left">
				<img src="images/logo.png">
		 </div>

		<div id="bottom_right">
			<span>CONTACT US</span> <br/>
			<span>copyright 2008 &copy; BookStore All Rights RESERVED</span>
			
		</div>
	</div>
	
</div>
</body>
</html>

图片资源见：

http://download.csdn.net/download/richard1997/10253776

守护砂之国泰裤辣
关注
  • 20
    点赞
  • 踩
  • 184
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML网上书店静态HTML网页作业作品 大学生三联书店网页设计制作成品 简单DIV CSS布局网站
qq_38512792的博客
04-02 233
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
JavaWeb 购物车项目(二)
m0_65725031的博客
04-30 1961
该篇文章主要是将我们剩下的功能完成，完善我们购物车项目，再看该文章之前，可以先去看下购物车项目(一)该篇文章。 目录 一.增加订单和订单详情数据 二.查看订单功能完善 三.订单详情功能完善 一.增加订单和订单详情数据 首先在我们的购物车界面中有一个按钮订单结算，点击该按钮时我们的购物车数据清空，然后新增一条订单数据，点单结算时购物车有几条数据，在我们的订单详情表中，对应着该订单的商品数量就有几条。 1.购物车页面代码如下： <%@ page language="java".
html简单网页代码：】html在线网上书店 基于html制作我的书屋(23页面)
而风不止
01-11 856
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
【学生网页设计作业源码】基于HTML+CSS+JavaScript简单的大学生书店(13个页面) 二手书店电子商务网站模板源码
最新发布
网页设计与制作
06-06 755
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒
HTML简单书城
06-07
用HTML创建一个书城首页，有用户登录，图书类型，相关链接等，其余功能可进行添加
【网页设计】基于HTML在线图书商城购物项目设计与实现
网页设计与制作
01-09 989
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
购书静态网页设计与实现，原生HTML+CSS+Javascript实现！
04-01
购书+阅读静态网页设计与实现，原生HTML+CSS+Javascript，基本实现网站经典功能：图片轮播切换、点击切换、表单登录验证、用户浏览网站时长计算、鼠标点击提示、加载提示，体验前端开发的过程，小白入门前端开发案例...
网上书店(struts+hibernate+css+mysql)毕业设计——（论文+源码）.zip
04-21
网上书店的毕业设计项目是一个基于Java技术栈的Web应用程序，主要使用了Struts、Hibernate、CSS和MySQL数据库。这个项目不仅包含了实现一个完整的网上书店所需的前后端代码，还附带了相关的毕业论文，全面展示了系统...
JSP源码——网上书店(struts+hibernate+css+mysql).zip
10-06
《JSP源码——网上书店(struts+hibernate+css+mysql)》是一个典型的Web应用项目，展示了如何使用Java服务器页面（JSP）、Struts框架、Hibernate持久化框架、CSS样式以及MySQL数据库来构建一个功能完备的在线书店系统...
jsp毕业设计——JSP+SQL网上书店设计(源代码+论文).zip
09-18
"jsp毕业设计——JSP+SQL网上书店设计(源代码+论文)"这个标题揭示了这是一个基于JSP（Java Server Pages）技术和SQL数据库的毕业设计项目，主题是构建一个网上书店系统。这表明我们将探讨如何使用JSP进行动态网页...
纯html网上书店程序
02-20
纯html网上书店程序纯html网上书店程序纯html网上书店程序
网上书城系统－代码＋页面
09-16
完整的网上书城系统源码 jsp＋java＋数据库
Html 书城网页
12-27
应用了html 及 javascript 函数
在线书城代码
06-28
在线书城，课程设计，代码，VS2010，C#，SQL2008
崔希凡老师经典网上书城代码
03-17
崔希凡老师经典网上书城代码 崔希凡老师经典网上书城代码崔希凡老师经典网上书城代码崔希凡老师经典网上书城代码
ASP毕业设计——asp+SQLServer网上书店系统设计(源代码+论文).zip
09-14
ASP毕业设计——ASP+SQLServer网上书店系统是一个典型的Web应用程序案例，主要展示了如何利用ASP（Active Server Pages）技术和SQLServer数据库来构建一个完整的在线购物平台。这个系统的设计和实现涵盖了多个IT领域...
大学生网页作业成品——基于HTML网上书城项目的设计与实现
HTML网页设计
08-28 1639
1网页简介此作品为学生个人主页网页设计题材，HTML+CSS布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平,非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用技术方面主要应用了网页知识中的Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。......
期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
weixin__BJ050106的博客
01-02 120
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
H5学习小结——div+css创建电子商务静态网页
05-30
很好，我可以回答你关于H5学习小结——div+css创建电子商务静态网页的问题。 首先，使用div+css创建电子商务静态网页的基本步骤如下： 1. 设计页面结构，使用div元素来划分页面区域。 2. 使用CSS样式对div元素...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值