HTML 用Table布局商城首页

最新推荐文章于 2022-11-14 20:37:24 发布
最新推荐文章于 2022-11-14 20:37:24 发布
阅读量504 收藏 3
点赞数
分类专栏： HTML & CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxm809/article/details/108171595
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网站首页</title>
	</head>
	<body>
		<table width="1300px" height="800px" border="1px solid red" cellspacing="0px" 
		cellspacing="0px">
			<!-- logo -->
			<tr height="50px">
				<td>
					<table border="1px solid blue" width="100%" cellspacing="0px" cellpadding="5px">
						<tr>
							<td>
								<img src="../img/logo2.png"  />
							</td>
							<td>
								<img src="../img/header.png" />
							</td>
							<td>
								<a href="#"><font>登陆</font></a>
								<a href="#"><font>注册</font></a>
								<a href="#"><font>购物车</font></a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 导航栏 -->
			<tr height="50px" bgcolor="black">
				<td>
					&nbsp;
					<a href="#"><font color="white">首页</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font color="white">手机数码</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font color="white">电脑办公</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font color="white">鞋靴箱包</font></a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#"><font color="white">家用电器</font></a>
				</td>
			</tr>
			<!-- 轮播图 -->
			<tr height="600px">
				<td>
					<img src="../img/1.jpg" width="1300px" />
				</td>
			</tr>
			<!-- 最新商品 -->
			<tr>
				<td>
					<table cellpadding="5px" border="1px solid red" width="100%" cellspacing="0px">
						<tr>
							<td colspan="7" width="150px" height="50px">
								<font size="4">最新商品</font>
								<img src="../img/title2.jpg"/>
							</td>
						</tr>
						<tr>
							<td rowspan="2" width="190px" height="500px">
								<img src="../img/big01.jpg" />
							</td>
							<td colspan="3" width="555px" height="250px">
								<img src="../img/middle01.jpg" width="100%" height="100%"/>
							</td>
						
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							
						</tr>
						<tr>
							
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 广告 -->
			<tr>
				<td>
					<img src="../img/ad.jpg" width="100%"/>
				</td>
			</tr>
			<!-- 热门商品 -->
			<tr>
				<td>
					<table cellpadding="5px" border="1px solid red" width="100%" cellspacing="0px">
						<tr>
							<td colspan="7" width="150px" height="50px">
								<font size="4">热门商品</font>
								<img src="../img/title2.jpg"/>
							</td>
						</tr>
						<tr>
							<td rowspan="2" width="190px" height="500px">
								<img src="../img/big01.jpg" />
							</td>
							<td colspan="3" width="555px" height="250px">
								<img src="../img/middle01.jpg" width="100%" height="100%"/>
							</td>
						
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							
						</tr>
						<tr>
							
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<a href="#"><font color="grey">电炖锅</font></a><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<font color="grey">电炖锅</font><br/><br/>
								<font color="red">￥499</font>
							</td>
							<td width="150px" height="250px" align="center">
								<a href="#"><img src="../img/small03.jpg" width="100%"  /></a>
								<font color="grey">电炖锅</font><br/><br/>
								<font color="red">￥499</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- 广告 -->
			<tr>
				<td align="center">
					<img src="../img/header.png"/>
				</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>
					<p>
						Copyright © 2005-2016 传智商城 版权所有 
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

 

dxm809
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技术-HTML页面的加载
weixin_30399821的博客
08-08 768
HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染。 http协议的请求过程是基于TCP协议的。http是要基于TCP连接基础上，简单的说，TCP单纯建立连接，不涉及任何我们需要请求的实际数据，简单的传输。http基于TCP建立的连接来收发数据，即实际应用上来的。 一个HTML页面的加载的交互流程大致如下： 0.输入URL1.解析URL2.构造并发送HTTP请...
HTML实战案例4：制作淘宝店铺列表页面
海鱼专属博客
05-27 6430
实战案例4：制作淘宝店铺列表页面 一、完整的页面效果图 二、文本素材 淘宝首页> 店铺街> 所有店铺(4626173) 淘店 店铺类目 韩都衣舍旗舰店 主营宝贝：韩都衣舍 2011 现货 8122 山东济南 旗舰店 osa品牌服饰旗舰店 主营宝贝：t恤 连衣裙 女装 696 广东深圳 旗舰店 andostore安都专卖店 主营宝贝：andosto...
iframe 方式实现 tab 页,首页主动加载,其它页点击时加载
图画hadoop
08-16 487
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;.
html5怎么做京东表格,HTML+CSS+PS 编写京东商城首页
weixin_35748716的博客
06-07 659
仅供学习，转载请注明出处需求前面铺垫写了不少HTML、CSS、Photoshop的文章，那么本篇章就是要结合起来挑战写写京东的商城首页了。好了，本次的目标就是实现这样的大概页面，让我们一步步来开始编写。文档结构首页创建好本次编写的文件结构，如下：好了，文件夹目录都准备好了，那么先按照从上到下，从左到右的原则一步步开始编写吧。编写头部横栏部分要编写这部分，首先就需要准备相关的图片，这里我就不一步步说...
购物网站HTML（首页）
m0_56078449的博客
02-11 1万+
购物网站HTML（首页）
html+css+js实现一个简单的电商商城首页
热门推荐
小文跟你拼了
06-15 6万+
ps：慕课网学习过程中的实践小积累，用html+css+js实现了一个简单的商城首页
html5 div布局与table布局详解
01-19
本文实例为大家解析了html5 div布局与table布局，供大家参考，具体内容如下 div布局：html+css实现简单布局。 #container中height不能写成百分数，必须为具体高度。 <!DOCTYPE html> <html> <head lang=...
table布局练习.html
09-29
是同学老师布置的一个作业，作业要求是用DW做，我拿来写代码练手了，因为我还没有系统的学习完看起来有点乱，至少在命名规范这一方面，而且很多HTML5不在用的标签也在用，是跟着作业要求一步一步来的。我最后还是用...
Table布局的优缺点介绍及为什么不建议使用
09-22
Table布局，作为一种传统的HTML布局方式，曾在Web开发的早期阶段被广泛使用，特别是在处理数据表格时。然而，随着时间的推移和技术的发展，Table布局逐渐暴露出一些显著的缺点，这使得现代网页设计倾向于使用更灵活...
学习ExtJS table布局
12-10
一、Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。 layoutConfig使用columns指定父容器分成3列， rowspan合并行数目。 colspan合并列数目。 二、应用举例 代码如下: Ext....
在线商城静态html网站源代码
06-16
在线商城静态html网站源代码
HTML商城主页面
06-25
小商城源代码，适合学习，基本没啥问题 适合学生下载
table网页布局网站
09-08
table网页布局网站，告诉你怎么用table布局好看些，让你轻松易懂
html5+css3实现商城首页
lzsan_的博客
04-19 1293
index.html: <body> <div> <header> <div class="logo"> <img src="./images/logo.png" alt=""> </div> <nav> <ul> ...
电商项目：仿小米官网纯HTML+css布局
Monto_student的博客
04-21 1929
纯html和css仿小米商城
html设计首页,使用HTML设计商城首页
weixin_36090805的博客
06-05 848
网站首页需求分析根据产品文档,完成商城首页,显示效果如图技术分析表格标签tabletable标签常用的属性:bgcolor : 背景色width : 宽度height : 高度align : 对齐方式tr 标签td 标签合并单元格:colspan : 跨列操作rowspan : 跨行操作注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉表格的嵌套:在td中可以嵌套一个表格常用的属性:width=...
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
而风不止
11-14 2万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
商城首页HTML
详情请看注释
11-29 692
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物商城</title> </head> <body> <table width="80%" align="center"> <!--lo...
HTML5+CSS3移动商城-首页
记录和分享属于我的“IT”时光
04-29 1876
HTML5+CSS3移动商城-首页
jq 将html div布局转table布局
最新发布
05-26
jq是一个针对HTML文档进行操作的JavaScript库，它本身并不提供将div布局转换为table布局的功能。但可以使用jq来实现这个功能。 假设我们有如下的div布局： ```html <div class="container"> <div class="row"> <div class="col">内容1</div> <div class="col">内容2</div> <div class="col">内容3</div> </div> <div class="row"> <div class="col">内容4</div> <div class="col">内容5</div> <div class="col">内容6</div> </div> </div> ``` 我们可以使用以下jq代码将其转换为table布局： ```javascript $(document).ready(function(){ // 创建一个新的table元素 var table = $("<table></table>"); // 遍历每一个行元素 $(".row").each(function(){ // 创建一个新的tr元素 var tr = $("<tr></tr>"); // 遍历每一个列元素 $(this).find(".col").each(function(){ // 创建一个新的td元素，并将列元素的内容添加到td中 var td = $("<td></td>").html($(this).html()); // 将td添加到tr中 tr.append(td); }); // 将tr添加到table中 table.append(tr); }); // 将table添加到原来的容器中 $(".container").html(table); }); ``` 这段代码将创建一个新的table元素，并遍历每一个行元素和列元素，将它们转换为table布局。最后，将新的table元素添加到原来的容器中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值