目录
♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:
全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的【建议收藏】这篇文章末尾添加我微信...
【建议收藏】40种主题网页案例大集合 Web前端 大学生期末大作业 HTML+CSS+JS-CSDN博客
一、网页概述
本实例应用html5+css3+js： 导航菜单、图片轮翻、鼠标滑动特效、留言表单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含4个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title>首页</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="css/base.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--[if lt IE 9]>
<script src="js/Respond.js"></script>
<![endif]-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/scrollto.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".nav_pro").click(function(){
$.scrollTo('#index',1000);
});
$(".nav_news").click(function(){
$.scrollTo('#what',800);
});
$(".nav_ser").click(function(){
$.scrollTo('#pro',1000);
});
$(".nav_con").click(function(){
$.scrollTo('#about',1200);
});
$(".nav_job").click(function(){
$.scrollTo('#con',1500);
});
});
</script>
</head>
<body>
<div class="header-ctent clearfix">
<div class="header clearfix">
<div class="logo"><img src="img/logo.png" alt="logo"></div>
<div class="navs1">
<ul class="nav" id="demoUl">
<li><a href="#" class="nav_pro" >首页</a></li>
<li><a href="business.html" class="nav_news" >业务</a></li>
<li><a href="#" class="nav_ser" >案例</a></li>
<li><a href="#" class="nav_con" >关于</a></li>
<li><a href="#" class="nav_job" >联系</a></li>
</ul>
</div>
<div class="navs2">
<ul class="nav">
<li><a href="index.html" >首页</a></li>
<li><a href="business.html" >业务</a></li>
<li><a href="#" >案例</a></li>
<li><a href="about.html" >关于</a></li>
<li><a href="contact.html" >联系</a></li>
</ul>
</div>
<div class="header-bar clearfix">
<div class="tool trigger" title="菜单">
<button class="nobbo">
<img src="img/menu.png"/>
</button>
</div>
</div>
</div>
</div>
<!--头部end-->
<div class="content clearfix">
<!--banner star-->
<div id="da-slider" class="da-slider" id="index">
<div class="da-slide">
<div class="da-img da-img1">
<img src="img/banner.png" alt="image01" />
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="img/banner1.png" alt="image01" />
</div>
</div>
<div class="da-slide">
<div class="da-img da-img2">
<img src="img/banner2.png" alt="image01" />
</div>
</div>
<nav class="da-arrows"><span class="da-arrows-prev"></span> <span class="da-arrows-next"></span> </nav>
</div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/*reset*/
html {
-webkit-font-smoothing: antialiased;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust: 100%; /* 2 */
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dd,form,span,samp,p{
margin:0;
font-family: "微软雅黑";
}
ul,ol{
padding-left:0;
list-style-type:none;
}
a {
cursor: pointer;
color:#333;
text-decoration: none;
/*消除ie10灰色背景*/
background-color: transparent;
/*消除火狐虚线*/
outline: none;
}
img {
max-width: 100%;
cursor: pointer;
vertical-align: middle;
border: 0 none;
}
body,button,input,select,textarea {
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, STHeiTi,"Microsoft YaHei","微软雅黑",SimSun,sans-serif;
color:#9b9b9b;
outline: none;
resize: none;
}
button, input{
/* 让 input 和 button 一样高 */
line-height:normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner{
padding:0;
border:0;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: none;
}
a,button,input{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 统一上标和下标 */
sub, sup{
font-size:75%;
line-height:0;
position:relative;
}
:root sub, :root sup{
vertical-align:baseline; /* for ie9 and other modern browsers */
}
sup{
top:-0.5em;
}
sub{
bottom:-0.25em;
}
strong {
font-weight: normal;
}
mark {
background: none;
}
/*
input,button,select,textarea {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
...
3.JS
代码如下（节选示例）：
/**************简单插件*******************/
/*tab切换*/
(function ($) {
$.fn.zTab=function(options) {
var dft={
tabnav:'.tabnav', //导航按钮元素
tabcon:'.tabcon', //被切换元素
trigger:'mouseenter', //触发方式，默认点击触发
curName:'current', //给高亮设置类名
removeMod:null, //改为触发时移除导航的类名
cur:0, //初始高亮的顺序，默认第一个
delay:0, //触发延时
auto:null, //是否自动改变
animation:null, //动画效果
callback : null , //回调
load:null, //首次加载时执行
cssmod: false
};
var ops=$.extend(dft,options);
return this.each(function () {
var self=$(this),
nav=self.find(ops.tabnav),
con=self.find(ops.tabcon),
navBtn=nav.children(),
num=navBtn.length,
timer=null,
timer2=null,
isInit=false;
//初始化执行
init();
navBtn.on(ops.trigger,function () {
ops.cur=$(this).index();
clearTimeout(timer);
clearTimeout(timer2);
timer=setTimeout(run,ops.delay);
return false;
});
navBtn.on('mouseleave',function () {
clearTimeout(timer);
if (ops.auto) {
timer2=setInterval(auto,ops.auto.interval);
}
});
//
function init () {
ops.trigger=='c'?ops.trigger='click':ops.trigger='mouseenter'; //导航触发方式判定
run();
if (ops.auto) {
timer2=setInterval(auto,ops.auto.interval);
}
else {
run();
}
if(ops.load){
ops.load(self,ops.cur,num);
}
isInit=true;
}
//
function run () {
if (ops.removeMod) {
navBtn.addClass(ops.curName).eq(ops.cur).removeClass(ops.curName); //
}
else {
navBtn.removeClass(ops.curName).eq(ops.cur).addClass(ops.curName); //
}
if (ops.animation) {
switch(ops.animation.type) {
// 结构必须符合要求，目前还不完善
case 'slideY':
var conH=con.outerHeight();
if (isInit) {
con.parent().animate({marginTop:-conH*ops.cur},{duration:400,queue:false})
}
else {
con.parent().height(conH*num);
}
break;
case 'slideX' :
var conW=con.outerWidth();
if (isInit) {
con.parent().animate({marginLeft:-conW*ops.cur},{duration:400,queue:false})
}
else {
con.parent().width(conW*num);
}
break;
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
