使用HTML設計商城首頁

時間  2020-05-10
標籤 使用 html 設計 商城 首頁 欄目 HTML 简体版
原文   原文鏈接

網站首頁

需求分析

根據產品文檔,完成商城首頁,顯示效果如圖html

技術分析

表格標籤table網站

table標籤
經常使用的屬性:spa

  • bgcolor : 背景色
  • width : 寬度
  • height : 高度
  • align : 對齊方式

tr 標籤
td 標籤code

合併單元格:htm

  • colspan : 跨列操做
  • rowspan : 跨行操做
    注意: 跨行或者跨列操做以後,被佔掉的格子須要刪除掉

表格的嵌套:在td中能夠嵌套一個表格
經常使用的屬性:
width="100%"填充blog

步驟分析

  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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程