用css/html制作简易bookstore网页

最新推荐文章于 2022-11-20 08:38:44 发布
最新推荐文章于 2022-11-20 08:38:44 发布
阅读量2k 收藏 8
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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>


INstamina
关注
HTML5+CSS3 创建网上书店界面
qq_55786319的博客
10-20 4127
超链接的简单运用 <!doctype html> <html> <head> <meta charset="utf-8"> <title>网上书店——火热开售【海量图书，欢迎选购】</title> <style> body{background: #e5ede2;} body,nav,ul,li{ margin:0;padding: 0 } nav{ background-color: #9
HTML相关知识（一）
weixin_42823014的博客
03-22 380
（一）HTML简介 1. 网页 1.1 什么是网页 网页是根据因特网上一定的规则，使用html等制作的用于展示特定内容的网页集合。 网页是构成网站的基本元素。 网页是图片、链接、文字、声音、视频等源深路组成，其实就是一个html文件。 1.2 什么是HTML HTML指的是超文本标记语言（Hyper Text Markup Language）,它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言（markup language）。 标记语言是一套标记标签（markup t
bookstore静态页面
eileen823的博客
02-21 1035
bookstore静态页面代码如下： #right{ float: right; vertical-align: middle; line-height:50px; margin-right:70px; } #right img{ margin-top:11px; } #right a{
网页制作电子书（HTML+CSS）
12-10
这是我买的书配送的电子书，PDF格式，介绍了怎眼用HTML和CSS设计网页
web_bookstore:网上书城
05-11
#网上书城 web_bookstore是一个基于servlet/jsp和html/css/js的网上书城项目。 该网上书城项目分为前台和后台两大部分，前台部分包括会员注册、会员登录、购买书籍、添加购物车、结算等功能，后台部分包括查看会员、查看商品、添加商品等功能。有些功能模块还未添加，后续可能会继续完善。 ##注册模块 会员需要先注册后才能使用网上书城添加购物车和结算等功能，注意：会员注册后需要管理员激活该会员后才能登录。注册界面如下所示： ##登录模块 会员注册成功后，就可以直接登陆到网上书城了，登录界面如下所示。注意，如果是管理员登录的话，会跳转到后台管理员主页；如果是普通会员的话就会跳到会员主页。 ##数据库模块 该网上书城使用了5个数据表，相关的表说明文件见web_bookstore/src/db.sql文件。 ##如何使用 下载项目后直接导入到eclipse工程中即可。
html+css+bootstrap实现电商网页设计，图书网购html网页设计模板 Bookstore.zip
最新发布
02-27
它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 【设计思路】 用户友好性：界面简洁直观，易于操作，减少用户的学习...
用DIV+CSS技术设计的网上书城网页与实现制作（大一Web课程设计）
HTML网页设计
08-08 1608
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
bookstore_project:html CSS和javascript中的书店网站
05-05
综上所述，"bookstore_project"将是一个全面介绍网页开发的实践项目，涵盖从创建HTML结构、设计CSS样式到实现JavaScript交互的全过程。通过该项目，学习者将有机会亲手构建一个功能完备的书店网站，提升其前端开发...
div+css实现网上书店网页
02-20
在网页设计领域，`div+css`是一种常见的布局方式，用于构建复杂的网页结构。本项目“div+css实现网上书店网页”旨在通过这两种技术来创建一个功能完备且视觉吸引人的在线书店平台。以下是对这个项目中涉及的关键知识...
【网页设计】基于HTML在线图书商城购物项目设计与实现
而风不止
11-20 803
在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商城 | 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
基于JS实现bookstore静态页面的实例代码
10-20
本文给大家分享一段核心代码基于js实现的bookstore静态页面，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
HTMLBook:让我们用HTML写书！
04-06
HTMLBook 让我们用HTML写书！ HTMLBook是一个基于XHTML5的开放标准，用于创作和生产印刷书籍和数字书籍。 HTMLBook在以下前提下构建： 书是永恒的。 基本的“书籍”结构已经存在了数百年，并且会以数字或印刷形式持续存在。 HTML是可预见的未来世界的标记语言。 在可预见的将来，单源文档处理将仍然很有价值。 这样，可以通过以下方式对HTMLBook进行特征化： HTMLBook是XHTML5的子集。 所有HTMLBook都是XHTML5，但并非所有XHTML5都是HTMLBook。 HTMLBook不包含XHTML5规范之外的其他元素或属性。 HTMLBook在语义上适合于一本书的结构，包括技术和参考文档中使用的更复杂的内容。 HTMLBook是使用XML模式定义的，并且可以针对XML模式进行验证。 HTMLBook样式表是用CSS编写的。 HT
bookstore:玩具网站
05-22
另一家书店 这是一个在线书店网站。 要求 PHP 5+ MySQL 5.6以上 Apache 2（推荐） 设置 创建一个MySQL用户和一个数据库模式； 在util/config.php编辑数据库配置； 在浏览器中打开admin/db_test_data.php以添加示例数据； 打开index.html ，看看它是否有效； 将admin/db_test_data.php复制到一个新文件； 编辑文件并通过db_cat_add()添加目录； 打开文件； 该网站现已准备就绪。 执照 该代码在GPLv3下发布。
网上书店bookshop
04-26
带数据库 很完整的一套系统,功能全面，从书本浏览到下订单等
BookShop:私人的
04-27
BookShop 此为软件工程训练的大作业，为方便团队协作，故而建了一个github项目.没钱就只能弄成公开项目了。 ##简要描述 网络应用日益生活化，消费者越来越多的日常需求都通过利用网络工具得到了很好的实现。网上购物成为 众多消费者生活中不可或缺的一部分。这一发展趋势给线下商家带来了巨大的挑战。为了得到更好的发展， 线下商家也开始寻求互联网带来的信息便利，通过充分利用这一平台，争取更广泛的客户群。 书店行业基于自身商品种类多、查找困难等突出特点，更需要一个信息展示的平台向顾客展示其商品信息， 摆脱实体店铺的束缚，使购书过程更加便捷。 开发文档 见 成员 马宗亮 李青青 周梦琳 张丹 罗枭 李加满 姚业 郑杰
HTML期末作业-图书商城书店
学生期末作业
05-22 4161
适合大一、大二学生HTML作业-网上书城网上书店，HTML+css+JavaScript,4个页面
HTML网上书店代码,jsp网上书店系统(附源代码)
weixin_27719109的博客
06-04 2934
内容介绍原文档由会员 莎士比亚 发布中英文摘要第一章 JAVA的网络功能与编程1-1 JAVA语言简介1-2 JAVA语言在网络上的应用1-3 JSP的基础——Servlet 技术第二章 Struts概述2-1 Struts的由来和发展2-1-1 MVC简介2-2 Struts优缺点3-3 Struts的工作流程第三章 网上书店详细设计3-1 需求分析3-2 总体设计3-3 功能设计3-4 数据库...
html框架 book,HTML框架、表单、多媒体知识（66页）-原创力文档
weixin_31293841的博客
06-07 228
【例h4-25.html】使用Media Player播放视频文件 使用Media Player播放视频 使用Media Player播放视频文件 if (navigator.appVersion.indexOf("Win") != -1) //使用Windows Media Player播放器 else //使用R...
bookStore图书商城，需求、设计、源码、问题、总结
StillOnMyWay的博客
03-27 9962
这是简介 相信很多人在初学javaweb之后，对于所学的较为复杂多样的知识急需一个实战项目练手，于是我在网上找到了传智播客的一个经典小项目—–图书商城。它没有用到spring或者mybatis等框架，而是使用了诸如jsp，servlet等javaweb的核心，巩固基础再好不过了。 如果某些道友正在练习这个项目，并且碰到一些小问题的话，可以跳过项目介绍部分，直接看后面的问题部分 资...
用HTML和CSS做一个线上书店的网页
06-04
好的，下面是一个简单的线上书店的网页示例，使用HTML和CSS实现： ```html <!DOCTYPE html> <html lang="en"> <title>Online Bookstore</title> <link rel="stylesheet" href="style.css"> </head> <h1>On...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值