456.传媒公司网站大学生期末大作业 Web前端网页制作 html5+css+js

仙女网页制作

已于 2024-08-26 22:33:05 修改

阅读量968

点赞数 30

分类专栏： Web网页设计实例传媒文章标签：前端课程设计 html

于 2024-08-26 22:32:06 首次发布

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

版权

Web网页设计实例同时被 2 个专栏收录

513 篇文章 26 订阅

订阅专栏

传媒

4 篇文章 0 订阅

订阅专栏

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

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

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

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

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

一、网页概述

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

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="./css/style.css">
       <title>传媒公司</title>
   </head>
   <body>
       <div id="app">
       <div class="list-img clearfix">
               <div><img src="./images/1.jpg" alt=""></div>
               <div><img src="./images/2.jpg" alt=""></div>
               <div><img src="./images/3.jpg" alt=""></div>
               <div><img src="./images/4.jpg" alt=""></div>
               <div><img src="./images/5.jpg" alt=""></div>
               <div><img src="./images/1.jpg" alt=""></div>
       </div>
       <div class="btn">
       <a class="left" href="javascript:;"></a>
       <a class="right" href="javascript:;"></a>
       </div>
       </div>
       <div class="top1 auto flex">
           <img src="./images/logo.png" alt="">
           <ul class="flex">
               <li><a href="index.html">首页</a></li>
               <li><a href="list2.html">公司简介</a></li>
               <li><a href="list3.html">传媒设计</a></li>
               <li><a href="list4.html">设计作品</a></li>
               <li><a href="list5.html">公司业务</a></li>
               <li><a href="list6.html">联系我们</a></li>
           </ul>
       </div>

       <div class="title-three">
           <h3>传媒公司</h3>
       </div>
       <div class="con1 auto flex">
           <div>
               <img src="./images/6.jpg" alt="">
               <p>传媒公司</p>
               <p>传媒，就是传播各种信息的媒体。传播媒体或称“传媒”、“媒体”或“媒介”，指传播信息资讯的载体，即信息传播过程中从传播者到接收者之间携带和传递信息的一切形式的物质工具。</p>
           </div>
           <div>
               <img src="./images/7.jpg" alt="">
               <p>传媒公司</p>
               <p>传媒，就是传播各种信息的媒体。传播媒体或称“传媒”、“媒体”或“媒介”，指传播信息资讯的载体，即信息传播过程中从传播者到接收者之间携带和传递信息的一切形式的物质工具。</p>
           </div>
           <div>
               <img src="./images/8.jpg" alt="">
               <p>传媒公司</p>
               <p>传媒，就是传播各种信息的媒体。传播媒体或称“传媒”、“媒体”或“媒介”，指传播信息资讯的载体，即信息传播过程中从传播者到接收者之间携带和传递信息的一切形式的物质工具。</p>
           </div>
           <div>
               <img src="./images/9.jpg" alt="">
               <p>传媒公司</p>
               <p>传媒，就是传播各种信息的媒体。传播媒体或称“传媒”、“媒体”或“媒介”，指传播信息资讯的载体，即信息传播过程中从传播者到接收者之间携带和传递信息的一切形式的物质工具。</p>
           </div>
       </div>
       <div class="footer auto">
           Copyright © 2022 传媒公司版权所有
       </div>
   </body>
   <script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
</html>

...

2.CSS

代码如下（节选示例）：

html{
   font-family: "microsoft yahei,arial, helvetica, sans-serif";
   font-size: 16px;
}
*{
   margin: 0;
   padding: 0;
}
li,ul,ol{
   list-style: none;
}
a{
   text-decoration: none;
   color: #000;
}
.flex{
   display: flex;
}
.auto{
   margin: 0 auto;
}
.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
#app{
   position: relative;
   width: 1500px;
   height: 700px;
   overflow: hidden;
   margin: 0 auto 0;
}
#app .list-img{
   position: absolute;
   width: 9000px;
   height: 100%;
   left: 0px;
   transition: 0.5s ease;
}
#app .list-img div{
   width: 1500px;
   height: 100%;
   cursor: pointer;
   float: left;
}
#app .list-img div img{
   width: 100%;
   height: 100%;
}
#app a{
   display: block;
   position: absolute;
   top: 50%;
   transform: translate(0,-50%);
   width: 40px;
   height: 60px;
   color: white;
   user-select: none;
   font-size: 30px;
   text-align: center;
   line-height: 60px;
   text-decoration: none;
}
#app a:nth-of-type(1)::before{
   width: 16px;
   height: 16px;
   content: '';
   display: block;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: rotate(-135deg);
   margin: 18px 0 0 10px;
}
#app a:nth-of-type(2)::before{
   width: 16px;
   height: 16px;
   content: '';
   display: block;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   transform: rotate(45deg);
   margin: 18px 0 0 10px;
}
#app a:hover{
   background-color: rgba(0,0,0,0.5);
}
#app a.left{
   left: 0px;
}
#app a.right{
   right: 0px;
}
.top1{
   width: 1500px;
   justify-content: space-between;
   height: 80px;
   background-color: antiquewhite;
   font-family: "kaiti";
}
.top1 ul{
   width: 800px;
   height: 80px;
   line-height: 80px;
   text-align: center;
   justify-content: space-between;
}
.top1 ul li{
   flex: 1;
}
.top1 ul li a{
   font-size: 26px;
   display: block;
}
.top1 ul li a:hover{
   background-color: rgba(0, 0, 0, .3);
   text-decoration: underline;
}
.title-three {
   position: relative;
   width: 210px;
   margin: 100px auto 50px auto;
   padding: 0 60px;
   border-bottom: 2px solid #333;
}

.title-three h3 {
   position: absolute;
   font-size: 24px;
   top: -15px;
   width: 210px;
   text-align: center;
   background: #FFFFFF;
}
.con1{
   width: 1300px;
   margin: 40px auto;
   justify-content: space-between;
}
.con1 div{
   width: 23%;
   height: 440px;
}