HTML CSS 模仿当当网

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量4.4k 收藏 65
点赞数 10
文章标签： HTML CSS 前端
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_36616023/article/details/94405821
版权

效果图
效果图

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>当当网</title>
		<style type="text/css">
			body {
				padding: 1px 40px;
			}
			.header{
				clear: all;
				height: 60px;
			}
			.header_left {
				float: left;
				margin: 0px 10px;
				width: 30%;
			}
			
			.header_all_right {
				width: 25%;
				float: right;
				margin-right: 10px;
				font-family: "arial, helvetica, sans-serif";
			}
			
			.header_right_top {
				margin-bottom: -5px;
				clear: right;
			}
			
			.head_right_bottom {
				clear: right;
				height: 40px;
				background-color: aliceblue;
			}
			
			.header_right {
				margin: 8px 6px;
			}
			
			.header_right a {
				text-decoration: none;
				color: black;
				padding: 3px;
			}
			
			.contend {
				clear: left;
				padding:  0px 10px;
			}
			
			.chart {
				clear: left;
				margin-top: 10px;
			}
			
			.bar {
				background-color: orangered;
				height: 35px;
			}
			
			.puture {
				margin-top: 10px;
				border: solid;
				border-color: aquamarine;
				clear: left;
				height: 400px;
			}
			
			.footer {
				text-align: center;
			}
			
			.contend .tag {
				float: left;
				width: 4.3%;
				margin: 6px 10px 6px 10px;
			}
			
			.contend .tag a {
				text-decoration: none;
				color: black;
				padding: 3px;
				color: white;
			}
			
			.puture1 {
				margin-top: 10px;
				margin-bottom: 10px;
				margin-left: -10px;
			}
			
			.puture2 {
				margin-left: 10px;
				clear: left;
				height: 300px;
				background: url(img/book-01.jpg);
				background-repeat: no-repeat;
			}
			.puture2 .shu{
				float: left;
			}
			.puture2 .shu img{
				padding-left:20px ;
			}
			.puture2 .one {
				margin-right: 0px;
			}
			.puture .four .jianjie{
				padding-top: 80px;
				padding-right: 100px;
			}
			.puture2 .nine {
				margin-left: 0px;
			}
			
			.four .jianjie{
				
			}
			.four .jianjie a{
				text-decoration:none;
				color: blue;
			}
			.book2{
				clear: left;
				height: 130px;
				margin: 20px 5px;
			}
			.book2 .six a{
				text-decoration: none;
				font-size:small;
				color: blue;
			}
			.book2 .six p{
				font-size: x-small;
				margin: 5px;
			}
			.book2 .twol {
				background: url(img/book-02.jpg);
				height: 120px;
				background-repeat: no-repeat;
			}
			.book3 .six a{
				text-decoration: none;
				font-size:small;
				color: blue;
			}
			.book3 .six p{
				font-size: x-small;
				margin: 5px;
			}
			.book3 .twol {
				background: url(img/book-03.jpg);
				height: 120px;
				background-repeat: no-repeat;
			}
			.footer{
				color: lightgray;
				font-size: smaller;
			}
			.one {
				width: 8%;
				float: left;
			}
			
			.two {
				width: 25%;
				float: right;
				text-align: center;
			}
			.twol{
				width: 20%;
				float: left;
			}
			.three {
				width: 26%;
				float: left;
			}
			
			.four {
				width: 37%;
				float: left;
			}
			
			.nine {
				widows: 92%;
				float: left;
			}
			.six{
				width: 65%;
				float: left;
			}
			.five{
				width: 50%;
				float: left;
			}
		</style>
	</head>

	<body>
		<div class="header">
			<div class="header_left">
				<img src="img/logo.jpg" alt="logo" />
			</div>
			<div class="header_all_right">
				<div class="header_right_top">
					<img src="img/icon_count.png" alt="" />
				</div>
				<div class="head_right_bottom">
					<div class="two">
						<div class="header_right" style="height:30px;width: 70px;">
							<a href="#">都看乐器</a>
						</div>
					</div>
					<div class="two">
						<div class="header_right" style="height:30px;width: 70px;">
							<a href="#">数字馆</a>
						</div>
					</div>
					<div class="two">
						<div class="header_right" style="height:30px;width: 70px;">
							<a href="#">当当优品</a>
						</div>
					</div>
					<div class="two">
						<div class="header_right" style="height:30px;width: 70px;">
							<a href="#">唯品会</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="contend">
			<div class="bar">
				<div class="tag">
					<a href="#">首页</a>
				</div>
				<div class="tag">
					<a href="#">图书</a>
				</div>
				<div class="tag">
					<a href="#">音像</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
				<div class="tag">
					<a href="#">童装</a>
				</div>
			</div>
			<div class="chart">
				<img height="100%" width="100%" src="img/banner.png" alt="#" />
			</div>
			<div class="puture">
				<div class="three">
					<div class="puture1">
						<img src="img/bg_bang.gif" alt="" />
					</div>
					<div class="puture2">
						<div class="shu">
							<img src="img/bookNo1.gif" alt="" />
						</div>
					</div>
				</div>
				<div class="four">
					<div class="jianjie">
						<a href="#">
							偷影子的人
						</a>
						<p>
					埃及——世界上*伟大的文明体，其古代故事跨越了四千多年的历史时段，
					而这一历史时段又塑造了日后整个世界的形态。，
						</p>
						<p>
					本书是乔安•弗莱切的代表作，作为英国BBC该书电视台相关古埃及解读的系列节目的原著，因此具有BBC纪录片式的客观性和权威性。
						</p>
						<p>
					全书以古埃及4000多年一代代的王朝为阶段，按时间推行的王朝兴衰为轴线来讲述不同王朝的情况，
					根据考古实物，如壁画、神庙、金字塔等，以及各类出土的文献来还原每代帝王的生活和王朝的发展
						</p>
						
					</div>
				</div>
				<div class="four" style="height: 400px;">
					<div class="book1" style="height: 60px;">
						
					</div>
					<div class="book2" >
						<div class="twol">
							<img src="img/bookNo2.gif" alt="" />
						</div>
						<div class="six">
							<a href="#">
								看见（央视知名记者，主持人蔡静：十年个人成长的告白，中国社会变迁的备忘）
							</a>
							<br />
							<p>
								作者：蔡静 著
							</p>
							<p>
								出版社：广西师范大学出版社
							</p>	
							<p>
								29.4   7.4折
							</p>
						</div>
					</div>
					<div class="book3" >
						<div class="twol">
							<img src="img/bookNo3.gif" alt="" />
						</div>
						<div class="six">
							<a href="#">
								看见（央视知名记者，主持人蔡静：十年个人成长的告白，中国社会变迁的备忘）
							</a>
							<br />
							<p>
								作者：蔡静 著
							</p>
							<p>
								出版社：广西师范大学出版社
							</p>	
							<p>
								29.4   7.4折
							</p>
						</div>
				</div>
			</div>
		</div>
		<div class="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved <img src="img/validate.gif" alt="#" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>
	</body>

</html>

第一次写，代码比较冗余，包涵一下

淡蓝色的狼
关注
  • 10
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当当网首页——html代码
穆雄雄的博客
10-28 3640
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
html当当书网站 html网上在线书城 html在线小说书籍网页 当当书城网页设计
HTML网页设计
08-09 709
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
期末前端web大作业——基于HTML当当图书网项目的设计与实现 网上书城 网上书店 在线书店网页
QQ_____365392777的博客
06-03 997
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
HTML+CSS制作仿制当当网
m0_51435825的博客
07-09 3362
简单、适合新手制作的HTML静态网页
HTML+CSS实现拼多多官网首页
weixin_54138158的博客
03-28 7595
网页头部、主体以及尾部的截图
html当当网上书店,完整版：当当网上书店
weixin_28308325的博客
06-08 967
【实例简介】完整版当当网上书店，Div布局，HTML页面，js效果。少数H5标签【实例截图】【核心代码】完整版：当当网上书店└── 完整版：当当网上书店├── css│ ├── global.css│ ├── layout.css│ └── template.css├── footer.html├── header.html├── images│ ├── dd_arrow_down...
【web前端期末大作业】html网上在线书城大学生静态网页 大学生html当当书城仿站 网上书城购物网页作业HTML
VX_WJ88950106的博客
11-29 135
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
jQuery：案例三，模仿当当网“独家特供”菜单动画
willard_cui的博客
08-05 367
动画：模仿当当独家特供菜单动画 jQuery方法：addClass(),removeClass(),siblings(),find(),show(),hide() 动画效果： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
第五章 标签布局分类、css选择器深入、浮动float
目小温的博客
06-08 218
学习记录 0608
设计HTML5表单
码说芯语的博客
08-15 1966
一文读懂HTML表单设计！
当当网静态HTML
01-31
总的来说，当当网静态HTML项目是一个全面的Web前端学习案例，涵盖了HTML、CSS、JavaScript基础知识，以及响应式设计、前端框架、资源管理等多个方面，对于提升前端开发技能和理解电子商务网站的前端架构有着重要的...
网页设计期末作业-仿当当网
07-26
网页设计是IT行业中一个至关重要的领域，而"网页设计期末作业-仿当当网"则是一个针对初学者的实践项目，旨在帮助他们掌握基础的HTML5、CSS和前端设计技能。这个作业要求学生模仿知名电商网站——当当网的页面布局和...
模仿当当网 jsp+mysql
12-26
【标题】"模仿当当网 jsp+mysql"是一个基于Java Web技术的项目，它旨在复制和实现当当网的一些核心功能，如用户管理、商品浏览、购物车操作以及订单处理。这个项目采用jsp（JavaServer Pages）作为前端展示技术，...
模仿当当网菜单样式 模仿当当网菜单样式
05-26
本文将深入探讨如何模仿当当网的菜单样式，主要关注CSS（层叠样式表）技术的应用，同时提及HTML结构和可能涉及的JavaScript交互。 首先，让我们了解菜单在网页设计中的作用。菜单通常位于网页的顶部或侧边，它提供...
静态网页当当网（HTML源码）
01-25
本文将以“静态网页当当网（HTML源码）”为主题，深入探讨当当网的网页设计，主要涉及HTML这一核心语言，以及与之相关的CSS和脚本技术。 当当网作为知名的在线购物平台，其网页设计无疑体现了专业和高效。HTML...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 796
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 991
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 353
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
网络设计作业（HTML CSS实现）
DOCTYPE html><html></html>【导航栏 foot 底部的 css 源代码】<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> , initial-scale=1.0"> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值