目录
一、更多推荐
二、网页简介
三、网页文件
四、网页效果
五、代码展示
1.html
2.CSS
3.JS
六、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
一、更多推荐
欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html+css+js： 导航菜单、图片轮翻、无缝滚动插件、鼠标滑动图片特效、悬浮图标、等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含9个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
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>高端炫酷IT网络建站公司网站模板</title>
<meta name="description" content="网站描述" />
<meta name="keywords" content="关键词" />
<meta name="author" content="order by" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<link rel="stylesheet" type="text/css" href="style/css/style_2_common.css" />
<link rel="stylesheet" type="text/css" href="style/css/style_2_portal_index.css" />
<script src="style/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="style/js/common.js" type="text/javascript"></script>
<script src="style/js/pace.js" type="text/javascript"></script>
<link href="style/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body id="nv_portal" class="pg_index">
<div id="append_parent"></div>
<div id="ajaxwaitid"></div>
<div id="toptb" class="cl" style="display:none;"> </div>
<div id="hd" style="background:#FFF; height:60px; border-bottom:1px solid #E6E6E6; ">
<div class="clear"></div>
<div id="week_nav">
<div class="wk_navwp">
<div class="wk_lonav">
<div class="wk_logo">
<h2><a href="index.html" title=""></a></h2>
</div>
<div class="wk_inav">
<ul class="nav">
<li><a href="index.html">网站首页</a></li>
<li><a href="about.html" >关于我们</a></li>
<li><a href="news.html" >新闻资讯</a></li>
<li><a href="case.html" >项目案例</a></li>
<li><a href="wenti.html" >常见问题</a></li>
<li><a href="contact.html" >联系我们</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="mu" class="cl">
<div class="wp"> </div>
</div>
<script src="style/js/week_nav.js" type="text/javascript"></script>
<div id="wp" class="wp">
<script src="style/js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="style/js/jquery.fullpage.min.js" type="text/javascript"></script>
<script src="style/js/scoll.js" type="text/javascript"></script>
<script src="style/js/addons.js" type="text/javascript"></script>
<script src="style/js/case.js" type="text/javascript"></script>
<script src="style/js/tab.lib.js" type="text/javascript"></script>
<script type="text/javascript">
PTM(document).ready(function(){
PTM(".wk_about").tab({
tabId:"#wk_about_menu",tabTag:"a",conId:"#wk_about_div",conTag:"div.wk_aaa",act:"mouseover",effact: "scrollx",dft:0
});
});
</script>
</div>
<div class="clear"></div>
<div class="wk_index_main">
<!--page1-->
<div class="section page1">
<div class="wk_slide-wrap">
<ul>
<li id="wk_s1" class="wk_selected">
<div class="wk_banner"></div>
<div class="wk_wrap">
<div class="wk_banner13"><img src="style/images/banner13.png" alt="" /></div>
<div class="wk_banner12"><img src="style/images/banner12.png" alt="" /></div>
<div class="wk_banner14"><img src="style/images/banner14.png" alt="" /></div>
</div>
</li>
<li id="wk_s2">
<div class="wk_banner"></div>
<div class="wk_wrap">
<div class="wk_banner22"><img src="style/images/banner22.png" alt="" /></div>
<div class="wk_banner23"><img src="style/images/banner23.png" alt="" /></div>
<div class="wk_banner24"><a href="#" target="_blank">了解更多</a></div>
</div>
</li>
<li id="wk_s3">
<div class="wk_banner"></div>
<div class="wk_wrap">
<div class="wk_banner32"><img src="style/images/banner32.png" alt="" /></div>
<div class="wk_banner33"><img src="style/images/banner33.png" alt="" /></div>
</div>
</li>
</ul>
</div>
<div class="wk_arrow"><a href="#service"><img src="style/images/ico3.png" /></a></div>
<div class="wk_slide-nav-wrap">
<div id="wk_slide-nav">
<ul>
<li class="wk_nav-line"></li>
<li class="wk_nav-bullet-container active" data-index="0"><a class="nav-link" href="javascript:void(0)">
<div class="nav-bullet"></div>
<div class="nav-text">高端定制开发</div>
</a></li>
<li class="wk_nav-line"></li>
<li class="wk_nav-bullet-container" data-index="1"><a class="nav-link" href="javascript:void(0)">
<div class="nav-bullet"></div>
<div class="nav-text">互联网整合营销</div>
</a></li>
<li class="wk_nav-line"></li>
<li class="wk_nav-bullet-container" data-index="2"><a class="nav-link" href="javascript:void(0)">
<div class="nav-bullet"></div>
<div class="nav-text">响应式网站</div>
</a></li>
<li class="wk_nav-line"> </li>
</ul>
</div>
</div>
</div>
<!--page2-->
<div class="section page2">
<div class="wk_fwxm">
<ul>
<li class="wk_li1">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>高端网站设计制作</h2>
<p>DESIGN CUSTOM</p>
<div class="wk_fwxm_des">团队凭借多年的行业经验为企业量身定制，让您的企业在残酷的网络竞争中脱颖而出，立于不败之地。</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
<li class="wk_li2">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>网络运营与推广</h2>
<p>NETWORK OPERATIONS</p>
<div class="wk_fwxm_des">专注于高品质网络品牌运营推广服务，在网络中树立企业品牌形象，提高搜索关键词转换率，以及多终端广告展现！</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
<li class="wk_li3">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>HTML5响应式网站开发</h2>
<p>RESPONSIVE WEBSITE</p>
<div class="wk_fwxm_des">HTML5+CSS3设计制作的同时兼容手机和IPAD等触屏设备分辨率，达到最优访问效果，网站数据同步各终端。</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
<li class="wk_li4">
<div class="wk_fwxm_bg"></div>
<div class="wk_fwxm_main">
<div class="wk_fwxm_ico"></div>
<h2>移动端手机网站与APP</h2>
<p>MOBILE WEBSITE</p>
<div class="wk_fwxm_des">专注移动端手机网站设计、微网站、手机APP定制开发，创造有活力的品牌网站，在移动互联网市场中取得先机。</div>
<div class="wk_ljzx"><a href="contact.html" target="_blank">立即咨询</a></div>
</div>
</li>
</ul>
</div>
</div>
<!--page3-->
<div class="section page3">
<div class="case">
<h2><img src="style/images/case_title.png" alt="" /></h2>
<h2 class="wk_h2"><img src="style/images/case_title1.png" alt="" /></h2>
<div class="wk_btndiv"> <a class="abtn aleft" href="javascript:void(0);"></a> <a class="abtn aright" href="javascript:void(0);"></a> </div>
<div class="wk_scrollcontainer">
<ul>
<li>
<div class="wk_case_list"> <a href="caseshow.html" target="_blank" title="Jackery app">
<div class="wk_case_img"><img src="uploads/1-1F31G05F1913-lp.jpg" width="275" height="190" alt="Jackery app"/></div>
<div class="wk_case_ico"></div>
<div class="wk_case_xian"> <span class="wk_span_1"></span> <span class="wk_span_2"></span> <span class="wk_span_3"></span> <span class="wk_span_4"></span> </div>
</a> </div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
.dede_pages {
text-align: center;
display: block;
width: 100%;
max-width: 800px;
margin: 0px auto 20px;
overflow: hidden;
}
.dede_pages ul {
padding: 9px 0px 9px 16px;
text-align: center;
}
.dede_pages ul li {
float: left;
font-family: Tahoma;
line-height: 28px;
margin-right: 6px;
padding: 0px 8px;
list-style: none;
border: 1px solid #ccc;
}
.dede_pages ul li select {
height: 28px;
width: 50px;
line-height: 28px;
text-align: center;
}
.dede_pages ul li a {
float: left;
color: #555;
display: block;
padding: 0px 8px;
line-height: 28px;
}
.dede_pages ul li a:hover {
color: #690;
text-decoration: none;
line-height: 28px;
padding: 0px 8px;
}
.dede_pages ul li.thisclass, .dede_pages ul li.thisclass a, .pagebox ul li.thisclass a:hover {
background-color: #F8F8F8;
padding: 0px 8px 0px;
font-weight: bold;
}
.dede_pages .pageinfo {
line-height: 28px;
padding: 12px 10px 12px 16px;
color: #999;
}
...
3.JS
代码如下（节选示例）：
//导航固定
var FixedBox=function(el){
this.element=el;
this.BoxY=getXY(this.element).y;
}
FixedBox.prototype={
setCss:function(){
var windowST=(document.compatMode && document.compatMode!="CSS1Compat")? document.body.scrollTop:document.documentElement.scrollTop||window.pageYOffset;
if(windowST>this.BoxY){
this.element.style.cssText="position:fixed;top:0px;width:100%;z-index:110;left:0px;padding:0px;margin-top:0;opacity:1;background:#FFF;border-bottom:0;box-shadow:0px 2px 5px 0px rgba(0,0,0,.15);";
}else{
this.element.style.cssText="";
}
}
};
//添加事件
function addEvent(elm, evType, fn, useCapture) {
if (elm.addEventListener) {
elm.addEventListener(evType, fn, useCapture);
return true;
}else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
}
else {
elm['on' + evType] = fn;
}
}
//获取元素的XY坐标；
function getXY(el) {
return document.documentElement.getBoundingClientRect && (function() {//取元素坐标，如元素或其上层元素设置position relative
var pos = el.getBoundingClientRect();
return { x: pos.left + document.documentElement.scrollLeft, y: pos.top + document.documentElement.scrollTop };
})() || (function() {
var _x = 0, _y = 0;
do {
_x += el.offsetLeft;
_y += el.offsetTop;
} while (el = el.offsetParent);
return { x: _x, y: _y };
})();
}
//实例化；
var divA=new FixedBox(document.getElementById("week_nav"));
addEvent(window,"scroll",function(){
divA.setCss();
});
...
六、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
