HTML——52.布局淘宝网

时间sk2025-01-03 19:17

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片布局淘宝首页</title>
	</head>
	<body>
		 <header style="width: 1000px; margin: 0 auto;">
			<div><img src="images/zxw_01.gif"/></div>
			<nav><img src="images/zxw_02.gif"/></nav>
		</header>
		<div class="content"  style="width: 1000px; margin: 0 auto;">
			<img src="images/zxw_03.gif"/>
			<img src="images/zxw_04.gif"/>
			<img src="images/zxw_05.gif"/>
			<img src="images/zxw_06.gif"/>
			<img src="images/zxw_07.gif"/>
			<img src="images/zxw_08.gif"/>
			<img src="images/zxw_09.gif"/>
		</div>
		
		<footer style="width: 1000px; margin: 0 auto;">
			<img src="images/zxw_10.jpg"/>
	</footer>
	
	</body>
</html>


布局元素是用来承载内容，对页面进行分区块，如果那些新标签实在记不住咋用，那就用传统方式的div标签也是可以的

用图片布局淘宝网首页，这节，就是提前把淘宝网首页给截屏下来。按头部，内容，尾部截分成若干图片。然后用新布局标签按原网页布局就好。类似与拼图游戏