目录
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css+js，响应式自适应网页，瀑布流式布局，设置图片轮翻、图片和文字飞入特效、返回首页按钮、鼠标悬停图片文字效果等。适用于大学生网页课程作业设计、公司网页制作等。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含1个主页面包含4个子页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绿茵阁</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bigbox">
<!--导航-->
<div class="nav">
<!--小导航-->
<div class="xiao-nav">
<ul class="xiaoheng">
<li></li>
<li></li
><li></li
></ul>
</div>
<!--小导航--end-->
<ul class="nav-zi">
<li class="nownav" id="aa" ><a href="#a1">首页<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li>
<li id="bb"><a href="#a2">餐厅概念<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li>
<li id="cc"><a href="#a3">本周主推<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li>
<li id="dd"><a href="#a4">菜单<span><img src="picture/diandian.png" width="9" height="9" alt=""/></span></a></li>
</ul>
</div>
<!--导航end-->
<div class="smallbox1" id="a1">
<div class="logo-zi"></div>
</div>
<!--banner
<ul class="banner">
<span></span>
<div class="yintao"><p>聚浓情 尽欢笑</p></div>
<li><img src="picture/banner1.jpg" width="1920" height="417" alt=""/></li>
<div class="logo"></div>
</ul>
-->
<div class="banner">
<!--
<strong></strong>
-->
<!--搜索按钮-->
<div class="searchbox">
<div class="search_butt" id="anniudj"></div>
<div class="form_hezi" id="ssbox"><input type="text" placeholder="输入关键字"><input type="button" value="搜索" id="ssbut"></div>
</div>
<div class="yintao"><p>聚浓情 尽欢笑</p></div>
<figure id="full_feature" class="swipslider">
<ul class="sw-slides">
<li class="sw-slide">
<img src="picture/banner1.jpg" width="1920" height="417" alt=""/>
</li>
<li class="sw-slide">
<img src="picture/banner-2.jpg" width="1920" height="417" alt=""/>
</li>
<li class="sw-slide">
<img src="picture/banner-3.jpg" width="1920" height="417" alt=""/>
</li>
</ul>
<div class="logo"></div>
</figure>
</div>
<div class="red-black" id="a2"></div>
<div class="xiasmallbox" >
</div>
<!--banner-end-->
<!--餐厅概念-->
<div class="maxbox" >
<div class="xian-box">
<div class="xian1"></div>
<div class="canting"> 餐 厅 概 念 <img src="picture/dianidan.jpg" width="9" height="9" alt=""/></div>
<div class="xian2"></div>
</div>
<div class="gainian">
广州市绿茵阁餐饮连锁有限公司成立于1989年<br>
是中国最大的西餐连锁企业之一<br>
品牌定位于贵族西餐本土化 大众化和创新饮食文化 是西餐市场化的创立者和西餐连锁化的缔造者<br>
全国餐饮百强企业<br>
全国100最佳特色餐厅
</div>
<div class="xian3"></div>
<ul class="three-pic">
<li><img src="picture/page2-tu1.png" width="400" height="300" alt=""/></li>
<li class="tu2"><img src="picture/page2-tu2.png" width="338" height="234" alt=""/></li>
<li class="tu3"><img src="picture/page2-tu3.png" width="500" height="400" alt=""/></li>
</ul>
<div class="xian4" id="a3"></div>
<!--餐厅概念--end-->
<!--本周主推-->
<div class="xian5" ></div>
<div class="zhutui"> 本 周 主 推 <img src="picture/dianidan.jpg" width="9" height="9" alt=""/></div>
<div class="xian6"></div>
<div class="dazhe">
本周主推菜品一律八折<br>
西餐和本土消费者的传统口味，不断进行菜品更新<br>
保持出品的独创性之时融入文化元素扩张美食的吸引力，是发掘中国西餐元素的创始者餐厅<br>
</div>
<!--本周主推--end-->
</div>
<div class="bolang">
<ul class="six-tu">
<li class="aaa"><a href="#"><img src="picture/one.png" width="178" height="178" alt=""/ class="one">
</a>
<div class="hong-t">
<div class="heng-shang"></div>
<div class="heng-xia"></div>
<a href="#"><span>详情</span>
</a></div>
<h6><a href="#">芝士焗饭</a></h6>
</li>
<li class="bbb"><a href="#"><img src="picture/two.png" width="178" height="178" alt=""/ class="two"></a>
<h6><a href="#">碳烤猪扒</a></h6>
<div class="hong-t2">
<div class="heng-shang"></div>
<div class="heng-xia"></div>
<a href="#"><span>详情</span>
</a></div>
</li>
<li class="ccc"><a href="#"><img src="picture/three.png" width="178" height="178" alt=""/ class="three"></a>
<h6><a href="#">黑椒牛柳</a></h6>
<div class="hong-t3">
<div class="heng-shang"></div>
<div class="heng-xia"></div>
<a href="#"><span>详情</span>
</a></div>
</li>
<li class="ddd"><a href="#"><img src="picture/four.png" width="178" height="178" alt=""/ class="four"></a>
<h6><a href="#">白雪千层慕斯</a></h6>
<div class="hong-t4">
<div class="heng-shang"></div>
<div class="heng-xia"></div>
<a href="#"><span>详情</span>
</a></div>
</li>
<li class="eee"><a href="#"><img src="picture/five.png" width="178" height="178" alt=""/ class="five"></a>
<h6><a href="#">秘制牛小排</a></h6>
<div class="hong-t5">
<div class="heng-shang"></div>
<div class="heng-xia"></div>
<a href="#"><span>详情</span>
</a></div>
</li>
<li class="fff"><a href="#"><img src="picture/six.png" width="178" height="178" alt=""/ class="six"></a>
<h6><a href="#">沙朗小排</a></h6>
<div class="hong-t6">
<div class="heng-shang"></div>
<div class="heng-xia"></div>
<a href="#"><span>详情</span>
</a></div>
</li>
</ul>
</div>
<div class="smallbox2">
<div class="shuigui"></div>
<span class="shuigui"><img src="picture/shuiguo.png" width="647" height="324" alt=""/></span>
<div class="video"><video src="images/vidio-bg.mp4" autoplay loop width="398" height="216" alt="" /></video>
<h5 id="a4">精选上等食材，用心烹制</h5></div>
</div>
<div class="smallbox3" >
<div class="box03">
<div class="xian7"></div>
<div class="caidan"> 菜 单 <img src="picture/dianidan.jpg" width="9" height="9" alt=""/></div>
<div class="xian8"></div>
</div>
<ul class="nav-xia">
<li id="q1" class="nownav1">主食</li>
<li id="q2">缤纷小食</li>
<li id="q3">咖啡</li>
<li id="q4">套餐</li>
</ul>
<div class="juanjuan"></div>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
body {
width: 100%;
overflow-x: hidden;
}
* {
margin: 0;
padding: 0;
list-style: none;
}
/*导航*/
.bigbox {
width: 100%;
background: url(../images/beijin.jpg) no-repeat center;
position: relative;
top: 0;
}
.nav {
width: 100%;
height: 69px;
background: rgba(215, 168, 169, .9);
position: fixed;
top: 0;
left: 0;
z-index: 9999;
box-shadow: rgba(217, 204, 204, 1.00) 0 3px 4px;
}
.nav-zi {
width: 1200px;
margin: 0 auto;
font-size: 22px;
list-style: none;
}
.nav-zi li {
float: left;
width: 130px;
height: 130px;
line-height: 69px;
margin-left: 220px;
font-size: 22px;
text-decoration: none;
font-family: "微软雅黑";
}
.nav-zi li:first-child {
margin-left: 0;
}
.nav-zi li span {
margin-left: 10px;
overflow: hidden;
border-radius: 50%
}
.nav-zi li a {
text-decoration: none;
color: rgba(14, 14, 14, 1.00);
width: 130px;
height: 69px;
transition: all 300ms;
}
.nav-zi li a:hover,
.nav li.nownav a {
color: rgba(46, 46, 46, 1.00);
text-decoration: none;
border-top: rgba(19, 19, 19, 1.00) 4px solid;
width: 130px;
height: 69px;
line-height: 69px;
padding-top: 10px;
}
.smallbox1 {
width: 1200px;
height: 473px;
margin: 0 auto;
position: relative;
z-index: 15;
}
.xiao-nav {
float: right;
width: 50px;
height: 40px;
margin-top: 20px;
margin-right: 10px;
display: none;
}
.xiaoheng {
float: right;
width: 50px;
height: 40px;
margin-top: 0px;
margin-right: 0px;
}
.xiaoheng li {
float: right;
width: 50px;
height: 8px;
background: rgba(212, 174, 174, 1.00);
margin-top: 3px;
border-radius: 2px;
}
.yc-nav {
width: 200px;
height: 300px;
background: rgba(228, 171, 172, 1.00);
line-height: 60px;
position: fixed;
top: 80px;
right: -300px;
z-index: 2000;
transition: 500ms;
}
...
3.JS
代码如下（节选示例）：
!function(n){n.fn.swipeslider=function(i){function t(){q=B.width(),p()}function e(n){A&&(l(),n.originalEvent.touches&&(n=n.originalEvent.touches[0]),0==H&&(H=1,M=n.clientX))}function o(n){var i;i=n.originalEvent.touches?n.originalEvent.touches[0]:n;var t=i.clientX-M;if(1==H&&0!=t&&(H=2,N=z*-q),2==H){n.preventDefault();var e=1;(0==z&&i.clientX>M||z==Q-1&&i.clientX<M)&&(e=3),j=N+t/e,T(!1),x(j)}}function s(n){2==H&&(H=0,z=N>j?z+1:z-1,z=Math.min(Math.max(z,0),Q-1),j=z*-q,u(),p(),a()),H=0}function u(){A=!1,window.setTimeout(c,G)}function c(){A=!0}function l(){L=!1,window.clearTimeout(K)}function a(){O&&(L=!0,f())}function f(){L&&(K=window.setTimeout(r,J))}function r(){d(),f()}function d(){z+=1,p()}function w(){z-=1,p()}function p(){T(!0),x(-z*q),0==z?window.setTimeout(m,G):z==Q-1&&window.setTimeout(v,G),k(z)}function v(){h(1)}function m(){h(Q-2)}function h(n){T(!1),z=n,x(-q*z),window.setTimeout(g,50)}function g(){T(!0)}function T(n){X(n?"all":"none")}function x(n){B.css("transform","translateX("+n+"px)")}function y(n){B.css("transition-duration",n+"ms")}function b(n){B.css("transition-timing-function",n)}function X(n){B.css("transition-property",n)}function E(){B.after('<span class="sw-next-prev sw-prev"></span>'),D.find(".sw-prev").click(function(){L&&(l(),w(),a())}),B.after('<span class="sw-next-prev sw-next"></span>'),D.find(".sw-next").click(function(){L&&(l(),d(),a())})}function P(n){B.after('<ul class="sw-bullet"></ul>');for(var i=B.parent().find(".sw-bullet"),t=0;n>t;t++){0==t?i.append('<li class="sw-slide-'+t+' active"></li>'):i.append('<li class="sw-slide-'+t+'"></li>');var e=D.find(".sw-slide-"+t);!function(n){e.click(function(){l(),z=n+1,p(),a()})}(t)}}function k(n){var i=0;i=0==n?Q-3:n==Q-1?0:n-1,D.find(".sw-bullet").find("li").removeClass("active"),D.find(".sw-slide-"+i).addClass("active")}var D=this,B=this.find(".sw-slides"),C={transitionDuration:500,autoPlay:!0,autoPlayTimeout:4e3,timingFunction:"ease-out",prevNextButtons:!0,bullets:!0,swipe:!0,sliderHeight:"60%"},F=n.extend(C,i),H=0,M=0,N=0,j=0,z=0,Q=0,q=0,A=!0,G=F.transitionDuration,I=F.swipe,J=F.autoPlayTimeout,K=void 0,L=!0,O=F.autoPlay;return function(){n(D)
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
标签：function,Web,网页,337,height,width,nbsp,&& From： https://blog.csdn.net/A240307/article/details/140086633