HTML（四）

最新推荐文章于 2023-01-22 14:39:06 发布
最新推荐文章于 2023-01-22 14:39:06 发布
阅读量127 收藏
点赞数
分类专栏： HTML 文章标签： 商城首页 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41819988/article/details/90753427
版权

4.网站首页

4.1需求分析:

根据产品文档,完成商城首页，如下图:

4.2技术分析:

表格标签table：

table标签:

常用的属性:

       bgcolor : 背景色

       width : 宽度

       height : 高度

       align : 对齐方式

tr 标签（行）

td 标签（列）

合并单元格:

colspan : 跨列操作

rowspan : 跨行操作

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

表格的嵌套:

在td中可以嵌套一个表格

4.3步骤分析

  1. 创建一个8行一列的表格

  2. 第一部份: LOGO部分: 嵌套一个一行三列的表格

  3. 第二部分: 导航栏部分 : 放置5个超链接

  4. 第三部分: 轮播图

  5. 第四部分: 嵌套一个三行7列表格

  6. 第五部分: 直接放一张图片

  7. 第六部分: 抄第四部分的

  8. 第七部分: 放置一张图片

  9. 第八部分: 放一堆超链接

4.4代码实现

<!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  border="1px" width="100%">
			<!--第一部份: LOGO部分: 嵌套一个一行三列的表格-->
			<tr>
				<td>
					<table border="1px" width="100%">
						<tr>
							<td align="center">
								<img src="../img/logo.jpg" height="44" />
							</td>
							<td align="center">
								<img src="../img/header.png"/>
							</td>
							<td align="center">
								<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"><b>首页</b></font></a>
					<a href="#"><font color="white"><b>手机数码</b></font></a>
					<a href="#"><font color="white"><b>鞋靴箱包</b></font></a>
					<a href="#"><font color="white"><b>电脑办公</b></font></a>
					<a href="#"><font color="white"><b>香烟酒水</b></font></a>
				</td>
			</tr>
			<!--第三部分: 轮播图-->
			<tr>
				<td>
					<img src="../img/1.jpg"  width="100%"/>
				</td>
			</tr>
			<!--第四部分: 嵌套一个三行7列表格-->
			<tr>
				<td>
					<table border="1px" 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="../ProductsImg/big01.jpg"/>
							</td>
							<td colspan="3" height="240px">
								<img src="../ProductsImg/middle01.jpg" width="100%" height="100%"/>
							</td>
							<td >
								<img src="../ProductsImg/small03.jpg" />
								<p><b>火锅</b></p>
								<p><font color="red"><b>￥199</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small04.jpg" />
								<p><b>电烤箱</b></p>
								<p><font color="red"><b>￥398</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small05.jpg" />
								<p><b>饮水机</b></p>
								<p><font color="red"><b>￥298</b></font></p>
							</td>
						</tr>
						<tr align="center">
							<td >
								<img src="../ProductsImg/small03.jpg" />
								<p><b>火锅</b></p>
								<p><font color="red"><b>￥199</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small04.jpg" />
								<p><b>电烤箱</b></p>
								<p><font color="red"><b>￥398</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small05.jpg" />
								<p><b>饮水机</b></p>
								<p><font color="red"><b>￥298</b></font></p>
							</td>							<td >
								<img src="../ProductsImg/small03.jpg" />
								<p><b>火锅</b></p>
								<p><font color="red"><b>￥199</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small04.jpg" />
								<p><b>电烤箱</b></p>
								<p><font color="red"><b>￥398</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small05.jpg" />
								<p><b>饮水机</b></p>
								<p><font color="red"><b>￥298</b></font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第五部分: 直接放一张图片-->
			<tr>
				<td>
					<img src="../ProductsImg/ad.jpg" width="100%"/>
				</td>
			</tr>
			<!--第六部分: 抄第四部分的-->
			<tr>
				<td>
					<table border="1px" 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" headers="480px">
								<img src="../ProductsImg/big01.jpg" />
							</td>
							<td colspan="3" height="240px">
								<img src="../ProductsImg/middle01.jpg" width="100%" height="100%"/>
							</td>
							<td >
								<img src="../ProductsImg/small03.jpg" />
								<p><b>火锅</b></p>
								<p><font color="red"><b>￥199</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small04.jpg" />
								<p><b>电烤箱</b></p>
								<p><font color="red"><b>￥398</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small05.jpg" />
								<p><b>饮水机</b></p>
								<p><font color="red"><b>￥298</b></font></p>
							</td>
						</tr>
						<tr  align="center">
							<td >
								<img src="../ProductsImg/small03.jpg" />
								<p><b>火锅</b></p>
								<p><font color="red"><b>￥199</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small04.jpg" />
								<p><b>电烤箱</b></p>
								<p><font color="red"><b>￥398</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small05.jpg" />
								<p><b>饮水机</b></p>
								<p><font color="red"><b>￥298</b></font></p>
							</td>							<td >
								<img src="../ProductsImg/small03.jpg" />
								<p><b>火锅</b></p>
								<p><font color="red"><b>￥199</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small04.jpg" />
								<p><b>电烤箱</b></p>
								<p><font color="red"><b>￥398</b></font></p>
							</td>
							<td>
								<img src="../ProductsImg/small05.jpg" />
								<p><b>饮水机</b></p>
								<p><font color="red"><b>￥298</b></font></p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<!--第七部分: 放置一张图片-->
			<tr>
				<td>
					<img src="../ProductsImg/footer.jpg"  width="100%"/>
				</td>
			</tr>
			<!--第八部分: 放一堆超链接-->
			<tr>
				<td align="center">
					<a href="#"><font color="blue">关于我们</font></a>
					<a href="#"><font color="blue">联系我们</font></a>
					<a href="#"><font color="blue">招贤纳士</font></a>
					<a href="#"><font color="blue">法律声明</font></a>
					<a href="#"><font color="blue">友情链接</font></a>
					<a href="#"><font color="blue">支付方式</font></a>
					<a href="#"><font color="blue">配送方式</font></a>
					<a href="#"><font color="blue">服务声明</font></a>
					<a href="#"><font color="blue">广告声明</font></a>
					<p><font size="1">Copyright © 2015-2016 网站商城 版权所有</font></p>
				</td>
			</tr>
		</table>
	</body>
</html>

 

子木_Lee
关注
专栏目录
HTML背景样式简单介绍
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
11-28 1万+
HTML背景样式
JavaScript-8行5列表格
weixin_30632899的博客
08-16 1172
<!DOCTYPE html> 8行5列表格 table{ table-layout:fixed; border-collapse:collapse; text-align:left; } td{ border:1px solid #aaa; padding:5px 30px 5px 3px; } h3:nth-of-type(1){ color:lightblue; } h...
HTML四种常见的定位-相对定位
Jack, what else can you do besides holding your little darling?
12-08 4052
HTML四种常见的定位-相对定位
html四行三列怎么设置,div+css三行三列
weixin_39707941的博客
06-16 1982
1* {margin:0;padding:0;font-size:1em;}#header {width:800px;height:100px;margin:0 auto;background:#06f;}#divall {width:800px;margin:0 auto;background:#fff;}#footer {width:800px;height:60px;margin:0 aut...
html将四张图片合并,照片拼图在线制作 自带多种照片拼图模板，自由排版将多张照片合成一张...
weixin_42502419的博客
06-04 2479
照片拼图在线制作 自带多种照片拼图模板，自由排版将多张照片合成一张相信大家在网上看到过很多类似照片拼图效果的图片，一张图片里面含有多张不同的照片，有的是排列有序，有的则是随意排版，效果看起来也是很美的，今天就教大家运用照片拼图模板或者自由排版将多张照片合成一张，推荐照片合成软件，操作易上手，自带的照片拼图模板也比较多，手上照片比较多的，可用此方法进行整理，需要学习照片拼图在线制作方法的童鞋快来围观...
html页面分成上下部分,HTML+CSS入门 如何将一个页面平均分成四个部分
weixin_34677379的博客
06-03 2461
本篇教程介绍了HTML+CSS入门 如何将一个页面平均分成四个部分，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<数据监控页面需要同时显示4个板块内容，如下图：CSS如何将一个页面平均分成四个部分(div)呢？html>将页面平均分成四部分*{margin:0;padding:0;}.main{width:100%;height:100%;position...
随机数 -- html
weixin_42617075的博客
09-06 4785
随机数 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;0-9数字的4位数的随机数&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
html表格标签
weixin_44992737的博客
06-06 5373
html表格标签详解
走进 HTML
Lov1_BYS的博客
01-22 7154
学会HTML超文本标记语言的使用与结构
前端HTML+JS实现四级联动
qq_39399050的博客
08-23 6515
第一次写博客，为了更好的记录自己做项目遇到的问题和解决方法。 最近在做一个项目，其中一个功能需要实现四级联动。联动功能是一个比较常用的功能，实现的方式有很多，下面分享一个比较清晰简单的方法。 实现效果如下： 一、JS代码 var xmlHttp; var selId; //创建一个xmlHttp 对象 function createXMLHttpReques...
html编写四宫格展示图片,七彩色图片排版工具一键制作四宫格图片教程
weixin_32000561的博客
06-16 2437
七彩色图片排版工具是一款好用的图片排版工具。我们可以使用七彩色图片排版工具将电脑中的图片进行一键一键排版；进入下载七彩色图片排版工具 2.1 官方版大小：3.36 MB日期：2019/2/25 15:11:38环境：WinXP, Win7, Win8, Win10, WinAll极速小编这一次就给大家演示一下怎么使用七彩色图片排版工具将电脑中的图片进行一键排版吧。首先我们要使用七彩色图片排版工具打...
html实现图片四宫格,CSS-实现全等四宫格的方案【Collection】
weixin_27240351的博客
06-09 3141
全等四宫格.png如上图，需求如下：一个未知宽高的容器，要被均分为四个相同大小格子(即四个容器)，且格子间有10px间距(即十字型空隙)，有哪些方法可以解决呢？分析问题一般实现布局，用的多的是CSS的几大属性display float position flex。其中display的应用很灵活，用的最多的是table和table-cell；float实现浮动排列，多行可以每行套个容器，也可以不套而...
html创建一个四行三列表单,HTML（三）表格table与表单form的基本使用
weixin_39763953的博客
06-26 3024
table的基本使用表格的作用除了可以显示一个表格外，有的时候还可以用于辅助排版。以前的网页都是使用表格进行排版的，不过现在都不流行了，因为表格排版不利于网页结构。1、新建表格table就是表格tr是表格的行，td表格的每一个。thread定义表头表格示例：&lt友，记基开前不接些前家我告对猿果水使钮控;table border="1" width="40朋支不器几事为的时后级功发发来久都...
html+js实现简单的网页计算器（支持四则运算带括号）
BalingHaku
11-14 4920
网络上的html+js计算器大多是两个数字加一个运算符，不能实现输入长算式，这恰好是我学习中的一个任务，我就对长算式计算进行了js语言的简单实现。 页面部分十分简单，因为我的任务主要是后端开发： <body> 输入算式：<input type="text" name="string" id="string" autocomplete="off"/> <input type="button" value="计算" id="" onclick="c
HTML简易自适应布局
m0_49940462的博客
06-07 5740
效果图：
CRM后台原型模板 #产品原型#Axure# 文件大小6.21M，系统业务分为12个核心模块：管理中心、系统公告、企业设置、组织
09-28
CRM后台原型模板 #产品原型#Axure# 文件大小6.21M，系统业务分为12个核心模块：管理中心、系统公告、企业设置、组织架构、职务权限、员工管理、模块管理、产品管理、业务设置、字段设置、字典管理、日志管理等。 对于想做产品的同学或者想深入了解CRM后台系统的朋友，极具研究学习价值和办公使用价值 致力于让产品人专注产品本身，不受原型实现的困扰～ 适合人群：互联网产品经理、学习使用axure的同学
metasploit_in_termux-master.zip
09-28
metasploit_in_termux-master.zip
基于C#、CSS、JavaScript和HTML的甜品网站设计源码
最新发布
09-28
该项目是一款甜品主题的网站设计源码，由806个文件组成，涵盖296个JPG图片、142个C#源代码文件、126个DLL库文件、44个ASPX页面文件、20个配置文件、18个缓存文件、17个PNG图片文件、16个可执行文件、14个PDB调试文件、14个JPEG图片文件。代码主要采用C#、CSS、JavaScript和HTML语言编写，适用于甜品行业的在线展示和销售需求。
数字政府智慧政务大数据治理平台、大数据资源中心技术解决方案Word(266页).docx
09-28
数据治理是确保数据准确性、可靠性、安全性、可用性和完整性的体系和框架。它定义了组织内部如何使用、存储、保护和共享数据的规则和流程。数据治理的重要性随着数字化转型的加速而日益凸显，它能够提高决策效率、增强业务竞争力、降低风险，并促进业务创新。有效的数据治理体系可以确保数据在采集、存储、处理、共享和保护等环节的合规性和有效性。 数据质量管理是数据治理中的关键环节，它涉及数据质量评估、数据清洗、标准化和监控。高质量的数据能够提升业务决策的准确性，优化业务流程，并挖掘潜在的商业价值。随着大数据和人工智能技术的发展，数据质量管理在确保数据准确性和可靠性方面的作用愈发重要。企业需要建立完善的数据质量管理和校验机制，并通过数据清洗和标准化提高数据质量。 数据安全与隐私保护是数据治理中的另一个重要领域。随着数据量的快速增长和互联网技术的迅速发展，数据安全与隐私保护面临前所未有的挑战。企业需要加强数据安全与隐私保护的法律法规和技术手段，采用数据加密、脱敏和备份恢复等技术手段，以及加强培训和教育，提高安全意识和技能水平。 数据流程管理与监控是确保数据质量、提高数据利用率、保护数据安全的重要环节。有效的数据流程管理可以确保数据流程的合规性和高效性，而实时监控则有助于及时发现并解决潜在问题。企业需要设计合理的数据流程架构，制定详细的数据管理流程规范，并运用数据审计和可视化技术手段进行监控。 数据资产管理是将数据视为组织的重要资产，通过有效的管理和利用，为组织带来经济价值。数据资产管理涵盖数据的整个生命周期，包括数据的创建、存储、处理、共享、使用和保护。它面临的挑战包括数据量的快速增长、数据类型的多样化和数据更新的迅速性。组织需要建立完善的数据管理体系，提高数据处理和分析能力，以应对这些挑战。同时，数据资产的分类与评估、共享与使用规范也是数据资产管理的重要组成部分，需要制定合理的标准和规范，确保数据共享的安全性和隐私保护，以及建立合理的利益分配和权益保障机制。
html四宫格排列
05-27
您可以使用HTML和CSS来创建一个四宫格排列的布局。以下是一个简单的示例代码： HTML代码： ``` <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div> ``` CSS代码： ``` .grid-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; } .grid-item { background-color: #ccc; padding: 20px; font-size: 30px; text-align: center; } ``` 在上面的代码中，我们使用了CSS的Grid布局来创建四宫格排列。我们首先定义了一个包含四个子元素的父元素`div`，这些子元素将会被排列在四宫格布局中。然后，我们将父元素设置为`display: grid`，这样它就可以使用网格布局。接下来，我们定义了网格的列和行，使用`grid-template-columns`和`grid-template-rows`属性。在这个例子中，我们使用了两列和两行，每个单元格的大小将会自动计算为相等的1fr。我们还使用了`gap`属性来定义单元格之间的间距。最后，我们定义了每个单元格的样式，包括背景颜色、内边距和文本对齐方式。 通过这些代码，您可以创建一个简单的四宫格排列布局。您可以根据需要调整样式和单元格数量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值