117. 大学生HTML5期末大作业 ―【肖战明星主题精品网页】 Web前端网页制作 html5+css3+js

佳人悠悠

于 2024-11-29 12:50:15 发布

阅读量908 前端网页明星文章标签：课程设计 javascript html5 css3 前端 html jquery

本文链接：https://blog.csdn.net/m0_67368443/article/details/144133163

前端网页同时被 2 个专栏收录

222 篇文章 0 订阅

明星

17 篇文章 0 订阅

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

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

三、网页文件

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

四、网页效果

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

五、代码展示

1.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>肖战网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/rotate.js"></script>
</head>

<body>

<div class="container">

<div class="wrapper">

       <div class="header">
           <a href="index.html">肖战</a>
       </div>

       <div class="nav">
           <a href="index.html">肖战首页</a>
           <a href="view1.html">个人简介</a>
           <a href="view2.html">演艺经历</a>
           <a href="view3.html">主要作品</a>
           <a href="view4.html">杂志写真</a>
           <a href="view5.html">社会活动</a>
           <a href="view6.html">人物评价</a>
           <a href="view7.html">人物图册</a>
           <a href="register.html">用户注册</a>
           <a href="login.html">用户登录</a>
       </div>

       <div id="focus" class="focus">
           <ul id="focus_image" class="focus_image" >
               <li class="current">
                   <a href="view1.html"><img src="images/focus1.jpg"/></a>
               </li>
               <li><a href="view2.html"><img src="images/focus2.jpg"/></a></li>
           </ul>
           <ul id="focus_button" class="focus_button">
               <li class="on"></li>
               <li></li>
           </ul>
       </div>

       <div class="main">
           <a href="view1.html"><img src="images/view1.1.jpg"/></a>
           <article>
               <h2>个人简介</h2>
               <p><a href="view1.html">肖战，1991年10月5日出生于重庆市，中国内地男演员、歌手。</a></p>
               <p><a href="view1.html">2015年12月31日，肖战登上浙江卫视“奔跑吧2016”跨年演唱会。2016年4月，主演校园星座超能力网络剧《超星星学园》。2017年，参演根据天蚕土豆同名小说改编的古装励志玄幻剧《斗破苍穹》，并在剧中饰演林修崖，该剧于2018年9月3日在湖南卫视青春进行时播出。2018年4月25日，古装奇幻剧《哦！我的皇帝陛下》在腾讯视频播出，肖战凭北堂墨染一角崭露头角。2019年6月27日，古装仙侠剧《陈情令》在腾讯视频播出，肖战凭魏无羡一角赢得广泛关注；8月，主演都市情感剧《余生，请多指教》；9月13日，主演的古装仙侠电影《诛仙I》在全国上映。</a></p>
               <p><a href="view1.html">2020年1月24日，肖战首次登上中央广播电视总台春节联欢晚会，与谢娜等合作表演小品《喜欢你，喜欢我》；11月19日，主演的古装言情传奇剧《狼殿下》播出。2021年2月5日，主演的古装玄幻励志剧《斗罗大陆》登陆中央电视台电视剧频道。</a></p>
           </article>
       </div>

       <div class="list">
           <h2>演艺经历</h2>
           <a href="view2.html"><img src="images/view2.1.jpg"/></a>
           <a href="view2.html"><img src="images/view2.2.jpg"/></a>
           <a href="view2.html"><img src="images/view2.3.jpg"/></a>
           <a href="view2.html"><img src="images/view2.4.jpg"/></a>
       </div>

       <div class="main">
           <article>
               <h2>人物评价</h2>
               <p><a href="view6.html">在《陈情令》中，肖战对魏无羡整个人物的理解和剖析相当透彻。如他在处理魏无羡经历跌落乱葬岗这一重大变故时，没有像一些角色黑化后的套路式表现，他身上不会有那种苦大仇深的怨气，他在乱葬岗之后第一次与蓝忘机和江澄重逢时，给人的感觉是松弛的，同时内心也在激荡（《陈情令》总制片人杨夏评）。</a></p>
               <p><a href="view6.html">魏无羡不好演，表面话痨、实则正直重情义的人设，演过头易显喋喋不休惹人厌，太收敛又无法表现不羁而自带傲骨的气质，而肖战，拿捏得刚刚好（《上海电视周刊》评）。</a></p>
               <p><a href="view6.html">肖战是一个特别纯净的人，所以他的眼睛看起来很干净；同时，他也是一个很有天赋的演员。从《最美表演》短片合作中能看出他在拍摄前做了很多的功课。拍摄时肖战特别松弛，并没有把任何的表演痕迹加在这个角色人物里面。拍摄时肖战没有所谓的包袱，不化妆、不刮胡子、不做头发，完全去服务人物（导演苏伦评）。</a></p>
           </article>
           <a href="view6.html"><img src="images/view6.jpg"/></a>
       </div>

       <div class="list">
           <h2>人物图册</h2>
           <a href="view7.html"><img src="images/view7.1.jpg"/></a>
           <a href="view7.html"><img src="images/view7.2.jpg"/></a>
           <a href="view7.html"><img src="images/view7.3.jpg"/></a>
           <a href="view7.html"><img src="images/view7.4.jpg"/></a>
       </div>

       <div class="footer">
           Copyright @ 2021 xiaozhan.com All Rights Reserved. 肖战网版权所有
       </div>

</div>

</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";

*{margin:0;padding:0;box-sizing:border-box;
}
html body{font-size:12px;font-family:"Microsoft YaHei";color:#555;background-color:#f9f4f1;
}
a{color:#555;text-decoration:none;
}

.container{width:1000px;margin:0 auto;overflow:hidden;
}

.wrapper{float:left;width:1000px;background-color:#fff;
}

.header{float:left;width:1000px;height:100px;line-height:100px;font-size:34px;font-weight:bold;text-align:center;background-color:#f7b4a4;
}
.header a{color:#fff;
}

.nav{float:left;width:1000px;height:50px;line-height:50px;margin-bottom:30px;font-size:14px;font-weight:bold;background-color:#f05f4e;
}
.nav a{margin:0 14px 0 25px;color:#fff;
}
.nav a:nth-last-child(1){margin-right:0;
}

.focus{float:left;position:relative;width:1000px;
}
.focus_image{float:left;width:950px;height:430px;list-style:none;margin-left:25px;
}
.focus_image li{width:950px;height:430px;display:none;
}
.focus_image li.current{display:block;
}
.focus_image li img{float:left;width:950px;height:430px;
}

...

3.JS

代码如下（节选示例）：

window.οnlοad=function()
{
   function getIdName(id,tagName)
   {
       if(tagName!=0)
       {
           return document.getElementById(id).getElementsByTagName(tagName);
       }
       else
       {
           return document.getElementById(id);
       }
   }

   function rotation(json)
   {
       var that;
       var start=0;
       var index=0;
       var timer=null;
       var option={
           li:"li",       //默认用li包裹
           wrapperId:"",   //最外面 id
           imageId:"",       //图片外面id
           buttonId:"",   //按钮外面id
           ms:4000           //多少毫秒切换一张,默认4000毫秒
       }

       for(var i in option)
       {
           if(json[i]!=undefined)
           {
               option[i]=json[i];
           }
       }

       var wrapper=getIdName(option.wrapperId,0);
       var images=getIdName(option.imageId,option.li);
       var buttons=getIdName(option.buttonId,option.li);