8. 传媒公司网页实例大学生期末大作业 Web前端网页制作 html+css+js-CSDN博客

本文链接：https://blog.csdn.net/VX_L_5201314168/article/details/139482737

一、网页简介

本实例共包含6个页面，应用html+css+js，包括菜单栏、菜单栏切换效果、图片轮翻、鼠标悬停图片过渡效果、留言表单等。适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等主流编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页效果

三、代码展示

节选代码示例如下：

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;
}