大一Web课程设计：企业网站——HTML+CSS+JavaScript电子购物商城(37页面)
原创大一Web课程设计：企业网站——HTML+CSS+JavaScript电子购物商城(37页面)
原创
IT司马青衫
发布于 2022-08-14 10:14:32
发布于 2022-08-14 10:14:32
文章被收录于专栏：html5期末大作业
常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。
@TOC
一、网页介绍📖
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&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"> 输入好友邮箱，我们将向您的好友发送推荐邮件：</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&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 © 2009-2011 <a title="麦路客商城" href="http://www.mailuke.com/">www.mailuke.com</a> 麦路客商城版权所有<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看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。<hr>
# 💂【源码获取】
1.点击 公众号`【免费源码】`菜单-即可获取部分免费源码 <br/>
2.点击 公众号`【自助下载】`菜单-即可24小时自助下载(🔥推荐)<br/>
3.点击 公众号`【联系作者】`菜单-如遇问题及时联系作者<br/>
注:成品不是免费,对于白嫖的同学,我们免费送`【800套html学习模板】`和`【web前端学习视频资料】`,有基础的同学可以自行修改, 可`点击公众号【免费源码】菜单`免费获取! <br/>);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;}三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；undefined
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
💂【获取方式】
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
腾讯云开发者
