文章目录🌰
- 一、网页介绍📖
- 一、网页效果🌌
- 二、代码展示😈
- 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&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.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;}三、个人总结😊
一套合格的网页应该包含(具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
- 所有页面相互超链接，可到三级页面，有5-10个页面组成；
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
- 菜单美观、醒目，二级菜单可正常弹出与跳转；
- 要有JS特效，如定时切换和手动切换图片新闻；
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
- 页面清爽、美观、大方，不雷同。
- 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
