目录
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型:
一、网页概述
购物商城网页设计实例，应用html+css+js：选项卡、下拉菜单、图片轮翻效果、购物车、视频、悬浮菜单、注册页面、登录页面、搜索等。适用于大学生网页课程作业设计、商城网页制作等，供大家参考。支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含10个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script>
$(function(){
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body,.div1').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
</script>
</head>
<body class="index">
<div class="top_ad"><div class="w1200"><a href="#" id="close"></a></div></div>
<div class="top">
<div class="w1200">
<div class="left">您好，欢迎光临xx！<a href="#">[登录]</a> <a href="#">[注册]</a></div>
<div class="right"><a href="#">我的会员中心</a>|<a href="#">收藏夹</a>|<a href="#">服务中心</a>|<a href="#">在线客服</a>|<a href="#">购物车<b>0</b>件</a></div>
<div class="clear"></div>
</div>
</div>
<div class="head">
<div class="w1200">
<div class="search">
<form action="#" class="form">
<input type="text" value="输入商品关键字" name="keyword" class="txt" οnfοcus="if(value=='输入商品关键字') {value=''}" οnblur="if(value=='') {value='输入商品关键字'}"/>
<input type="submit" value="搜索" class="sub"/>
</form>
<p><a href="#">iphone6s</a>|<a href="#">面膜</a>|<a href="#">婚庆床品</a>|<a href="#">运动鞋</a>|<a href="#">眼霜</a>|<a href="#">月饼</a>|<a href="#">智能手机</a>|<a href="#">连衣裙</a></p>
</div>
<div class="s_r">
<dl>
<dt><p>购物车<span>0</span></p></dt>
<dd>客服电话：<b>400-xxx-xxx</b></dd>
</dl>
</div>
<div class="clear"></div>
</div>
</div>
<div class="menu">
<div class="w1200">
<div class="item" id="nav"><a href="#" class="nav">全部商品分类</a>
<div class="nav_son">
<ul>
<li class="li01"><a href="#">功能产品</a></li>
<li class="li02"><a href="#">服装箱包</a></li>
<li class="li03"><a href="#">美妆护肤</a></li>
<li class="li04"><a href="#">珠宝饰品</a></li>
<li class="li05"><a href="#">数码家电</a></li>
<li class="li06"><a href="#">食品茶酒</a></li>
<li class="li07"><a href="#">运动体育</a></li>
<li class="li08"><a href="#">家居家纺</a></li>
<li class="li09"><a href="#">生活服务</a></li>
<li class="li10"><a href="#">其他</a></li>
</ul>
<div class="hover">
<div id="son">
<dl>
<dt>手机</dt>
<dd><a href="#">全部手机</a><a href="#" class="red">小米</a><a href="#">iPhone</a><a href="#">华为</a><a href="#">三星</a><a href="#">魅族</a><a href="#">PPTV</a><a href="#">一加</a><a href="#">OPPO</a><a href="#">vivo</a><a href="#">联想</a><a href="#">美图</a><a href="#">乐视</a><a href="#">奇酷</a><a href="#">大神</a><a href="#">努比亚</a><a href="#">锤子</a><a href="#">HTC</a><a href="#">诺基亚</a></dd>
<div class="clear"></div>
</dl>
<dl>
<dt>手机配件</dt>
<dd><a href="#">全部手机</a><a href="#" class="red">小米</a><a href="#">iPhone</a><a href="#">华为</a><a href="#">三星</a><a href="#">魅族</a><a href="#">PPTV</a><a href="#">一加</a><a href="#">OPPO</a><a href="#">vivo</a><a href="#">联想</a><a href="#">美图</a><a href="#">乐视</a><a href="#">奇酷</a><a href="#">大神</a><a href="#">努比亚</a><a href="#">锤子</a><a href="#">HTC</a><a href="#">诺基亚</a></dd>
<div class="clear"></div>
</dl>
<dl>
<dt>摄像摄影</dt>
<dd><a href="#">全部手机</a><a href="#" class="red">小米</a><a href="#">iPhone</a><a href="#">华为</a><a href="#">三星</a><a href="#">魅族</a><a href="#">PPTV</a><a href="#">一加</a><a href="#">OPPO</a><a href="#">vivo</a><a href="#">联想</a><a href="#">美图</a><a href="#">乐视</a><a href="#">奇酷</a><a href="#">大神</a><a href="#">努比亚</a><a href="#">锤子</a><a href="#">HTC</a><a href="#">诺基亚</a></dd>
<div class="clear"></div>
</dl>
<dl>
<dt>数码配件</dt>
<dd><a href="#">全部手机</a><a href="#" class="red">小米</a><a href="#">iPhone</a><a href="#">华为</a><a href="#">三星</a><a href="#">魅族</a><a href="#">PPTV</a><a href="#">一加</a><a href="#">OPPO</a><a href="#">vivo</a><a href="#">联想</a><a href="#">美图</a><a href="#">乐视</a><a href="#">奇酷</a><a href="#">大神</a><a href="#">努比亚</a><a href="#">锤子</a><a href="#">HTC</a><a href="#">诺基亚</a></dd>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
/*---------- base ---------*/
*{
padding:0px;
margin:0px;
}
html{
background:#fff;-webkit-text-size-adjust:none;
}
body{
font-size:12px;
font-family:"微软雅黑";
background:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;color:#333;
}
img{
border:none;
}
a{
color:#256EB1;
text-decoration:none;
}
a:hover{
color:#ba2636;
text-decoration:underline;
}
ul{
list-style:none;
}
input,select,button{
font:12px;
vertical-align:middle;
}
font{font-size:12px}
a { transition:all 0.2s ease-out; -webkit-transition:all 0.3s ease-out; text-decoration:none; blr:expression(this.onFocus=this.blur());word-break:break-all;}
a { outline:none;}
.r{float:right}
.l{float:left}
img{border:0;}
a{text-decoration:none}
a:link{color:#000}
a:visited{color:#000}
a:hover{color:#dc1515;text-decoration:none}
a:active{color:#000}
.clear{clear:both;height:0px;overflow:hidden;*display:inline;_display:inline;line-height:0}
li,ul{margin:0;padding:0;list-style:none}
dl,dd,dt,p{margin:0;padding:0}
.bootom10{margin-bottom:10px}
.top10{margin-top:10px}
.border{border:1px solid #d9d9d9}
input,button{border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;background:none; outline:none}
.w1185{width:1185px;margin:0 auto;position:relative}
.w1200{width:1200px;margin:0 auto}
.w1201{width:1201px;margin:0 auto}
.index .top_ad{width:100%;height:79px;background:url(../images/home/ico05.jpg) no-repeat center top}
.index .top_ad a{float:right;margin-top:4px;width:19px;height:19px;background:url(../images/home/ico06.png) no-repeat center top;cursor:pointer;display:inline-block}
.index .top{height:35px;line-height:35px;background:#f6f6f6;border-bottom:1px solid #f1f1f1}
.index .top .left{float:left;color:#848484}
.index .top .left a{color:#0094df}
.index .top .right {float:right;color:#848484}
.index .top .right a{margin:0 8px;color:#848484}
.index .top .right b{color:#ee1c25;margin:0 2px}
.index .top a:hover{text-decoration:underline}
.index .head .logo{float:left;width:415px;height:80px;background:url(../images/home/logo.jpg) no-repeat;margin:38px 0px 0 0}
.index .head .logo a{display:inline-block;width:415px;height:80px;}
.index .head .search{float:left;margin:50px 0 0 35px}
.index .head .search form{height:46px}
.index .head .search .txt{float:left;color:#999;border:1px solid #dedede;border-right:none;width:415px;height:43px;float:left;padding:0 5px;border-radius:3px 0 0 3px;font-weight:bold}
.index .head .search .sub{background:#ea3c1f;float:left;width:95px;height:45px;line-height:42px;color:#fff;font-weight:bold;font-size:16px;cursor:pointer}
.index .head .search p{color:#aaa;margin-top:5px}
.index .head .search p a{color:#aaa;margin:0 8px}
.index .head .search p a:hover{color:#ea3c1f}
.index .head .s_r{float:right;margin-top:50px}
.index .head .s_r dl dt{background:url(../images/home/ico08.png) no-repeat 20px center #f9f9f9;border:1px solid #dedede;width:95px;height:45px;line-height:45px;padding-left:50px;position:relative;font-size:16px;margin-left:43px}
.index .head .s_r dl dt p{background:url(../images/home/ico09.png) no-repeat 70px center;}
.index .head .s_r dl dt p span{display:inline-block;width:15px;height:20px;line-height:15px;color:#fff;background:url(../images/home/ico07.png) no-repeat;top:-10px;position:absolute;text-align:center;font-size:12px;right:20px}
.index .head .s_r dl dd{background:url(../images/home/ico10.png) no-repeat left center;padding-left:15px;margin-top:15px;color:#000}
.index .head .s_r dl dd b{color:#ea3c1f;font-size:16px}
.menu{width:100%;height:45px;line-height:45px;background:#404145;z-index:999;position:relative;color:#ddd;margin-top:25px}
.menu .item{float:left;text-align:center;position:relative;border-right:1px solid #6a6b6e}
.menu .item a{color:#fff;font-size:16px;position:relative;display:inline-block;width:159px;font-weight:lighter}
.menu .item a:hover,.menu .item a.on{color:#e83426;}
.menu .item a.home{background:url(../images/home/ico11.jpg) no-repeat 30px center;padding-left:10px;width:149px}
.menu .item a.nav{width:204px;background:url(../images/home/ico12.jpg) no-repeat 60px center #e83426;padding-left:30px}
.banner{height:450px; display:block; position:relative;z-index:1}
.banner .w_auto{position:relative; z-index:1;}
.banner ul {height:450px; position:absolute; top:0; left:0; width:100%; display:block;}
.banner ul li{position:absolute; width:100%; top:0; left:0; height:450px; overflow:hidden; display:none;}
.banner ul li a{display:block; height:450px;}
.banner .point{ height:15px; position:absolute; display:block; left:47%; top:430px; z-index:1}
.banner .point span{width:43px; text-indent:-9999px; cursor:pointer; height:4px;color:#fff;display:inline; float:left; margin-right:10px;background:#a89fc7}
.banner .point span:hover, .banner .point span.on{background:#e83426;}
.menu .item a.nav{color:#fff}
.menu .item .nav_son{position:absolute;top:45px;left:0;background:#fff;width:234px;min-height:350px;display:none;z-index:99;position:relative;top:0}
.menu .item .nav_son li{line-height:43px;}
.menu .item .nav_son li a{display:inline-block;border-bottom:1px solid #d35f64;background:#c63239;line-height:44px;padding-left:100px;text-align:left;width:134px}
.menu .item .nav_son .li01 a{background:url(../images/home/ico41.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li02 a{background:url(../images/home/ico42.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li03 a{background:url(../images/home/ico43.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li04 a{background:url(../images/home/ico44.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li05 a{background:url(../images/home/ico45.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li06 a{background:url(../images/home/ico46.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li07 a{background:url(../images/home/ico47.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li08 a{background:url(../images/home/ico48.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li09 a{background:url(../images/home/ico49.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li10 a{background:url(../images/home/ico40.png) no-repeat 60px center #c63239}
.menu .item .nav_son .li01 a:hover{background:url(../images/home/ico41b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li02 a:hover{background:url(../images/home/ico42b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li03 a:hover{background:url(../images/home/ico43b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li04 a:hover{background:url(../images/home/ico44b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li05 a:hover{background:url(../images/home/ico45b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li06 a:hover{background:url(../images/home/ico46b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li07 a:hover{background:url(../images/home/ico47b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li08 a:hover{background:url(../images/home/ico48b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li09 a:hover{background:url(../images/home/ico49b.png) no-repeat 60px center #fff}
.menu .item .nav_son .li10 a:hover{background:url(../images/home/ico40b.png) no-repeat 60px center #fff}
.menu .item .nav_son li a:hover{text-decoration:underline;color:#404145}
...
3.JS
代码如下（节选示例）：
//popup.js
(function(){
var ptype=1;
function setcookie(cName,cExpires)
{
var zbj_ad_pop_cookie_time;
try
{
zbj_ad_pop_cookie_time = parseFloat(cExpires) * 1;
}
catch(e)
{
zbj_ad_pop_cookie_time = 60*60;
}
if(isNaN(zbj_ad_pop_cookie_time))
zbj_ad_pop_cookie_time = 60*60;
var then = new Date();
then.setTime(then.getTime() + zbj_ad_pop_cookie_time*1000);
document.cookie=cName+'=1;expires='+ then.toGMTString()+';path=/;';
}
function upcookie(cname,ctime){
setcookie(cname,ctime);
}
var state=0;
;(function(){
var d=navigator.userAgent;
var a={};
a.ver={
ie:/MSIE/.test(d),
ie6:!/MSIE 7\.0/.test(d)&&/MSIE 6\.0/.test(d)&&!/MSIE 8\.0/.test(d),
tt:/TencentTraveler/.test(d),
i360:/360SE/.test(d),
sogo:/; SE/.test(d),
gg:window.google&&window.chrome,
_v1:'<object id="p01" width="0" height="0" classid="CLSID:6BF5'+'2A52-394'+'A-1'+'1D3-B15'+'3-00'+'C04F'+'79FAA6"></object>',
_v2:'<object id="p02" style="position:absolute;left:1px;top:1px;width:1px;height:1px;" classid="clsid:2D'+'360201-FF'+'F5-11'+'d1-8D0'+'3-00A'+'0C95'+'9BC0A"></object>'
};
if(a.ver.ie||a.ver.tt){
document.write(a.ver._v1);document.write(a.ver._v2);
}
a.fs=null;a.fdc=null;a.timeid=0;a.first=1;a.url='';a.w=0;a.h=0;
a.init=function(){
try{
if(typeof document.body.οnclick=="function"){
a.fs=document.body.onclick;document.body.οnclick=null
}
if(typeof document.οnclick=="function"){
if(document.onclick.toString().indexOf('clickpp')<0){
a.fdc=document.onclick;document.οnclick=function(){
a.clickpp(a.url,a.w,a.h)
}
}
}
}catch(q){}
};
a.donepp=function(c,g){
if (g==1 && (!a.ver.i360 && a.ver.ie6)) return;
if (state) return;
try{
document.getElementById("p01").launchURL(c);state=1;upcookie(zbj_ad_pop_cookie_name,zbj_ad_pop_cookie_time)
}catch(q){}
};
a.clickpp=function(c,e,f){
a.open(c,e,f);clearInterval(a.timeid);document.οnclick=null;
if(typeof a.fdc=="function") try{document.οnclick=a.fdc}catch(q){}
if(typeof a.fs=="function") try{document.body.οnclick=a.fs}catch(q){}
}
a.open=function(c,e,f){
if (state) return;
a.url=c;a.w=e;a.h=f;
if (a.timeid==0) a.timeid=setInterval(a.init,100);
var b='height='+f+',width='+e+',left=0,top=0,toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes';
var j='window.open("'+c+'", "_blank", "'+b+'")';
var m=null;
try{m=eval(j)}catch(q){}
if(m && !(a.first && a.ver.gg)){
if (ptype!=-1){m.focus();}else{m.blur();window.focus();}
state=1;upcookie(zbj_ad_pop_cookie_name,zbj_ad_pop_cookie_time);
if(typeof a.fs=="function") try{document.body.οnclick=a.fs}catch(q){}
clearInterval(a.timeid);
}else{
var i=this, j=false;
if(a.ver.ie||a.ver.tt){
document.getElementById("p01");document.getElementById("p02");
setTimeout(function(){
var obj=document.getElementById("p02");
if (state || !obj) return;
try{
var wPop=obj.DOM.Script.open(c,"_blank",b);
if (wPop){
if (ptype!=-1){wPop.focus();}else{wPop.blur();window.focus();}
state=1;upcookie(zbj_ad_pop_cookie_name,zbj_ad_pop_cookie_time);
}else if (a.ver.sogo){state=1;upcookie(zbj_ad_pop_cookie_name,zbj_ad_pop_cookie_time);}
}catch(q){}},200);
}
if (a.first){
a.first=0;
try{if(typeof document.οnclick=="function") a.fdc=document.onclick}catch(p){}
document.οnclick=function(){i.clickpp(c,e,f)};
if (a.ver.ie){
if (window.attachEvent) window.attachEvent("onload", function(){i.donepp(c,1);});
else if (window.addEventListener) window.addEventListener("load", function(){i.donepp(c,1);},true);
else window.οnlοad=function(){i.donepp(c,1);};
}
}
}
};
a.getCookie=function(name){
var cookie=document.cookie;
if(!name){
return cookie;
}else{
var pattern="(?:; )?" + name + "=([^;]*);?";
var rege=new RegExp(pattern);
if(rege.test(cookie)){
return decodeURIComponent(RegExp["$1"]);
}
}
};
window.zbj_ad_pop=a;
})();
})();
var zbj_ad_pop_cookie_name="zbj_ad_pop_cookie_name";
var zbj_ad_pop_cookie_time=24*3600;
//以上广告代码结束
//jquery.1.4.2-min.js
(function(p,j){function u(){if(!c.isReady){try{v.documentElement.doScroll("left")}catch(a){setTimeout(u,1);return}c.ready()}}function t(a,b){b.src?c.ajax({url:b.src,async:false,dataType:"script"}):c.globalEval(b.text||b.textContent||b.innerHTML||"");b.parentNode&&b.parentNode.removeChild(b)}function o(a,b,e,g,f,l){var k=a.length;if(typeof b==="object"){for(var s in b)o(a,s,b[s],g,f,e);return a}if(e!==j){g=!l&&g&&c.isFunction(e);for(s=0;s<k;s++)f(a[s],b,g?e.call(a[s],s,f(a[s],b)):e,l);return a}return k?
f(a[0],b):j}function z(){return(new Date).getTime()}function G(){return false}function U(){return true}function R(a,b,e){e[0].type=a;return c.event.handle.apply(b,e)}function S(a){var b,e=[],g=[],f=arguments,l,k,s,m,r,y;k=c.data(this,"events");if(!(a.liveFired===this||!k||!k.live||a.button&&a.type==="click")){a.liveFired=this;var B=k.live.slice(0);for(m=0;m<B.length;m++){k=B[m];k.origType.replace(da,"")===a.type?g.push(k.selector):B.splice(m--,1)}l=c(a.target).closest(g,a.currentTarget);r=0;for(y=
l.length;r<y;r++)for(m=0;m<B.length;m++){k=B[m];if(l[r].selector===k.selector){s=l[r].elem;g=null;if(k.preType==="mouseenter"||k.preType==="mouseleave")g=c(a.relatedTarget).closest(k.selector)[0];if(!g||g!==s)e.push({elem:s,handleObj:k})}}r=0;for(y=e.length;r<y;r++){l=e[r];a.currentTarget=l.elem;a.data=l.handleObj.data;a.handleObj=l.handleObj;if(l.handleObj.origHandler.apply(l.elem,f)===false){b=false;break}}return b}}function L(a,b){return"live."+(a&&a!=="*"?a+".":"")+b.replace(/\./g,"`").replace(/ /g,
"&")}function Z(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function ea(a,b){var e=0;b.each(function(){if(this.nodeName===(a[e]&&a[e].nodeName)){var g=c.data(a[e++]),f=c.data(this,g);if(g=g&&g.events){delete f.handle;f.events={};for(var l in g)for(var k in g[l])c.event.add(this,l,g[l][k],g[l][k].data)}}})}function fa(a,b,e){var g,f,l;b=b&&b[0]?b[0].ownerDocument||b[0]:v;if(a.length===1&&typeof a[0]==="string"&&a[0].length<512&&b===v&&!Ca.test(a[0])&&(c.support.checkClone||!Da.test(a[0]))){f=
true;if(l=c.fragments[a[0]])if(l!==1)g=l}if(!g){g=b.createDocumentFragment();c.clean(a,b,g,e)}if(f)c.fragments[a[0]]=l?g:1;return{fragment:g,cacheable:f}}function T(a,b){var e={};c.each(Ea.concat.apply([],Ea.slice(0,b)),function(){e[this]=a});return e}function V(a){return"scrollTo"in a&&a.document?a:a.nodeType===9?a.defaultView||a.parentWindow:false}var c=function(a,b){return new c.fn.init(a,b)},oa=p.jQuery,J=p.$,v=p.document,N,K=/^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$=
/^(\s|\u00A0)+|(\s|\u00A0)+$/g,Ya=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,ga=navigator.userAgent,Fa=false,ha=[],aa,pa=Object.prototype.toString,qa=Object.prototype.hasOwnProperty,ra=Array.prototype.push,ia=Array.prototype.slice,Ga=Array.prototype.indexOf;c.fn=c.prototype={init:function(a,b){var e,g;if(!a)return this;if(a.nodeType){this.context=this[0]=a;this.length=1;return this}if(a==="body"&&!b){this.context=v;this[0]=v.body;this.selector="body";this.length=1;return this}if(typeof a==="string")if((e=K.exec(a))&&
(e[1]||!b))if(e[1]){g=b?b.ownerDocument||b:v;if(a=Ya.exec(a))if(c.isPlainObject(b)){a=[v.createElement(a[1])];c.fn.attr.call(a,b,true)}else a=[g.createElement(a[1])];else{a=fa([e[1]],[g]);a=(a.cacheable?a.fragment.cloneNode(true):a.fragment).childNodes}return c.merge(this,a)}else{if(b=v.getElementById(e[2])){if(b.id!==e[2])return N.find(a);this.length=1;this[0]=b}this.context=v;this.selector=a;return this}else if(!b&&/^\w+$/.test(a)){this.selector=a;this.context=v;a=v.getElementsByTagName(a);return c.merge(this,
a)}else return!b||b.jquery?(b||N).find(a):c(b).find(a);else if(c.isFunction(a))return N.ready(a);if(a.selector!==j){this.selector=a.selector;this.context=a.context}return c.makeArray(a,this)},selector:"",jquery:"1.4.2",length:0,size:function(){return this.length},toArray:function(){return ia.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this.slice(a)[0]:this[a]},pushStack:function(a,b,e){var g=c();c.isArray(a)?ra.apply(g,a):c.merge(g,a);g.prevObject=this;g.context=this.context;if(b===
"find")g.selector=this.selector+(this.selector?" ":"")+e;else if(b)g.selector=this.selector+"."+b+"("+e+")";return g},each:function(a,b){return c.each(this,a,b)},ready:function(a){c.bindReady();if(c.isReady)a.call(v,c);else ha&&ha.push(a);return this},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(ia.apply(this,arguments),"slice",ia.call(arguments).join(","))},map:function(a){return this.pushStack(c.map(this,
function(b,e){return a.call(b,e,b)}))},end:function(){return this.prevObject||c(null)},push:ra,sort:[].sort,splice:[].splice};c.fn.init.prototype=c.fn;c.extend=c.fn.extend=function(){var a=arguments[0]||{},b=1,e=arguments.length,g=false,f,l,k,s;if(typeof a==="boolean"){g=a;a=arguments[1]||{};b=2}if(typeof a!=="object"&&!c.isFunction(a))a={};if(e===b){a=this;--b}for(;b<e;b++)if((f=arguments[b])!=null)for(l in f){k=a[l];s=f[l];if(a!==s)if(g&&s&&(c.isPlainObject(s)||c.isArray(s))){k=k&&(c.isPlainObject(k)||
c.isArray(k))?k:c.isArray(s)?[]:{};a[l]=c.extend(g,k,s)}else if(s!==j)a[l]=s}return a};c.extend({noConflict:function(a){p.$=J;if(a)p.jQuery=oa;return c},isReady:false,ready:function(){if(!c.isReady){if(!v.body)return setTimeout(c.ready,13);c.isReady=true;if(ha){for(var a,b=0;a=ha[b++];)a.call(v,c);ha=null}c.fn.triggerHandler&&c(v).triggerHandler("ready")}},bindReady:function(){if(!Fa){Fa=true;if(v.readyState==="complete")return c.ready();if(v.addEventListener){v.addEventListener("DOMContentLoaded",
aa,false);p.addEventListener("load",c.ready,false)}else if(v.attachEvent){v.attachEvent("onreadystatechange",aa);p.attachEvent("onload",c.ready);var a=false;try{a=p.frameElement==null}catch(b){}v.documentElement.doScroll&&a&&u()}}},isFunction:function(a){return pa.call(a)==="[object Function]"},isArray:function(a){return pa.call(a)==="[object Array]"},isPlainObject:function(a){if(!a||pa.call(a)!=="[object Object]"||a.nodeType||a.setInterval)return false;if(a.constructor&&!qa.call(a,"constructor")&&
!qa.call(a.constructor.prototype,"isPrototypeOf"))return false;var b;for(b in a);return b===j||qa.call(a,b)},isEmptyObject:function(a){for(var b in a)return false;return true},error:function(a){throw a;},parseJSON:function(a){if(typeof a!=="string"||!a)return null;a=c.trim(a);if(/^[\],:{}\s]*$/.test(a.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,"@").replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]").replace(/(?:^|:|,)(?:\s*\[)+/g,"")))return p.JSON&&p.JSON.parse?p.JSON.parse(a):
(new Function("return "+a))();else c.error("Invalid JSON: "+a)},noop:function(){},globalEval:function(a){if(a&&ka.test(a)){var b=v.getElementsByTagName("head")[0]||v.documentElement,e=v.createElement("script");e.type="text/javascript";if(c.support.scriptEval)e.appendChild(v.createTextNode(a));else e.text=a;b.insertBefore(e,b.firstChild);b.removeChild(e)}},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,b,e){var g,f=0,l=a.length,k=l===j||c.isFunction(a);
if(e)if(k)for(g in a){if(b.apply(a[g],e)===false)break}else for(;f<l;){if(b.apply(a[f++],e)===false)break}else if(k)for(g in a){if(b.call(a[g],g,a[g])===false)break}else for(e=a[0];f<l&&b.call(e,f,e)!==false;e=a[++f]);return a},trim:function(a){return(a||"").replace($,"")},makeArray:function(a,b){b=b||[];if(a!=null)a.length==null||typeof a==="string"||c.isFunction(a)||typeof a!=="function"&&a.setInterval?ra.call(b,a):c.merge(b,a);return b},inArray:function(a,b){if(b.indexOf)return b.indexOf(a);for(var e=
0,g=b.length;e<g;e++)if(b[e]===a)return e;return-1},merge:function(a,b){var e=a.length,g=0;if(typeof b.length==="number")for(var f=b.length;g<f;g++)a[e++]=b[g];else for(;b[g]!==j;)a[e++]=b[g++];a.length=e;return a},grep:function(a,b,e){for(var g=[],f=0,l=a.length;f<l;f++)!e!==!b(a[f],f)&&g.push(a[f]);return g},map:function(a,b,e){for(var g=[],f,l=0,k=a.length;l<k;l++){f=b(a[l],l,e);if(f!=null)g[g.length]=f}return g.concat.apply([],g)},guid:1,proxy:function(a,b,e){if(arguments.length===2)if(typeof b===
"string"){e=a;a=e[b];b=j}else if(b&&!c.isFunction(b)){e=b;b=j}if(!b&&a)b=function(){return a.apply(e||this,arguments)};if(a)b.guid=a.guid=a.guid||b.guid||c.guid++;return b},uaMatch:function(a){a=a.toLowerCase();a=/(webkit)[ \/]([\w.]+)/.exec(a)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(a)||/(msie) ([\w.]+)/.exec(a)||!/compatible/.test(a)&&/(mozilla)(?:.*? rv:([\w.]+))?/.exec(a)||[];return{browser:a[1]||"",version:a[2]||"0"}},browser:{}});ga=c.uaMatch(ga);if(ga.browser){c.browser[ga.browser]=true;
c.browser.version=ga.version}if(c.browser.webkit)c.browser.safari=true;if(Ga)c.inArray=function(a,b){return Ga.call(b,a)};N=c(v);if(v.addEventListener)aa=function(){v.removeEventListener("DOMContentLoaded",aa,false);c.ready()};else if(v.attachEvent)aa=function(){if(v.readyState==="complete"){v.detachEvent("onreadystatechange",aa);c.ready()}};(function(){c.support={};var a=v.documentElement,b=v.createElement("script"),e=v.createElement("div"),g="script"+z();e.style.display="none";e.innerHTML=" <link/><table></table><a href='/a' style='color:red;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
