目录
欢迎来到我的优快云主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：
5000+完整代码，主题涵盖30+种类型:
一、网页概述
本实例应用html+css+js： Div、导航栏、三级菜单、无缝滚动插件、图片轮翻效果、鼠标滑动特效等。适用于大学生网页课程作业设计、公司网页制作等，供大家参考。支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含9个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
<title>天能物业管理</title>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/hm.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<!--头部-->
<div class="top_bg" id="top_bg">
<div class="top_gang">
<div class="tou_zj">
<div class="hy">
<img src="images/tou_tb_03.png">
<span>欢迎来到贵州天能物业管理有限公司</span>
</div>
<div class="soucang">
<a href="#">设为首页 </a>｜
<a href="#"> 加入收藏</a>
</div>
</div>
</div>
<div class="top_main">
<div class="top_logo">
<a href='./'></a>
</div>
<!--导航-->
<div class="daohang">
<div class="header_nav">
<div class="main clearBoth">
<ul class="nav right">
<li class="narrow_wrap">
<a class="nav_btn" href="index.html">
网站首页
<b></b>
</a>
</li>
<li class="narrow_wrap">
<a class="nav_btn" href="about.html">
关于我们
<b></b>
<div></div>
</a>
<div class="service_nav hide_nav hide_nav_narrow none" style="opacity: 0;">
<ul>
<li>
<a href="#">公司简介</a>
</li>
<li>
<a href="#">公司文化</a>
</li>
<li>
<a href="#">领导致辞</a>
</li>
<li>
<a href="#">服务理念</a>
</li>
<li>
<a href="#">企业荣誉</a>
</li>
</ul>
</div>
</li>
<li class="narrow_wrap">
<a class="nav_btn" href="products.html">
项目展示
<b></b>
<div></div>
</a>
<div class="service_nav hide_nav hide_nav_narrow none" style="opacity: 0;">
<ul>
<li>
<a href="#">经典案例</a>
</li>
<li>
<a href="#">公司项目</a>
</li>
</ul>
</div>
</li>
<li class="narrow_wrap">
<a class="nav_btn" href="javascript:;">
公司动态
<b></b>
</a>
<div class="about_us_nav hide_nav hide_nav_narrow none" style="opacity: 0;">
<ul>
<li>
<a href="#">公司新闻</a>
</li>
<li>
<a href="#">行业新闻</a>
</li>
<li>
<a href="#">公司大事记</a>
</li>
</ul>
</div>
</li>
<li class="narrow_wrap">
<a class="nav_btn" href="javascript:;">
人才招聘
<b></b>
</a>
</li>
<li class="narrow_wrap">
<a class="nav_btn" href="javascript:;">
联系我们
<b></b>
</a>
<div class="about_us_nav hide_nav hide_nav_narrow none" style="opacity: 0;">
<ul>
<li>
<a href="#">在线留言</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--大图-->
<div class="main_yin">
<div class="mianc" id="mianc">
<!-- html -->
<div class="ck-slide">
<ul class="ck-slide-wrapper">
<li>
<a href="javascript:"><img src="images/datu_02.jpg" alt=""></a>
</li>
<li style="display:none">
<a href="javascript:"><img src="images/datu_1_03.jpg" alt=""></a>
</li>
<li style="display:none">
<a href="javascript:"><img src="images/datu_02.jpg" alt=""></a>
</li>
</ul>
<div id="baanner_jt">
<a href="javascript:;" class="ctrl-slide ck-prev">上一张</a>
<a href="javascript:;" class="ctrl-slide ck-next">下一张</a>
</div>
<div class="ck-slidebox">
<div class="slideWrap">
<ul class="dot-wrap">
<li class="current"><em>1</em></li>
<li><em>2</em></li>
<li><em>3</em></li>
</ul>
</div>
</div>
</div>
<!-- js -->
<!--<script src="js/slide.min.js"></script>-->
<script src="js/slide.js"></script>
<script>
$('.ck-slide').ckSlide({
autoPlay: true,//默认为不自动播放，需要时请以此设置
dir: 'x',//默认效果淡隐淡出，x为水平移动，y 为垂直滚动
interval:3000//默认间隔2000毫秒
});
</script>
</div>
</div>
<!--内容部分-->
<div class="nr_bufen_1">
<div class="nr_bufen_1_jz">
<div class="biaoti">
<p>项目展示<span>Project presentation</span></p>
</div>
<div class="xiangmu_nr" id="demoo">
<div id="indemo">
<div id="demoo1">
<ul>
<li class="xiangmu_1">
<a href="#"><img src="images/xiangmu_03.jpg"></a>
<a href="#"><h4>达博圆</h4></a><span>电力职工医院项目外观，项目外观。</span>
</li>
<li class="xiangmu_1">
<a href="#"><img src="images/xiangmu_05.jpg"></a>
<a href="#"><h4>达博圆</h4></a><span>电力职工医院项目外观，项目外观。</span>
</li>
<li class="xiangmu_1">
<a href="#"><img src="images/xiangmu_07.jpg"></a>
<a href="#"><h4>达博圆</h4></a><span>电力职工医院项目外观，项目外观。</span>
</li>
<li class="xiangmu_1">
<a href="#"><img src="images/xiangmu_03.jpg"></a>
<a href="#"><h4>达博圆</h4></a><span>电力职工医院项目外观，项目外观。</span>
</li>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
*{padding:0px; margin:0px;}
a {text-decoration:none;}
li{ list-style:none;}
body{ font-size:12px; font-family:"微软雅黑"; background-position:center top; background-color:#fff;}
/*公司简介*/
.ziye_bj{width: 100%; height: 281px;margin:114px 0 0;float: left; }
.ziye_tu{width:1920px; position: relative;left: 50%;margin-left: -960px;}
.zy_gywm{width:1200px; margin:0 auto; overflow: auto; padding: 25px 0 0 0;}
.ejdh{background: #f4f5f5;width: 218px;height: 665px; border: solid 1px #e7e7e7; float: left; border-radius: 3px;}
.shang_g{background: #005bac;width: 218px;height: 7px; border-radius:3px 3px 0 0;}
.women{width: 172px;height: 55px; margin: 15px 0 0 20px;}
.btmc{width: 100%; height: 53px;}
.btmc h1{float: left; color: #ff8400; font-size: 48px; line-height: 48px; font-weight: 400; margin: 0 8px 0 3px; }
.btmc p{float: left; color: #005bac; font-size: 22px; line-height: 24px; padding: 2px 0 0 0;}
.btmc p span{display: block; font-size: 16px; color: #9c9c9c;text-transform: uppercase}
.skb{width: 100%; height: 2px;}
.skb li{float: left; height: 2px;}
.touyin{width: 19px; background: url(../images/zy1_05.png) no-repeat; float: left; height: 482px;}
.zy_dh_lb{width: 172px; margin: 40px 0 0 20px;}
.zy_dh_lb li{width:100%; height: 37px; border-bottom:dashed 1px #b9baba;margin: 8px 0 0 0;}
.zy_dh_lb li img{float: left;margin: 9px 5px 0 5px; }
.zy_dh_lb li a{line-height: 38px;font-size: 16px; color: #403f3f; display: block;}
#women{background: #005bac;}
#wenzidangq{color: #fff;}
.zynr_db{width: 908px; border: solid 1px #e7e7e7;height: 615px; float: right; background: #f4f5f5; border-radius: 3px; padding: 25px;}
.lujing{width: 100%;height: 50px;}
.lujing h2{float: left; color: #005bac; font-size: 20px; line-height: 40px; margin: 10px 0 0 0;}
.lujing p{ line-height: 40px; float: right; padding-right: 5px; font-size: 14px; font-family: "宋体"; margin: 10px 0 0 0;}
.gsjj_nr{}
.gsjj_nr p{color: #1f1f1f; line-height: 30px; font-size: 14px; font-family: "宋体";}
/*项目展示*/
...
3.JS
代码如下（节选示例）：
/*! jQuery v1.7.1 jquery.com | jquery.org/license */
(function( window, undefined ) {
// Use the correct document accordingly with window argument (sandbox)
var document = window.document,
navigator = window.navigator,
location = window.location;
var jQuery = (function() {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// A central reference to the root jQuery(document)
rootjQuery,
// A simple way to check for HTML strings or ID strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
// Check if a string has a non-whitespace character in it
rnotwhite = /\S/,
// Used for trimming whitespace
trimLeft = /^\s+/,
trimRight = /\s+$/,
// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
// JSON RegExp
rvalidchars = /^[\],:{}\s]*$/,
rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
// Useragent RegExp
rwebkit = /(webkit)[ \/]([\w.]+)/,
ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
rmsie = /(msie) ([\w.]+)/,
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
// Matches dashed string for camelizing
rdashAlpha = /-([a-z]|[0-9])/ig,
rmsPrefix = /^-ms-/,
// Used by jQuery.camelCase as callback to replace()
fcamelCase = function( all, letter ) {
return ( letter + "" ).toUpperCase();
},
// Keep a UserAgent string for use with jQuery.browser
userAgent = navigator.userAgent,
// For matching the engine and version of the browser
browserMatch,
// The deferred used on DOM ready
readyList,
...
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流👇🏻👇🏻👇🏻
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
