135.大学生期末大作业 响应式西餐厅美食网页设计实例 web前端网页制作html+css+js
目录
前言
响应式西餐厅美食网页设计实例，应用html+css+js，本实例应用HTML+CSS+JS，应用悬浮导航条、图片轮翻效果、鼠标滑动特效、留言表单、搜索等。，供大家参考。网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
一、网页概述
1.网页布局
网页编排设计为多页面站点页面，本实例共6个页面。各面之间的有机联系反映，视觉表现效果好，视觉体验流畅。
网页布局为“标题正文型”的响应式布局，即上面是标题或类似的一些东西，下面是正文。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验。
2.知识应用
本实例应用HTML+CSS+JS，应用悬浮导航条、图片轮翻效果、鼠标滑动特效、留言表单、搜索等。
3.网页支持
支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；
支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含6个页面：
三、网页效果
四、代码展示
1.html
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Gourmet Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' media="all" />
<!-- //bootstrap -->
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all" />
<script src="js/jquery-1.8.3.min.js"></script>
<!--start-smoth-scrolling-->
<!--webfonts-->
<!--webfonts-->
<link href="css/component.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body class="cbp-spmenu-push">
<!--header-->
<div class="header-section">
<div class="container">
<div class="header-top">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>菜单</h3>
<ul>
<li><a href="index.html">家</a></li>
<li class="menu">菜单</li>
<ul class="cl-effect-1">
<li><a href="menu.html">菜单1</a></li>
<li><a href="menu.html">菜单2</a></li>
<li><a href="menu.html">菜单3</a></li>
<li><a href="menu.html">菜单4</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "li.menu" ).click(function() {
$( "ul.cl-effect-1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<li><a href="events.html">活动</a></li>
<li><a href="gallery.html">画廊</a></li>
<li><a href="mail.html">给我们发邮件</a></li>
</ul>
</nav>
<div class="main buttonset">
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showRightPush"><img src="images/menu.png" alt=""/></button>
<!--<span class="menu"></span>-->
</div>
<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
<script src="js/classie.js"></script>
<script>
var menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
function disableOther( button ) {
if( button !== 'showRightPush' ) {
classie.toggle( showRightPush, 'disabled' );
}
}
</script>
</div>
<div class="header-logo">
<a href="index.html"><img src="images/logo.png" alt="" /></a>
</div>
<div class="search-form">
<form>
<input type="text" value="搜索..." onFocus="this.value = '';" onBlur="if (this.value == '') {this.value = 'Search...';}" required="">
</form>
</div>
<div class="clearfix"> </div>
<div class="header-grids">
<div class="col-md-4 header-grid-info">
<a href="single.html">
<div class="header-grid gray">
<div class="header-grid-img gray-grid">
<img src="images/2.jpg" alt="">
<h3>三明治</h3>
<p>痛苦本身就是爱，主要客户也不是
</p>
</div>
</div>
</a>
</div>
<div class="col-md-4 header-grid-info">
<a href="single.html">
<div class="header-grid">
<div class="header-grid-img">
<img src="images/3.jpg" alt="">
<h3>中国菜</h3>
<p>痛苦本身就是爱，主要客户也不是
</p>
</div>
</div>
</a>
</div>
<div class="col-md-4 header-grid-info">
<a href="single.html">
<div class="header-grid blue">
<div class="header-grid-img blue-grid">
<img src="images/1.jpg" alt="">
<h3>披萨</h3>
<p>痛苦本身就是爱，主要客户也不是
</p>
</div>
</div>
</a>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
</div>
<!--/header-->
<div id="Welcome">
<div class="container">
<div class="wecome-main">
<div class=" col-md-6 wecome-text">
<h1>欢迎</h1>
<span>莫里斯·波特特调味品福西布斯 因为地球需要一只猫。埃涅阿斯对猫有一定的价格，足球因人而异。莫里斯·波特特调味品福西布斯</span>
<p>没有什么是复杂的。现在，折磨者不是山谷之缺的作者。但谁能喝出它。在这个住所里，有人说，现在在精英阶层的便利下，投资于大众，投资于免疫系统。但明天，生命的痛苦将以悲惨的自由颂歌结束。把这个宣传，骨灰盒的喉咙，而不是狮子的沙发。但现在床，牛仔竞技还没有完成 </p>
<div class= "wecome-button">
<a class="button rotate2" href="single.html">阅读更多<span> </span></a>
</div>
</div>
<div class= "col-md-6 wecome-img">
<img src="images/wel-img.jpg" alt="">
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //End-welcomet-->
<div class="featured-section">
<div class="container">
<h2>最新活动</h2>
<div class="featured-main">
<div class=" col-md-3 feature-text">
<img src="images/f1.jpg" alt="">
<div class="feature-text-grids">
<div class="feature-text-left">
<img src="images/7.png" alt="" />
</div>
<div class="feature-text-right">
<h3>报名</h3>
<p>孩子们的圣诞装饰品</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class=" col-md-3 feature-text">
<img src="images/f2.jpg" alt="">
<div class="feature-text-grids">
<div class="feature-text-left">
<img src="images/13.png" alt="" />
</div>
<div class="feature-text-right">
<h3>报名</h3>
<p>孩子们的圣诞装饰品</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class=" col-md-3 feature-text">
<img src="images/f3.jpg" alt="">
<div class="feature-text-grids">
<div class="feature-text-left">
<img src="images/25.png" alt="" />
</div>
<div class="feature-text-right">
<h3>报名</h3>
<p>孩子们的圣诞装饰品</p>
</div>2.CSS
/*--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--*/
body{
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.menu {
display: block;
cursor: pointer;
color: #555555;
border-bottom: 1px dashed rgb(118, 118, 118);
font-size: 18px;
padding: 20px 25px;
font-weight: 400;
position: relative;
}
.menu:hover{
color:#ff4c4c;
}
.top-nav {
float: right;
margin-top: 0;
}
ul.cl-effect-1 {
display: none;
}
.top-nav ul {
padding: 0;
margin: 0;
z-index: 999;
width: 100%;
left:0;
}
.top-nav ul.cl-effect-1 li {
display: block;
text-align: center;
background: rgba(220, 220, 220, 0.39);
margin: 0;
}
.top-nav ul li a {
font-size: 16px;
padding: 1.5em 0;
color: #000;
font-weight: 800;
display: block;
}
button#showRightPush {
border: none;
padding: 3px 0 0;
outline: none;
position: fixed;
z-index: 1;
background: none;
}
nav#cbp-spmenu-s2 {
background: #FFF;
text-align: center;
}
nav#cbp-spmenu-s2 a {
color: #555555;
display: block;
padding: 20px 25px;
font-size: 18px;
font-weight: 400;
border: none;
margin: 0;
transition: .5s all;
border-bottom: 1px dashed rgb(118, 118, 118);
text-decoration: none;
}
nav#cbp-spmenu-s2 a:hover {
text-decoration: none;
background: none;
}
nav#cbp-spmenu-s2 a.active,nav#cbp-spmenu-s2 a:hover {
color: #ff4c4c;
}
nav#cbp-spmenu-s2 h3 {
background: #ff4c4c;
color: #ffffff;
text-transform: uppercase;
font-weight: 600;
}
.top-nav ul {
padding: 0;
margin: 0;
}
.top-nav ul li{
display:block;
}
.header-top {
padding-top:3em;
}
.logo {
text-align: center;
margin:10em 0 0 0;
}
span.menu{
display:none;
}
.sub-header{
margin: 6em 0 0 0;
}
.logo.two {
text-align: center;
margin: 1em 0 0 0;
}
.top-nav{
float:left;
}
.header-logo{
float: left;
margin-left: 32em;
}
.search-form {
float: right;
}
.search-form input[type="text"] {
display: inline-block;
background: url(../images/search.png) no-repeat 18px 14px;
border: solid 1px #000;
margin: 0;
outline: none;
font-size: 14px;
color: #000;
padding: .7em .7em .7em 3em;
width: 100%;
}
.header-grids {
margin-top: 12em;
}
.header-grid-info a {
text-decoration: none;
}
.header-grid{
background: #FFF;
padding: 2em 3em;
text-align: center;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
}
.header-grid:hover{
background: #a7cb24;
}
.gray:hover{
background:#bfbfbf;
}
.blue:hover{
background:#0099e5;
}
.header-grid:hover div.header-grid-img img{
border-color: transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.header-grid:hover div.header-grid-img h3{
color:#FFF;
}
.header-grid:hover div.header-grid-img p{
color:#FFF;
}
.header-grid-img img{
width: 75%;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border: solid 10px #DADADA;
border-left-color: #DADADA;
}
.header-grid-img h3{
font-size: 26px;
color: #a7cb24;
margin: 1em 0 0 0;
text-transform: uppercase;
font-weight: 600;
cursor: text;
}
.blue-grid h3{
color:#0099e5;
}
.gray-grid h3{
color:#bfbfbf;
}
.header-grid-img p{
color: #555555;
font-size: 14px;
padding: 1em 0 0 0;
margin: 0;
line-height: 1.8em;
cursor: text;
}
/*------------------ Slider Part starts Here----------*/
/*--- slider-css --*/
.header-section{
background: url(../images/bg1.jpg) no-repeat 0px 0px;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
min-height: 770px;
position: relative;
}
/*----welcome-section---------*/
div#Welcome {
padding: 2.6em 0 3em 0;
}
.wecome-text {
text-align: left;
}
.wecome-text span {
color: #616161;
font-size: 16px;
line-height: 1.6em;
margin: 1em 0;
padding: 0;
font-style: italic;
}
.wecome-text p {
color: #999;
font-size: 14px;
line-height: 1.8em;
font-family: 'Open Sans', sans-serif;
margin: 1em 0;
padding: 0;
}
.wecome-img {
margin-top: 16px;
}
.wecome-text h1 {
color: #ff4c4c;
font-size: 4.4em;
margin: 0 0 11px 0;
font-family: 'Niconne', cursive;
}
.wecome-text lable {
color: #1FBBA6;
}
.wecome-img img {
width: 100%;
}
.wecome-button{
margin-top:2em;
}
/* Rotate */
a.button.rotate2 {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
text-decoration: none;
color: #999;
font-size: 1.2em;
border:1px solid#666;
padding: 0.8em 1.6em;
background: none;
font-family: 'Open Sans', sans-serif;
}
a.button.rotate2:hover, a.button.rotate2:focus,a.button.rotate2:active {
-webkit-transform: rotate(4deg);
transform: rotate(4deg);
}
a.button.rotate2 span{
background: url(../images/arrow.png) no-repeat 0px 0px;
width:20px;
height:10px;
display: inline-block;
cursor: pointer;
margin-right: 9px;
vertical-align:middle;
margin: 1px -3px 3px 13px;
}
a.button.rotate2:hover{
border: 1px solid #ff4c4c;
color: #444;
}
/*------start-slider-------*/
#testimonials{
background:url(../images/slide.png) repeat-y;
background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-moz-background-size:cover;
min-height: 300px;
}
article > div {
text-align: center;
}
.wmuSlider {
position: relative;
overflow: hidden;
min-height:330px;
text-align: center;
}
.wmuSlider .wmuSliderWrapper article {
position: relative;
text-align: center;
}
.wmuGallery .wmuGalleryImage {
position: relative;
text-align: center;
}
.wmuGallery .wmuGalleryImage img {
max-width: 100%;
width: auto;
height: auto;
}
/* Default Skin */
.wmuGallery .wmuGalleryImage {
margin-bottom: 10px;
}
.wmuSliderPrev, .wmuSliderNext {
position: absolute;
width:29px;
height:37px;
text-indent: -9999px;
background: url(../images/arrows.png) no-repeat;
top: 40%;
z-index: 2;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.wmuSliderPrev {
background-position: 2px -0px;
left: 212px;
}
.wmuSliderNext {
background-position: -45px -0px;
right: 199px;
}
.client-main{
margin:0 auto;
width: 80%;
padding:10% 0;
}
.slide-text{
width:72%;
margin: 0 auto;
}
.slide-text p {
color: #fff;
font-size: 1.7em;
text-align:center;
font-family: 'Open Sans', sans-serif;
line-height: 1.9em;
font-weight: 600;
}
article > div > span{
text-align: center;
padding: 1em 0 0 0;
display:block;
}
article:nth-child(2) > div > span > a {
color:#585C67;
cursor: pointer;
font-size:1.2em;
}
article:nth-child(2) > div > span > a:hover{
color:#C0B9CD;
}
/*--featured-section--*/
.featured-section {
padding: 4em 0;
background: #F7F7F7;
}
.services {
background: #F7F7F7;
padding:3em 0;
}
.services h3 {
font-size: 2.6em;
color: #929292;
line-height: 1.4em;
margin: 0;
}
.events-featured-main:nth-child(3){
margin:2em 0 0 0;
}
.feature-text a img:hover {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-ms-transition: .5s all;
-o-transition: .5s all;
}
.featured-main {
padding-top: 1.2em;
}
.featured-section h2 {
color: #929292;
font-size:2em;
margin: 0 0 11px 0;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.feature-text img{
width:100%;
}
.feature-text h3 {
font-size: 21px;
color: #4A4A4A;
margin: 1em 0;
line-height: 1.3em;
}
.feature-text p {
color: #999;
font-size: 14px;
margin:0;
}
3.JS
/*
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
*
* Uses the built In easIng capabilities added In jQuery 1.1
* to offer multiple easIng options
*
* Copyright (c) 2007 George Smith
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.extend( jQuery.easing,
{
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
五、总结
一个优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
更多优质博客文章、网页模板点击以下链接查阅：http://angella.blog.csdn.net。
上一篇： 实操——使用uplo
下一篇： 优化界面，多身份登录