怎么使用HTML设计商城首页

最新推荐文章于 2022-02-24 21:57:29 发布
最新推荐文章于 2022-02-24 21:57:29 发布
阅读量556 收藏 8
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hfdxmz_3/article/details/106090700
版权

网站首页

需求分析

根据产品文档,完成商城首页,显示效果如图

技术分析

表格标签table

table标签
常用的属性:

  • bgcolor : 背景色
  • width : 宽度
  • height : 高度
  • align : 对齐方式

tr 标签
td 标签

合并单元格:

  • colspan : 跨列操作
  • rowspan : 跨行操作
    注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

表格的嵌套:在td中可以嵌套一个表格
常用的属性:
width="100%"填充

步骤分析

  1. 创建一个8行一列的表格
  2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分: 嵌套一个三行7列表格
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		<!--
			1. 创建一个8行一列的表格
			2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图 
			5. 第四部分: 嵌套一个三行7列表格
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
		<table  width="100%" >
			<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
			<tr>
				<td>
					<table  width="100%">
						<tr>
							<td>
								<img src="../img/logo2.png" />
							</td>
							<td>
								<img src="../image/header.jpg" />
							</td>
							<td>
								<a href="#">登录</a>
								<a href="#">注册</a>
								<a href="#">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第二部分: 导航栏部分 : 放置5个超链接-->
			<tr bgcolor="black">
				<td height="50px">
					<a href="#"><font color="white">首页</font></a>
					<a href="#"><font color="white">手机数码</font></a>
					<a href="#"><font color="white">鞋靴箱包</font></a>
					<a href="#"><font color="white">电脑办公</font></a>
					<a href="#"><font color="white">香烟酒水</font></a>
				</td>
			</tr>
			<!--第三部分: 轮播图 -->
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%" />
				</td>
			</tr>
			<!--第四部分: 嵌套一个三行7列表格-->
			<tr>
				<td>
					<table  width="100%" height="500px"> 
						<tr>
							<td colspan="7">
								<h3>最新商品<img src="../img/title2.jpg"></h3>
							</td>
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" height="480px">
								<img src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%" />								
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第五部分: 直接放一张图片-->
			<tr>
				<td>
					<img src="../products/hao/ad.jpg" width="100%" />
				</td>
			</tr>
			<!--第六部分: 抄第四部分的-->
			<tr>
				<td>
					<table  width="100%" height="500px"> 
						<tr>
							<td colspan="7">
								<h3>热门商品<img src="../img/title2.jpg"></h3>
							</td>
						</tr>
						<tr align="center">
							<!--左边大图的-->
							<td rowspan="2" width="206px" height="480px">
								<img src="../products/hao/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%" />								
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
						<tr align="center">
							
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
							<td>
								<img src="../products/hao/small06.jpg" />
								<p>洗衣机</p>
								<p><font color="red">$998</font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 第七部分: 放置一张图片-->
			<tr>
				<td>
					<img src="../image/footer.jpg" width="100%" />
				</td>
			</tr>
			<!--第八部分: 放一堆超链接-->
			<tr>
				<td align="center">
					        
					<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>
					<br />
Copyright © 2005-2016 传智商城 版权所有
				</td>
			</tr>
		</table>
	</body>
</html>
会飞的小蚂蚱
关注
专栏目录
html+css商城首页
09-21
商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页
HTML商城主页面
06-25
小商城源代码，适合学习，基本没啥问题 适合学生下载
商城首页HTML
详情请看注释
11-29 714
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物商城</title> </head> <body> <table width="80%" align="center"> <!--lo...
商城首页 html,商城首页.html
weixin_42503757的博客
06-21 520
商城首页$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath...
html设计首页,使用HTML设计商城首页
weixin_36090805的博客
06-05 902
网站首页需求分析根据产品文档,完成商城首页,显示效果如图技术分析表格标签tabletable标签常用的属性:bgcolor : 背景色width : 宽度height : 高度align : 对齐方式tr 标签td 标签合并单元格:colspan : 跨列操作rowspan : 跨行操作注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉表格的嵌套:在td中可以嵌套一个表格常用的属性:width=...
html+css 移动端商城网页设计实现
04-27
首先，我们从商城首页开始。首页通常是吸引用户注意力并引导他们进入其他功能区的关键界面。在这里，HTML5可以用于创建响应式布局，确保网页在不同屏幕尺寸下都能良好展示。CSS3的媒体查询（Media Queries）可以帮助...
基于html汽车商城网站页面设计与实现.rar（毕业设计+毕业源码+答辩PPT）
11-07
交互设计。 VI 1.1 选题背景及意义 III 1.2 研究内容和拟解决的问题 III (1) 排版 III (2) 单页布局的设计 III (3) 交互性 III 1.3 本章小结 IV 第2章 前端开发工具及相关技术 IV 1.4 前端开发环境 IV 1.5 前端开发...
基于HTML的公司官网商城设计源码
最新发布
06-01
本源码是基于HTML开发的包含首页，所有商品，商城动态，关于我们，线下门店，购物车，结算等模块的公司官网设计，包含68个文件，其中包括29个.jpg文件，28个.png文件，5个.html文件，以及4个.css文件。此外，还包括2...
小米商城（HTML+CSS）网页设计期末作业
01-04
内容概要：这份资源写的是静态小米商城，点开资源前大家可以去小米商城官网查看设计效果，通过带着读者手写简化版小米商城网页，逐步巩固学习到的HTML和css基础知识，例如：背景属性的使用background、iconfont字体...
基于HTML仿oppo手机商城电商项目的设计与实现6个页面
08-10
### 基于HTML仿oppo手机商城电商项目的设计与实现6个页面 #### 一、项目概述 该项目是基于HTML、CSS以及JavaScript构建的一款针对大学生网页设计课程的大作业源码，涵盖了多种不同主题，包括但不限于个人、美食、...
HTML-商城界面
07-22
利用table标签制作商城主网页，源码带注释。最早的网页制作就是使用table标签制作的
商城静态HTML完整版
10-29
商城静态页面模板电脑版本，页面完整可使用商业，页面美观整洁。
PaintingMall:用html+css+js实现一个简单的电商商城首页
05-11
2020.11.24更新 之前写的静态页面我没想到在CSDN点击率较高，在这里首先感谢大家的支持。 看到很多人评论或者私信问我要登陆注册页面和数据库。所以我将这两个部分的源码以打包的形式放在这个项目里，文件夹名2020.11.24更新包。等到后续有时间的时候，我一定会仔细的重构这个Demo，将它完善，并附上详细的文档和脑图提供给爱学习的学弟学妹们参考学习～ （因为我现在已经在游戏研发相关的实习，所以无法大部分精力投入在web上，抱歉抱歉） 希望这次更新的代码对看到这个demo的学弟学妹们有所帮助，再次表示感谢！ PaintingMall 用html+css+js实现一个简单的电商商城首页 不准备提供更新，作为web技术基础练习，提供给CDSN的小伙伴作为资源下载
最全的商城网页模板html
04-19
有登录，注册，个人中心，收藏夹，购物车，订单详情，待付款，售后，商品详情等等大大小小三十几个页面
html网上购物网站
12-31
一个html开发的网上购物网站，有大量的页面，代码清晰，排版严格。
商城首页布局实现（HTML源码）
热门推荐
qq_43109561的博客
05-23 1万+
商城首页布局效果： div+css实现，用到了浮动来布局，具体参见以下源码。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>div+cs网站首页布局</title> <style> /*第一部分：L...
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
02-24 4036
HTML5期末大作业：商城网站设计——小米商城官网首页(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
大一学生使用html编写网上商城首页
weixin_46381608的博客
07-04 983
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商城首页</title> </head>AA <body> <table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="1300px"> <tr>
JavaEE知识篇(2-25)——HTML(商城首页页面的制作）
渐醒的思考者
01-26 1012
web开发工具： 常见的WEB开发工具,入门可选择学习HBuilder工具，开发建议MyEclipse工具 MyEclipse工具 DW工具 HBuilder工具 提取码：50z2 浏览器工具 Firefox浏览器提取码：a06a 如果提取失败，可自行到Firefox官网进行下载 Chrome浏览器 开发手册 W3School离线开发手册 提取码：16b7 JDK1.8API 提取...
毕业设计：HTML汽车商城网站设计与实现
资源摘要信息:"基于html汽车商城网站页面设计与实现.rar（毕业设计+毕业源码+答辩PPT）" 1. HTML页面设计与实现：本资源主要介绍如何利用HTML进行汽车商城网站的设计与实现。通过HTML技术，可以构建出静态网页，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值