菜单 搜索
首页 前端知识 html css网页制作成品——企业网站——HTML CSS JavaScript电子购物商城(37页面)

html css网页制作成品——企业网站——HTML CSS JavaScript电子购物商城(37页面)

2024-05-31 19:05:26 前端知识 前端哥 91 25 我要收藏

常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录🌰

  • 一、网页介绍📖
  • 一、网页效果🌌
  • 二、代码展示😈
    • 1.HTML结构代码 🧱
    • 2.CSS样式代码 🏠
  • 三、个人总结😊
  • 四、更多干货🚀

一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、代码展示😈

1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>麦路客商城-中国专业的网上销售女装、男装、童装、鞋子、配饰购物商城</title>
<meta name="description" content="麦路客商城-专业的网上购物服装商城，主要在线销售男装、女装、童装、鞋、配饰、短袖、T恤、背心、内衣、毛衣、衬衫、针织衫、羊毛衫、卫衣、外套、羽绒服、休闲裤、牛仔裤、袜子等让您随时享受舒心惬意的网购之旅，同时为您提供最新的时尚潮流资讯，为每一位用户提供最新时尚潮流的折扣商品，天天低价、支持货到付款、7天无理由退换货。" />
<meta name="keywords" content="麦路客商城,男装,女装,童装,鞋,家居,配饰,衬衫,衬衣,长袖衬衫,短袖衬衫,全棉,纯棉,百分百棉,100%棉,全棉衬衫,纯棉衬衫,全棉衬衣,纯棉衬衣,免烫,免熨,免烫衬衫,免熨衬衫,免烫衬衣,领尖扣,直领,T恤,,棉线衫,卫衣,外套,西服,休闲西服,毛衣,背心,毛背心,裤子,长裤,休闲裤,牛仔裤,短裤,鞋,凉鞋,皮鞋,板鞋,商务皮鞋,休闲皮鞋,内衣,内裤,秋衣,秋裤,三角裤,平角裤,领带,袜子,棉袜,拖鞋,打折" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/base.css" rel="stylesheet" type="text/css" />
<link href="css/personal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/public.js"></script>

<script type="text/javascript" src="js/user.js"></script>
<script type="text/javascript" src="js/share.js"></script>
</head>
<body>
<div class="side_con">
	<div class="l_m">
		<div class="f_l l_m_l">
			您好，欢迎来麦路客商城！<a href="login.html" class="huise">[登录]</a><a href="register.html" class="huise">[免费注册]</a>
		</div><!--l_m_l end-->
		<div class="f_r l_m_r">
			<ul class="clearfix">
				<li class="collect"><a onclick="bookmark();" href="javascript:void(0);">加入收藏</a></li>
				<li><a href="index.html">帮助中心</a></li>
				<li><a href="my-order.html" class="yellow">我的订单</a></li>
				<li class="my-mesaer">
					<a href="my-mesaer.html">我的麦路客<span class="arrow"></span></a>
					<ul id="my-list">
						<li><a href="my-order.html">我的订单</a></li>
						<li><a href="my-faq.html">我的问答</a></li>
						<li><a href="my-favorites.html">我的收藏</a></li>
						<li><a href="my-points.html">我的积分</a></li>
					</ul>
				</li>
			</ul>
		</div><!--l_m_r end-->
	</div><!--l_m end-->
</div><!--side_con end-->
<div class="header container">
	<div class="l_s">
		<a class="f_l logo" href="index.html"><img src="images/logo.gif" alt="麦路客商城" width="152" height="71" /></a>
		<div class="f_l l_s_l">
			<form method="post" action="" id="ui_element">
				<div class="f_l input_l"><input type="text" id="birds" class="sb_input text" value="" autocomplete="off" onkeydown="javascript:if(event.keyCode==13) search('key');"><ul id="tieslide"></ul></div>
				<div class="f_l input_r"><button type="submit" onclick="search('key');return false;">搜商品</button></div>
			</form>
		</div><!--l_s_l end-->
		<ul class="f_r l_s_r">
			<li class="icon_01"><a href="help/payment.html">货到付款</a></li><li class="icon_02"><a href="help/payment.html">支付宝支付</a></li><li class="icon_03"><a href="help/policy.html">7天退换</a></li><li class="icon_04"><a href="help/invoice-system.html">提供发票</a></li>
		</ul><!--l_s_r end-->
	</div><!--l_s end-->
	<div class="site-nav">
		<div class="floor_nav">
			<ul class="floors">
				<li id="floor_0"><a href="index.html" class="track">首页</a></li>
				<li id="floor_1"><a href="airplane.html" class="track">飞机模型</a></li>
				<li id="floor_2"><a href="women.html" class="track">女装</a></li>
				<li id="floor_3"><a href="man.html" class="track">男装</a></li>
				<li id="floor_4"><a href="shoes.html" class="track">鞋子</a></li>
				<li id="floor_5"><a href="bags.html" class="track">箱包</a></li>
				<li id="floor_6"><a href="discount.html" class="track">折扣积分</a></li>
				<li id="floor_7"><a href="sort.html" class="track">所有分类</a></li>
			</ul>
			<div class="buy_cart">
				<a class="gocart" href="cart.html">购物车<b class="yellow">312310</b>件</a>
				<a class="gopay" href="not-address.html">去结账</a>
			</div>
		</div><!--floor_nav end-->
		<div class="sub-floor-menus">
			<div class="menu" id="sub_floor_1">
				<div class="meun_sort">
					<div class="sort clearfix">
						<ul class="f_l sort_nav">
							<li>
								<dl>
									<dt><a href="#">垂直 ></a></dt>
									<dd><span><a href="#">直升机</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">滑跑 ></a></dt>
									<dd><span><a href="#">滑翔机</a></span><span><a href="#">三角翼</a></span><span><a href="#">仿真机</a></span><span><a href="#">战斗机</a></span><span><a href="#">旋翼机</a></span></dd>
								</dl>
							</li>
						</ul><!--sort_nav end-->
						<div class="f_l sort_pp">
							<h3>热门品牌</h3>
							<ul>
								<li><a href="#">JACKJONES</a><a href="#">九牧王</a><a href="#">七匹狼</a><a href="#">马克华菲</a><a href="#">稻草人</a><a href="#">TONYJEANS</a><a href="#">凡诺</a></li>
							</ul>
							<div class="blank10"></div>
							<h3>新品推荐</h3>
							<p align="center"><a href="#"><img src="images/polo.jpg" width="135" height="137" alt="美素活悦弹力系列" /></a></p>
						</div><!--sort_pp end-->
					</div><!--sort end-->
				</div><!--meun_sort end-->		
			</div><!--sub_floor_1 end-->
			<div class="menu" id="sub_floor_2">
				<div class="meun_sort">
					<div class="sort clearfix">
						<ul class="f_l sort_nav">
							<li>
								<dl>
									<dt><a href="#">上装 ></a></dt>
									<dd><span><a href="#">T恤</a></span><span><a href="#">背心</a></span><span><a href="#">长袖</a></span><span><a href="#">衬衫</a></span><span><a href="#">棉毛衫</a></span><span><a href="#">雪纺纱</a></span><span><a href="#">吊带衫</a></span><span><a href="#">针织衫</a></span><span><a href="#">毛衣</a></span><span><a href="#">风衣</a></span><span><a href="#">马甲</a></span><span><a href="#">大衣</a></span><span><a href="#">羽绒服</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">下装 ></a></dt>
									<dd><span><a href="#">牛仔裤</a></span><span><a href="#">休闲裤</a></span><span><a href="#">短裤</a></span><span><a href="#">运动裤</a></span><span><a href="#">裤子</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">裙子 ></a></dt>
									<dd><span><a href="#">连衣裙</a></span><span><a href="#">半身裙</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">袜子 ></a></dt>
									<dd><span><a href="#">丝袜</a></span><span><a href="#">短袜</a></span><span><a href="#">长袜</a></span></dd>
								</dl>
							</li>
						</ul><!--sort_nav end-->
						<div class="f_l sort_pp">
							<h3>热门品牌</h3>
							<ul>
								<li><a href="#">JACKJONES</a><a href="#">九牧王</a><a href="#">七匹狼</a><a href="#">马克华菲</a><a href="#">稻草人</a><a href="#">TONYJEANS</a><a href="#">凡诺</a></li>
							</ul>
							<div class="blank10"></div>
							<h3>新品推荐</h3>
							<p align="center"><a href="#"><img src="images/polo.jpg" width="135" height="137" alt="美素活悦弹力系列" /></a></p>
						</div><!--sort_pp end-->
					</div><!--sort end-->
				</div><!--meun_sort end-->	
			</div><!--sub_floor_2 end-->
			<div class="menu" id="sub_floor_3">
				<div class="meun_sort">
					<div class="sort clearfix">
						<ul class="f_l sort_nav">
							<li>
								<dl>
									<dt><a href="#">上装 ></a></dt>
									<dd><span><a href="#">T恤</a></span><span><a href="#">背心</a></span><span><a href="#">长袖</a></span><span><a href="#">衬衫</a></span><span><a href="#">棉毛衫</a></span><span><a href="#">针织衫</a></span><span><a href="#">毛衣</a></span><span><a href="#">马甲</a></span><span><a href="#">大衣</a></span><span><a href="#">羽绒服</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">下装 ></a></dt>
									<dd><span><a href="#">牛仔裤</a></span><span><a href="#">休闲裤</a></span><span><a href="#">短裤</a></span><span><a href="#">运动裤</a></span><span><a href="#">裤子</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">袜子 ></a></dt>
									<dd><span><a href="#">短袜</a></span><span><a href="#">长袜</a></span></dd>
								</dl>
							</li>
						</ul><!--sort_nav end-->
						<div class="f_l sort_pp">
							<h3>热门品牌</h3>
							<ul>
								<li><a href="#">JACKJONES</a><a href="#">九牧王</a><a href="#">七匹狼</a><a href="#">马克华菲</a><a href="#">稻草人</a><a href="#">TONYJEANS</a><a href="#">凡诺</a></li>
							</ul>
							<div class="blank10"></div>
							<h3>新品推荐</h3>
							<p align="center"><a href="#"><img src="images/polo.jpg" width="135" height="137" alt="美素活悦弹力系列" /></a></p>
						</div><!--sort_pp end-->
					</div><!--sort end-->
				</div><!--meun_sort end-->	
			</div><!--sub_floor_3 end-->
			<div class="menu" id="sub_floor_4">
				<div class="meun_sort">
					<div class="sort clearfix">
						<ul class="f_l sort_nav">
							<li>
								<dl>
									<dt><a href="#">男鞋 ></a></dt>
									<dd><span><a href="#">凉鞋</a></span><span><a href="#">单鞋</a></span><span><a href="#">家居鞋</a></span><span><a href="#">休闲鞋</a></span><span><a href="#">运动鞋</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">女鞋 ></a></dt>
									<dd><span><a href="#">凉鞋</a></span><span><a href="#">单鞋</a></span><span><a href="#">高跟鞋</a></span><span><a href="#">靴子</a></span><span><a href="#">家居鞋</a></span><span><a href="#">休闲鞋</a></span><span><a href="#">运动鞋</a></span></dd>
								</dl>
							</li>
						</ul><!--sort_nav end-->
						<div class="f_l sort_pp">
							<h3>热门品牌</h3>
							<ul>
								<li><a href="#">JACKJONES</a><a href="#">九牧王</a><a href="#">七匹狼</a><a href="#">马克华菲</a><a href="#">稻草人</a><a href="#">TONYJEANS</a><a href="#">凡诺</a></li>
							</ul>
							<div class="blank10"></div>
							<h3>新品推荐</h3>
							<p align="center"><a href="#"><img src="images/polo.jpg" width="135" height="137" alt="美素活悦弹力系列" /></a></p>
						</div><!--sort_pp end-->
					</div><!--sort end-->
				</div><!--meun_sort end-->	
			</div><!--sub_floor_4 end-->
			<div class="menu" id="sub_floor_5">
				<div class="meun_sort">
					<div class="sort clearfix">
						<ul class="f_l sort_nav">
							<li>
								<dl>
									<dt><a href="#">女包 ></a></dt>
									<dd><span><a href="#">单肩包</a></span><span><a href="#">斜挎包</a></span><span><a href="#">手提包</a></span><span><a href="#">钱包</a></span><span><a href="#">手包</a></span><span><a href="#">胸包</a></span><span><a href="#">手提/斜肩两用包</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">男包 ></a></dt>
									<dd><span><a href="#">公文包</a></span><span><a href="#">斜肩包</a></span><span><a href="#">钱包</a></span><span><a href="#">手包</a></span><span><a href="#">手提/斜肩两用包</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">电脑包 ></a></dt>
									<dd><span><a href="#">双肩电脑包</a></span><span><a href="#">手提电脑包</a></span><span><a href="#">相机包</a></span></dd>
								</dl>
							</li>
							<li>
								<dl>
									<dt><a href="#">旅行包 ></a></dt>
									<dd><span><a href="#">拉杆箱</a></span><span><a href="#">旅行包</a></span><span><a href="#">双肩包</a></span><span><a href="#">书包</a></span></dd>
								</dl>
							</li>
						</ul><!--sort_nav end-->
						<div class="f_l sort_pp">
							<h3>热门品牌</h3>
							<ul>
								<li><a href="#">JACKJONES</a><a href="#">九牧王</a><a href="#">七匹狼</a><a href="#">马克华菲</a><a href="#">稻草人</a><a href="#">TONYJEANS</a><a href="#">凡诺</a></li>
							</ul>
							<div class="blank10"></div>
							<h3>新品推荐</h3>
							<p align="center"><a href="#"><img src="images/polo.jpg" width="135" height="137" alt="美素活悦弹力系列" /></a></p>
						</div><!--sort_pp end-->
					</div><!--sort end-->
				</div><!--meun_sort end-->	
			</div><!--sub_floor_5 end-->
		</div><!--sub_floor_menus end-->
	</div><!--site-nav end-->
</div><!--header end-->
	
<div class="content container">
	<div class="breadcrumbs">
		<a href="index.html">首页</a><span>></span><a href="#">我的麦路客</a><span>></span>邀请好友
	</div><!--breadcrumbs end-->
	<div class="f_l personal_l">
		<h2><a href="my-mesaer.html" title="我的麦路客">我的麦路客</a></h2>
		<div class="personal_l_m" id="personal_list">
			<dl>
				<dt class="current"><div><b class="f_l"></b>帐户管理</div></dt>
				<dd>
					<a href="my-order.html">我的订单</a>
					<a href="my-points.html">我的积分</a>
					<a href="account-balance.html">账户余额</a>
					<a href="my-favorites.html">我的收藏夹</a>
					<a href="e-coupons.html">电子优惠券</a>
				</dd>
			</dl>
			<dl>
				<dt class="current"><div><b class="f_l"></b>个人信息管理</div></dt>
				<dd>
					<a href="edit-info.html">编辑个人信息</a>
					<a href="change-password.html">修改密码</a>
					<a href="modify-information.html">修改送货信息</a>
				</dd>
			</dl>
			<dl>
				<dt class="current"><div><b class="f_l"></b>推荐用户奖励积分</div></dt>
				<dd>
					<a href="invite-friends.html" class="current">邀请好友</a>
				</dd>
			</dl>
			<dl>
				<dt class="current"><div><b class="f_l"></b>商品评论与问答</div></dt>
				<dd>
					<a href="my-comments.html">我的评论</a>
					<a href="my-faq.html">我的问答</a>
				</dd>
			</dl>
		</div><!--personal_l_m end-->
		<div class="personal_l_b"></div>
	</div><!--personal_l end-->
	<div class="f_r personal_r">
		<div class="personal_r_t"></div>
		<div class="personal_r_m">
			<div class="personal_r_m_t">
				<h2>邀请好友</h2>
			</div><!--personal_r_m_t end-->
			<div class="personal_r_m_m invite">
				<div class="blank10"></div>
				
				<div class="tj_lp">
					<h3>麦路客商城，推荐有礼</h3>
					<p>亲爱的用户，您可以通过QQ、MSN、邮件等方式推荐好友到麦路客商城购物，分享这种便捷的购物方式。<br />
					如果被推荐的好友在7天内成功注册为麦路客商城会员，会员将获得<b class="yellow">10</b>个积分奖励。<br />
					多推荐、多奖励，还等什么？快快行动吧！<a href="#" class="blue">详细说明>></a></p>
				</div><!--tj_lp end-->
				
				<div class="blank10"></div>
				
				<div class="kj_tj">
					<div class="kj_tj_t"><h3>快捷推荐</h3></div>
					<div class="kj_tj_m">
						<div class="fuzhi">
							<ul>
								<li>复制链接发给QQ/MSN上的好友</li>
								<li>
									<div class="f_l dizhi"><input type="text" onclick="" value="京东网上商城现在很火啊，价格便宜服务也不错，我买了不少东西了，快来看看吧！http://www.360buy.com/?sid=q541374203&amp;t=1" id="txturl" name="" class="text" /></div>
									<div class="dizhi_btm f_l"><input  type="button" id="" name="" value="复制链接" class="yellow_btm yellow_btm_02" /></div>
								</li>
								<li class="share">
									<dl>
										<dt>分享到社区网站：</dt>
										<dd><a href="#" class="icon_01">人人网</a></dd>
										<dd><a href="#" class="icon_02">开心网</a></dd>
										<dd><a href="#" class="icon_03">豆瓣网</a></dd>
										<dd><a href="#" class="icon_04">QQ书签</a></dd>
									</dl>
								</li>
							</ul>		
						</div><!--fuzhi end-->
					</div>
				</div><!--kj_tj end-->
				
				<div class="blank10"></div>
				
				<div class="kj_tj">
					<div class="kj_tj_t"><h3>邮件推荐</h3></div>
					<div class="kj_tj_m">
						<div class="youjian">
							<table width="100%">
								<tbody>
									<tr>
										<td colspan="2">&nbsp;输入好友邮箱，我们将向您的好友发送推荐邮件：</td>
									</tr>
									<tr>
										<td width="11%" align="right">好友E-mail：</td>
										<td>
											<input type="text" class="text" id="" name=""><span style="color:Red; display:none;">请填写好友邮件</span>
											<span class="f_text">(多个请用“,”号隔开)</span><span style="color:Red; display:none;">邮件地址错误</span>
										</td>
									</tr>
									<tr>
										<td align="right">标题：</td>
										<td>
											<input type="text" value="嗨，我是，最近发现了一个好地方：京东网上商城，真的便宜！" class="text" id="" name="">
											<span style="color:Red; display:none;">请填写标题</span>
										</td>
									</tr>
									<tr>
										<td align="right">内容：</td>
										<td>
											<textarea disabled="disabled" class="l_text" id="" name="">京东商城(www.360buy.com)很不错啊，国内最大的3C为主的电子商务网站，全部正品行货、价格便宜，服务也不错，我已经买了好几件东西了，在这儿购物很放心，推荐你也来看看，一般人我还真不告诉他。立即进入：http://www.360buy.com?sid=q541374203&amp;t=2</textarea><span style="color:Red; display:none;">请填写内容</span>
										</td>
									</tr>
									<tr>
										<td></td>
										<td><input type="button" value="发送邮件" class="yellow_btm yellow_btm_02" id="" name="" /></td>
									</tr>
								</tbody>
							</table>
						</div><!--youjian end-->
					</div>
				</div><!--kj_tj end-->
			</div><!--comment end-->
		</div><!--personal_r_m end-->
		<div class="personal_r_b"></div>
	</div><!--personal_r end-->
	
	<div class="clear mb-10"></div>
	
</div><!--content end-->
	
<div class="footer container">
	<div class="service">
		<div class="cat_bg"></div>
		<div class="help_list clearfix">
			<dl>
				<dt>新手指南</dt>
				<dd><a href="help/index.html" target="_blank"><span>购物流程</span></a></dd>
				<dd><a href="help/account.html" target="_blank"><span>我的麦路客</span></a></dd>
				<dd><a href="help/common.html" target="_blank"><span>常见问题</span></a></dd>
				<dd><a href="register.html" target="_blank"><span>注册用户</span></a></dd>
				<dd><a href="forgot-password.html" target="_blank"><span>找回密码</span></a></dd>
			</dl>
			<dl>
				<dt>订单问题</dt>
				<dd><a href="help/order-status.html" target="_blank">订单状态</a></dd>
				<dd><a href="help/cancel-order.html" target="_blank">取消订单</a></dd>   
				<dd><a href="help/not-order.html" target="_blank">未达订单</a></dd> 
			</dl>
			<dl>
				<dt>会员积分</dt>
				<dd><a href="help/integral-rules.html" target="_blank">积分规则</a></dd>
				<dd><a href="help/integral.html" target="_blank">积分问题</a></dd> 
				<dd><a href="help/exchange-integral.html" target="_blank">积分兑换</a></dd>   
			</dl>
			<dl>
				<dt>如何付款/退款</dt>
				<dd><a href="help/payment.html" target="_blank">支付方式</a></dd>
				<dd><a href="help/wait-pay.html" target="_blank">支付等待</a></dd>
				<dd><a href="help/pay-issue.html" target="_blank">支付问题</a></dd>
				<dd><a href="help/refund.html" target="_blank">办理退款</a></dd>
				<dd><a href="help/invoice-system.html" target="_blank">发票制度</a></dd>        
			</dl>
			<dl>
				<dt>配送和收费</dt>
				<dd><a href="help/time-range.html" target="_blank">配送时间</a></dd> 
				<dd><a href="help/delivery-time.html" target="_blank">送达时间</a></dd> 
				<dd><a href="help/inspection-sign.html" target="_blank">验货与签收</a></dd> 
				<dd><a href="help/express.html" target="_blank">快递配送和收费</a></dd> 
				<dd><a href="help/ems.html" target="_blank">EMS配送和收费</a></dd>      
			</dl>
			<dl>
				<dt>售后服务</dt>
				<dd><a href="help/policy.html" target="_blank">退换货政策</a></dd>
				<dd><a href="help/apply-goods.html" target="_blank">如何办理退换货</a></dd>     
			</dl>
		</div>
	</div><!--service end-->
	<div class="copyright">
		<a href="help/about.html" target="_blank">关于麦路客</a><span>|</span><a href="help/contact.html" target="_blank">联系麦路客</a><span>|</span><a href="help/job.html" target="_blank">加入麦路客</a><span>|</span><a href="sort.html" target="_blank">网站地图</a><span>|</span><a href="help/complainting.html" target="_blank">投诉与建议</a><span>|</span><a href="help/links.html" target="_blank">友情链接</a><br />
		Copyright&nbsp;&nbsp;©&nbsp;&nbsp;2009-2011&nbsp;&nbsp;<a title="麦路客商城" href="http://www.mailuke.com/">www.mailuke.com</a>&nbsp;&nbsp;麦路客商城版权所有<span>|</span><a href="http://www.miibeian.gov.cn/" target="_blank">沪ICP备10031526号</a><br />
		<a href="#" target="_blank"><img src="images/beian.gif" width="128" height="47" alt="经营性网站备案中心" /></a><a href="#" target="_blank"><img src="images/trustA.gif" width="119" height="47" alt="A级-信用企业" /></a><a href="#" target="_blank"><img src="images/alipay.gif" width="123" height="40" alt="支付宝-特约商家" /></a>
	</div><!--copyright end-->
</div><!--footer end-->

<!-- plugin -->
<script type="text/javascript" src="js/lib.js"></script>
<!-- online -->
<script type="text/javascript" src="js/online.js"></script>
</body>
</html>

2.CSS样式代码 🏠


@charset "utf-8";
/*------------------ base ------------------*/
body{background:#fff; font-size:12px; font-family:Helvetica,Arial,sans-serif,"宋体"; line-height:150%;padding:0; color:#404040; margin:0;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strike, strong, sub, sup, tt, var,b, i, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,caption,th{border:0;font-style:normal;}
h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,img,p,tr,td{margin:0; padding:0; border:none; list-style-type:none;}
select, input, button, textarea {font-family:arial,helvetica,clean,sans-serif;font-size:99%;font-size-adjust:none;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal;}
label { cursor:pointer;}
img { vertical-align:middle;}
table{border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;font-family:"黑体";}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}
.container{width:980px;margin:0 auto;}
.content , .bottom , .header { padding:0px; height:auto;}
.clear {display:block; clear:both;}
.clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
a { color:#333; text-decoration:none;}
a:hover {color:#990000; text-decoration:underline;}
.area_l , .area_m , .f_l , .f_m {float:left;}
.area_r , .f_r {float:right;}
.white {color:#B8B8B8;}
.huise {color:#5a5a5a;}
.yellow { color:#ff6600;}
.red { color:#990000;}
.blue {color:#3366cc;}
.h_red {color:#990000;}
.load_img {background-image:url(../images/loading.gif);background-repeat:no-repeat;background-position:50% 50%;}
.descriptionhide{display:none;}
/*------------------ blank ------------------*/
.mb-10 {margin-bottom:10px;}
.blank5{height:5px; line-height:5px; clear:both; visibility:hidden;}
.blank10{height:10px; line-height:10px; clear:both; visibility:hidden;}
.blank20{height:20px; line-height:20px; clear:both; visibility:hidden;}
/*------------------ header style ------------------*/
.l_s_l , .l_s_l .input_l input , .l_s_r li , .l_m_r li.collect , .sb_down , .sb_up , .site-nav , .floor_nav  , .buy_cart , .l_m_r li.my-mesaer a span.arrow , .side_con , .btn-slide , .btn-slide.active{background:url(../images/top_bg.png) no-repeat;}
/* side_lm style */
.side_con {background-repeat:repeat-x;background-position:0 -240px;border-top:solid 2px #990000;height:30px;width:100%;position:relative;z-index:99;}
.btn-slide { position:absolute; top:8px; right:10px; width:42px; height:15px;overflow:hidden; cursor:pointer; background-position:-252px -208px;}
.btn-slide.active {background-position:-252px -222px;}
/* l_m style */
.l_m {height:30px;width:960px; margin:0 auto; position:relative;}
.l_m_l , .l_m_r { margin-top:6px; height:20px;}
.l_m_l {color:#000;}
.l_m_l a {margin:0 5px;}
.l_m_l a:hover {color:#ff6600;}
.l_m_r li {float:right;line-height:16px; border-right:solid 1px #ddd; padding:0 15px;}
.l_m_r li.collect { padding-right:0px;padding-left:18px;border-right:none;background-position:-270px -216px;margin-left:10px;display:inline;}
.l_m_r li.my-mesaer {position:relative; z-index:100;padding:0 10px;}
.l_m_r li.my-mesaer a { display:inline-block; position:relative; line-height:16px;padding-right:10px; color:#990000;}
.l_m_r li.my-mesaer a span.arrow {position:absolute; top:6px; right:0px; height:3px; width:5px; overflow:hidden; display:block; background-position:-245px -211px;}
.l_m_r li.hover { border:solid 1px #ddd; border-bottom:none; background:#fff;}
.l_m_r li.hover a span.arrow {background-position:-245px -234px;}
#my-list { position:absolute; top:16px; left:-1px; width:80px;border:solid 1px #ddd; border-top:none; background:#fff;padding:0 5px 5px 5px; display:none;}
#my-list li { float:none; border:none; line-height:20px;padding:0;}
#my-list li a { display:block;padding:0px; line-height:20px; color:#333; text-indent:10px;}
#my-list li a:hover { background:#990000; color:#fff; text-decoration:none;}
/* l_s */
.logo{margin-top:6px;}
.l_s {height:83px;padding:0 10px;}
.l_s_l { width:294px; height:46px;margin-left:120px; display:inline; margin-top:25px; position:relative;z-index:9;background-position:0 0;}
.l_s_l .input_l { margin-top:5px; *margin-top:4px; margin-left:10px; display:inline; height:30px;}
.l_s_l .input_l input {border:none; font-size:14px; color:#bbb; padding:5px 0 5px 15px; font-family:Arial; width:187px;}
.l_s_l .input_l .text {background-position:0 -210px;}
.l_s_l .input_l .focus_text {color:#990000; padding:5px 0 5px 0; width:202px; background:none;}
.l_s_l .input_l .blur_text { color:#999; background-position:0 -210px;} 
.l_s_l .input_r { width:80px; height:30px; position:relative; margin-top:2px;}
.l_s_l .input_r button { width:80px; height:30px; padding:0px; border:none; background:none; cursor:pointer; text-indent:-999em;position:absolute; top:0px; right:0px;}
.l_s_r {width:298px;margin-top:10px;}
.l_s_r li { height:64px; width:67px; overflow:hidden; float:right; margin-left:10px; display:inline;}
.l_s_r li a { display:block; height:64px; text-indent:-999em;}
.l_s_r li.icon_01 { background-position:0 -144px;}
.l_s_r li.icon_02 { background-position:-67px -144px;}
.l_s_r li.icon_03 { background-position:-134px -144px;}
.l_s_r li.icon_04 { background-position:-201px -144px;margin:0px;}
/* site_nav */
.site-nav {position:relative;z-index:8;background-position:-285px -144px;padding-left:8px;}
.floor_nav {background-position:0 -46px;background-repeat:repeat-x;height:49px;}
.floor_nav ul.floors {height:100%;float:left;}
.floor_nav ul.floors li {float:left;height:46px;}
.floor_nav ul.floors li a {display:block;height:46px;text-indent:-999em;width:82px;background:url(../images/meun_bg.png) no-repeat;}
.floor_nav ul.floors li#floor_0 a { background-position:5px 0;}
.floor_nav ul.floors li#floor_0 a.selected { background-position:5px -46px;}
.floor_nav ul.floors li#floor_0 a:hover { background-position:5px -46px;}
.floor_nav ul.floors li#floor_0 a.active { background-position:5px -46px;}
.floor_nav ul.floors li#floor_1 a { background-position:-78px 0;}
.floor_nav ul.floors li#floor_1 a.selected { background-position:-78px -46px;}
.floor_nav ul.floors li#floor_1 a:hover { background-position:-78px -46px;}
.floor_nav ul.floors li#floor_1 a.active { background-position:-78px -92px;}
.floor_nav ul.floors li#floor_2 a { background-position:-161px 0;}
.floor_nav ul.floors li#floor_2 a.selected { background-position:-161px -46px;}
.floor_nav ul.floors li#floor_2 a:hover { background-position:-161px -46px;}
.floor_nav ul.floors li#floor_2 a.active { background-position:-161px -92px;}
.floor_nav ul.floors li#floor_3 a { background-position:-244px 0;}
.floor_nav ul.floors li#floor_3 a.selected { background-position:-244px -46px;}
.floor_nav ul.floors li#floor_3 a:hover { background-position:-244px -46px;}
.floor_nav ul.floors li#floor_3 a.active { background-position:-244px -92px;}
.floor_nav ul.floors li#floor_4 a { background-position:-327px 0;}
.floor_nav ul.floors li#floor_4 a.selected { background-position:-327px -46px;}
.floor_nav ul.floors li#floor_4 a:hover { background-position:-327px -46px;}
.floor_nav ul.floors li#floor_4 a.active { background-position:-327px -92px;}
.floor_nav ul.floors li#floor_5 a { background-position:-410px 0;}
.floor_nav ul.floors li#floor_5 a.selected { background-position:-410px -46px;}
.floor_nav ul.floors li#floor_5 a:hover { background-position:-410px -46px;}
.floor_nav ul.floors li#floor_5 a.active { background-position:-410px -92px;}
.floor_nav ul.floors li#floor_6 a { background-position:-492px 0; width:93px;}
.floor_nav ul.floors li#floor_6 a.selected { background-position:-492px -46px;}
.floor_nav ul.floors li#floor_6 a:hover { background-position:-492px -46px;}
.floor_nav ul.floors li#floor_6 a.active { background-position:-492px -46px;}
.floor_nav ul.floors li#floor_7 a { background-position:-586px 0; width:93px;}
.floor_nav ul.floors li#floor_7 a.selected { background-position:-586px -46px;}
.floor_nav ul.floors li#floor_7 a:hover { background-position:-586px -46px;}
.floor_nav ul.floors li#floor_7 a.active { background-position:-586px -46px;}
.sub-floor-menus div.menu {margin:0;padding:0;position:absolute;top:30px;z-index:6;display:none;left:0px;}
.buy_cart {background-position:100% -95px;float:right;width:182px;height:22px;line-height:22px;padding:13px 30px;}
.buy_cart .gocart{float:left;color:#5e5e5e;}
.buy_cart .gopay{float:right;color:#fff;font-weight:800;}
.meun_sort {background:#fff; border-right:solid 2px #c2adab; border-bottom:solid 2px #c2adab; width:426px;/*filter:alpha(opacity=95);opacity:0.95;*/-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.2);box-shadow:3px 3px 3px rgba(0,0,0,0.2);}
.sort {border:solid 3px #990000; border-top:none; width:420px;background:url(../images/meun-repeat-y.gif) repeat-y right 0;}
.sort_nav { background:#fff; width:220px; padding:10px 0 5px 10px;}
.sort_nav li {background:url(../images/pixels.png) repeat-x 0 0;}
.sort_nav li dl{padding:6px 0;overflow:hidden;zoom:1;}
.sort_nav li dl dt {float:left;width:54px;line-height:28px;}
.sort_nav li dl dd {float:left;width:165px;}
.sort_nav li dl dd span {float:left;height:14px;margin:7px 0;line-height:14px;padding:0 8px;border-left:1px solid #F1E3E3;}
.sort_nav li dl dt a {color:#990000;font-weight:800;}
.sort_nav li dl dd a {white-space:nowrap;}
.sort_pp { width:150px;padding:10px 20px 0 20px;}
.sort_pp {padding-bottom:10px;}
.sort_pp h3 {height:24px; border-bottom:solid 1px #f1e3e3; font-weight:800;font-size:12px;}
.sort_pp li a { display:inline-block;padding-right:10px;padding-top:5px;}
/*------------------ online ------------------*/
.online_hover .div_meun .t , .online_hover .div_meun .b , .online_hover .div_meun .m , .online .div_tit {background:url(../images/online.png) no-repeat;}
.online {width:27px;position:fixed!important;position:absolute;left:0px;top:-1000px;z-index:9999;}
.online .div_tit {background-position:0 0; height:161px;overflow:hidden;cursor:pointer;}
.online .div_meun {display:none;}
.online_hover{width:110px;position:fixed!important;position:absolute;}
.online_hover .div_meun {display:block;}
.online_hover .div_meun .t {background-position:-27px 0; height:34px;}
.online_hover .div_meun .b {background-position:-27px -156px; height:5px; overflow:hidden;}
.online_hover .div_meun .m {background-position:-137px 0; background-repeat:repeat-y;width:110px;}
.online_hover .div_meun .infobox {color:#000; font-weight:800; line-height:16px; padding:5px; text-align:center;}
.online_hover .div_meun .con {padding-bottom:10px;}
.online_hover .div_meun .con li {padding:5px 5px 0 15px;}
/* footer */
.service {border-top:solid 2px #850000; border-bottom:solid  1px #ccc; position:relative; background:url(../images/bottom.png) repeat-x 0 -177px;}
.service .cat_bg {position:absolute; top:15px; left:20px; height:177px; width:179px; background:url(../images/bottom.png) no-repeat;}
.help_list { border-left:solid 1px #ccc; border-right:solid 1px #ccc;border-bottom:solid 1px #990000; padding-left:250px;padding-bottom:40px;text-align:left; padding-top:9px;}
.help_list dl {float:left;}
.help_list dl dt {font-size:12px;font-weight:bold;line-height:28px; border-bottom:dotted 1px #ccc;padding-left:14px;padding-right:40px;margin-bottom:8px;white-space:nowrap;}
.help_list dl dd {line-height:24px;padding-left:14px;}
.help_list dl dd a {white-space:nowrap;}
.copyright{line-height:32px;text-align:center;color:#666;margin-top:5px;padding-bottom:20px;}
.copyright a{color:#666;}
.copyright span{margin:0px 20px;}
.copyright img{margin:10px 15px 0 15px;}
/* tieslide */
#tieslide{position:absolute;top:29px;left:2px;width:208px;border-left:1px solid #990000;border-bottom:1px solid #990000;border-right:1px solid #990000;background:#fff;overflow:hidden;display:none;}
#tieslide li{float:left;width:204px;overflow:hidden;padding:1px 2px;cursor:pointer;}
#tieslide li:hover{background:#FFFF99;}
#tieslide div{float:left;width:120px;overflow:hidden;}
#tieslide span{float:right;font-size:11px;color:#CC0000;}
#tieslide .close{border-top:1px solid #efefef;text-align:right;}
/*--------------- breadcrumbs -----------------*/
.breadcrumbs {padding:8px 10px 0 10px;height:26px;}
.breadcrumbs a {color:#990000;text-decoration:none;font-weight:bold;}
.breadcrumbs a:hover {color:#990000;text-decoration:underline;}
.breadcrumbs span {margin:0px 10px;font-family:"宋体";}
/*--------------- liulan style -----------------*/
.liulan_t {height:25px; overflow:hidden; background:url(../images/liuliang_bg.png) no-repeat; padding:7px 10px 0 10px;}
.liulan_t h3 { font-size:12px;}
.liulan_product {border:solid 1px #e6e6e6;border-top:none;padding-bottom:5px;}
.liulan_product li {padding:5px 5px 0 5px; text-indent:0px;}
.liulan_product li img{float:left;margin-right:5px;display:inline;}
.liulan_product li span { display:block;}

.p_img { padding:1px; border:solid 1px #e0e0e0;}
.p_img_hover { padding:1px; border:solid 1px #990000;}
/* retop */
.retop{position:fixed;bottom:10px;_position:absolute;display:block;width:25px;height:69px;background-image:url(../images/topback.png);background-repeat:no-repeat;background-position:0 0;text-indent:-9em;overflow:hidden;}
/* page_list */
.page_list { float:right;}		
.page_list a {border:1px solid #ccc;display:inline-block;padding:0 6px; margin-right:4px; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.page_list span { margin:0 4px;}
.page_list a:hover , .page_list a.cur {border:solid 1px #990000;text-decoration:none;}
/* star style */
/* big */
.rate-point-b {background:url(../images/stars-show-b.gif) no-repeat;color:#FF6600;height:24px;padding-left:135px;vertical-align:middle; display:inline-block;font-weight:bold;font-family:Arial;}
.point-01 {background-position:0 0;}
.point-02 {background-position:0 -25px}
.point-03 {background-position:0 -50px}
.point-04 {background-position:0 -75px}
.point-05 {background-position:0 -100px}
.point-06 {background-position:0 -125px}
.point-07 {background-position:0 -150px}	
.point-08 {background-position:0 -175px;}
.point-09 {background-position:0 -200px;}
/* small */
.rate-point-s {background:url(../images/stars-show-s.gif) no-repeat;height:13px;line-height:13px;overflow:hidden;text-align:left;display:inline-block;font-family:Arial;padding-left:67px;color:#ff6600;}
.point5s-01 {background-position:0 0;}
.point5s-02 {background-position:0 -12px;}
.point5s-03 {background-position:0 -24px;}
.point5s-04 {background-position:0 -37px;}
.point5s-05 {background-position:0 -49px;}
.point5s-06 {background-position:0 -62px;}
.point5s-07 {background-position:0 -74px;}
.point5s-08 {background-position:0 -87px;}
.point5s-09 {background-position:0 -100px;}	
/* yellow_button style */
.yellow_button {background:url(../images/yellow_button.png);border:none;cursor:pointer;height:36px;line-height:36px; overflow:hidden; display:inline-block; text-align:center; font-size:14px; font-weight:800; color:#fff;}
.yellow_button_01 {background-position:0 0;width:76px;}
.yellow_button_02 {background-position:0 -36px;width:94px;}
.yellow_button_03 {background-position:0 -72px;width:139px;}

三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
  5. 要有JS特效，如定时切换和手动切换图片新闻；
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
  7. 页面清爽、美观、大方，不雷同。
  8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

转载请注明出处或者链接地址：https://www.qianduange.cn//article/10134.html
标签
静态网页设计报告课程模板实训
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

JQuery-JavaScript代码库-遍历篇—我耀学IT

2024-06-06 00:06:31

html()和text()和val()方法、attr()和prop()方法

2024-06-06 00:06:08

用点jquery实现的登录页面

2024-06-06 00:06:07

如何在textarea中插入提示文本

2024-06-06 00:06:06

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

Vue Echarts实现中国疫情地图

2024-06-06 00:06:59

vue项目中使用echarts和china.js实现中国地图

2024-06-06 00:06:56

echarts地图移动缩放卡顿问题

2024-06-06 00:06:56

Vue 开发中的一些问题简单记录，Cannot find module ‘webpack/lib/RuleSet‘

2024-06-06 00:06:49

大家推荐的文章
1

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
2

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
3

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
4

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
5

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
6

UE4.27支持HTML5

2024-05-07 13:05:261000
7

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
8

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
9

jQuery事件处理

2024-03-12 01:03:321000
10

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！