311.浪漫的婚庆拍摄公司网页大学生期末大作业 Web前端网页制作 html+css+js

本文链接：https://blog.csdn.net/A240307/article/details/139857914

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css+js：三级页面、图片轮翻效果等。适用于大学生网页课程作业设计、公司网页制作等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含8个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

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>爱相随婚庆</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/banner.js" type="text/jscript"></script>
</head>

<body>

<div class="top"><div class="logo"><img src="images/logo.png"/></div></div>
<div id="nav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="lvpai.html">全球旅拍摄</a></li>
<li><a href="zuopin.html">婚礼作品</a></li>
<li><a href="news.html">新闻动态</a></li>
<li><a href="liuyan.html">在线留言</a></li>
</ul>
</div>


<div class="main">
<div class="wrap" id="wrap">
<ul id="pic">

</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>

</ol>
</div>
<div class="nr">
<div class="box1">
<div class="box1-left"><img src="images/gr.jpg"></div>
<div class="box1-right">
<a href="about.html"><div class="box1-right-tit">关于我们</div></a>
<p>爱相随婚庆公司是专业的、具有品牌价值的婚礼策划，是中国婚庆行业联盟（中婚联）会员单位。我们始终致力于发展时尚婚礼，为新人创造属于自己的婚礼形式，融入婚礼，享受婚礼！坚持"专属定制"的服务理念，"一站式婚礼策划"的服务原则。我们形成诚信、专注、创新的发展模式，引领中国婚嫁新时尚。集合富有理想，时尚、创意的青春活力人才；拥有策划、主持、空间设计、舞美灯光、化妆造型、摄影摄像、花艺等高级人才资源。以及婚纱摄影婚宴酒店行业内品牌合作涉及：专业的一站式婚嫁服务模式。</p>
<p>我们通过对图形、色彩、花艺、灯光等诸多设计元素的组合来开创新的某种婚礼介质，在国际流行设计趋势下掌握现代卓越的审美趋向以及对现代婚礼艺术的实验性探索。从抽象的角度探究形态、结构的形式之美，使婚礼设计保持创新的特征，并赋予婚礼设计包含更为宽泛的内容和形式，以突破传统表面装饰的狭隘观念，从而由里及外的全面介入婚礼的核心,为您呈现只属于您的PERFECT WEDDING!</p>
</div>

</div>
<div class="caiz">
<ul>
<li><a href="zuopin.html"><img src="images/dg1.jpg" /><p>蓝红撞色主题婚礼</p><p><span>主题：大气、浪漫</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg2.jpg" /><p>梦幻星球主题婚礼</p><p><span>主题：梦幻星球</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg3.jpg" /><p>小清新唯美婚礼</p><p><span>主题：PERFECT WEDDING</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg4.jpg" /><p>蓝金主题婚礼</p><p><span>主题：西式婚礼</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg5.jpg" /><p>大气奢华香槟主题婚礼</p><p><span>主题：CM</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg6.jpg" /><p>江南风主题婚礼</p><p><span>主题：大气、唯美</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg7.jpg" /><p>个性中式婚礼</p><p><span>主题：新中式婚礼</span></p></a></li>
<li><a href="zuopin.html"><img src="images/dg8.jpg" /><p>唯美清新婚礼</p><p><span>主题：小清新</span></p></a></li>
</ul>

</div>

</div>


<div class="foot">
<div class="banq">
网站版权爱相随婚庆
</div>
</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

body {
   margin: 0 auto;
   font-size: 14px;
   font-family: "微软雅黑";
   line-height: 25px;
   background: #f7e9fb;
}

div,p,input,ul,li,h1,h2,h3 {
   height: auto;
   margin: 0;
   padding: 0;
   vertical-align: middle;
}

li {
list-style: none;
}

img {
   border: 0;
   margin: 0;
   padding: 0;
}

a {
color: #333;
text-decoration: none;
}

a:hover {
   color: #629705;
   text-decoration: none;
   overflow: hidden;
}
.top {
   width: 1000px;
   height: 159px;
   margin: 0 auto;
   padding-top: 30px;
   background: url(../images/top-bg.jpg) no-repeat;
}

.logo {
height: 65px;
margin-left: 40px;
}

#nav {
   width: 1000px;
   height: 50px;
   background: #b57dc6;
   margin: 0 auto;
}

#nav ul {
   width: 1000px;
   height: 50px;
   line-height: 50px;
   font-size: 14px;
   margin: 0 auto;
}

#nav ul li {
   width: 165px;
   height: 50px;
   line-height: 50px;
   color: #FFF;
   float: left;
   text-align: center;
}

#nav li a {
   color: #FFF;
   font-family: "微软雅黑";
   font-size: 16px;
   margin-left: 2px;
   display: block;
   font-weight: bold;
}

#nav li a:hover, #nav li.hover a {
   text-decoration: none;
   color: #fff;
   background: #c390d2;
}

.main {
   width: 1000px;
   margin: 0 auto;
   height: auto;
   overflow: hidden;
}
.wrap {
   height: 382px;
   width: 1000px;
   position: relative;
   overflow: hidden;
}

...

3.JS

代码如下（节选示例）：

window.onload = function() {
var wrap = document.getElementById('wrap'),
pic = document.getElementById('pic'),
list = document.getElementById('list').getElementsByTagName('li'),
index = 0,
timer = null;

// 若果有在等待的定时器，则清掉
if (timer) {
clearInterval(timer);
timer = null;
}

// 自动切换
timer = setInterval(autoPlay, 2000);

// 定义并调用自动播放函数
function autoPlay() {
index++;
if (index >= list.length) {
index = 0;
}
changeImg(index);
}

// 定义图片切换函数
function changeImg(curIndex) {
for (var j = 0; j < list.length; j++) {
list[j].className = "";
}
// 改变当前显示索引
list[curIndex].className = "on";
pic.style.marginTop = -382 * curIndex + "px";
index = curIndex;
}

// 鼠标划过整个容器时停止自动播放
wrap.onmouseover = function() {
clearInterval(timer);
}

// 鼠标离开整个容器时继续播放至下一张
wrap.onmouseout = function() {
timer = setInterval(autoPlay, 2000);
}

// 遍历所有数字导航实现划过切换至对应的图片
for (var i = 0; i < list.length; i++) {
list[i].id = i;
list[i].onmouseover = function() {
clearInterval(timer);
changeImg(this.id);
}
}
}

...