html编写购物网站页面练习（二）

最新推荐文章于 2023-07-27 16:11:39 发布

py_006

最新推荐文章于 2023-07-27 16:11:39 发布

阅读量1w

点赞数 20

CC 4.0 BY-SA版权

分类专栏：购物网页制作文章标签： html

本文链接：https://blog.youkuaiyun.com/py_1995/article/details/82774129

此次在练习一的基础上进行完善实现图片的轮番播放及地区的选择

index.html网页主页

<!DOCTYPE html>
<html>
<head>
	<title>Document</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="index.css">
	<script type="text/javascript" src="index.js"></script>
</head>
<body>
	<!-- 页面结构划分 -->
	<div id="container">
		<!-- 1.导航 -->
		<div id="nav">
			<!-- 1.1右侧导航 -->
			<ul class="rightNav">
				<li>
					<a href="#">[登录]</a>
					，
					<a href="#">[注册，有惊喜]</a>
				</li>
				<li>
					<b></b>
					<a href="#">果园公告</a>
				</li>
				<li>
					<b></b>
					<a href="#">券卡兑换</a>
				</li>
				<li>
					<b></b>
					<a href="#">手机果园</a>
				</li>
			</ul>

			<!-- 1.2左侧导航 -->
			<ol class="leftNav">
				<li class="address">
					<span class="currentAddress">上海</span>     <!-- 用于修改显示地区信息 -->
					<!-- 左侧导航的三角标 -->
					<u></u>
					<!-- 地区下拉列表 -->
					<ul class="select">
						<li>北京</li>
						<li>广州</li>
						<li>深圳</li>
					</ul>
				</li>
				<li>满百包邮(含郊区)</li>
				<li>星夜达</li>
			</ol>
		</div>
		<!-- 2.横幅 -->
		<div id="banner">
			<!-- 图片轮播 -->
			<div class="wrapper">
				<img src="1-270x270-2163-8PBW628F.jpg">
				<img src="banner1.jpg">
				<img src="banner2.jpg">
				<img src="banner1.jpg">
			</div>
			<ul class="imgNav">
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">4</a></li>
			</ul>
		</div>
		<!-- 3.今日推荐 -->
		<div id="adv">
			<a href="">
				<img src="25af37592bf484fbeaef1cc4

最低0.47元/天解锁文章