270. 大学生HTML5期末大作业 ―【易烊千玺明星主题网页(5页)】 Web前端网页制作 html5+css3+js-CSDN博客

♬♬♬欢迎光临我的CSDN！这里是Web前端网页案例大集汇，有各行各业的前端网页案例，每天会持续更新！如果你对Web前端网页的学习、开发有困惑，抑或是为Web前端网页期末大作业、课设毕设烦恼，在我这可以提供专业的解决方案，☎☏有兴趣的欢迎联系交流！请点赞关注，谢谢！❤❤❤更多网页案例推荐:

全网最全的的网页案例集合，5000+套网页完整代码，主题涵盖40+种类型，网页案例持续更新中,需要的【建议收藏】这篇文章末尾添加我微信...

【建议收藏】40种主题网页案例大集合 Web前端大学生期末大作业 HTML+CSS+JS-CSDN博客

提示：以下是本篇文章正文内容，下面案例供参考：

一、网页概述

本实例应用html5+css3+js：导航菜单、图片轮翻、视频、注册、登录、留言表单等。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页共包含5个页面：

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="stylesheet" type="text/css" href="css/style.css"/>
       <script src="js/lunbo.js" type="text/javascript" charset="utf-8"></script>
       <title>易烊千玺</title>
   </head>
   <body>
       <div class="top1 auto clearfix">
           <ul class="clearfix">
               <li><a style="color: #00BFFF;" href="index.html">首页</a></li>
               <li><a href="tu.html">图库</a></li>
               <li><a href="chengzhang.html">成长历程</a></li>
               <li><a href="login.html">登录/注册</a></li>
               <li><a href="fankui.html">反馈意见</a></li>
           </ul>

       </div>
       <div id="app">
       <div class="list-img clearfix">
               <div><img src="./images/product/1.jpeg" alt=""></div>
               <div><img src="./images/product/2.jpeg" alt=""></div>
               <div><img src="./images/product/3.jpeg" alt=""></div>
               <div><img src="./images/product/1.jpeg" alt=""></div>
       </div>
       <div class="btn">
       <a class="left" href="javascript:;"><</a>
       <a class="right" href="javascript:;">></a>
       </div>
       </div>
       <div class="main1 auto clearfix">
           <div class="video1">
               <video controls="controls" loop="loop" width="600" height="350" src="./video/list/易烊千玺%20-%20Fall(现场版).mp4"></video>
           </div>
           <div class="rt">
               <h3>2017年6月5日</h3>
               <p>
                   易烊千玺登上“全球的生活方式期刊”《KINGFLOK》，作为一本充满烹饪，手工和活动创意的杂志，《KINGFLOK》追求自然健康的生活品质，强调生活细节美学，《福布斯》评价它：“kingflok为独立杂志发出来呐喊”
               </p>
           </div>

       </div>
       <div class="footer auto clearfix">
           Copyright © 2025 易烊千玺
       </div>
   </body>
</html>

...

2.CSS

代码如下（节选示例）：

html{
   font-family: "microsoft yahei,arial, helvetica, sans-serif";
   font-size: 16px;
}
*{
   margin: 0;
   padding: 0;
   list-style: none;
}
a{
   text-decoration: none;
   color: #000;
}
.auto{
   margin: 0 auto;
}
.clearfix::after{
   content: '';
   display: block;
   clear: both;
}
.top1{
   width: 1200px;
   height: 50px;
   background-color: red;
}
.top1 ul{
   width: 600px;
   float: left;
   height: 50px;
   margin-left: 450px;
}
.top1 ul li{
   width: 120px;
   height: 50px;
   float: left;
   line-height: 50px;
   text-align: center;
}
.top1 ul li a{
   color: #fff;
   display: block;
}
.top1 ul li a:hover{
   color: deepskyblue;
}
#app{
   position: relative;
   width: 1200px;
   height: 500px;
   overflow: hidden;
   margin: 0 auto 0;
}
#app .list-img{
   position: absolute;
   width: 4800px;
   height: 100%;
   left: 0px;
   transition: 0.5s ease;
}
#app .list-img div{
   width: 1200px;
   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;
}