300.明星鹿晗个人网页大学生期末大作业 Web前端网页制作 html+css+js

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

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

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

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

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

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

一、网页概述

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

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<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" />
</head>
<body>
<div class="index_list">
<ul>
<li> <a href="index.html">首页</a> </li>
<li> <a href="jingli.html">演艺经历</a> </li>
<li> <a href="zuopin.html">主要作品</a> </li>
<li> <a href="hudong.html">社会活动</a> </li>
<li> <a href="huojiang.html">获奖记录</a> </li>
<li> <a href="pinjia.html">人物评价</a> </li>
<li> <a href="login.html">登录</a> </li>
</ul>
</div>
<div class="cleaner"></div>
<div id="container">
<div class="dm">

<div id="yc-mod-slider">
<div class="wrapper">
<div id="slideshow" class="box_skitter fn-clear">
<ul>
<li> <img class="cubeRandom" src="images/dm1.jpg" /></li>
<li> <img class="cubeRandom" src="images/dm2.jpg" /></li>
<li> <img class="cubeRandom" src="images/dm3.jpg" /></li>
</ul>
</div>
<script type="text/javascript" src="js/slideshow.js"></script>
</div>
</div>

</div>
<div class=" clear"></div>
<div class="index_main">
<h1>鹿晗</h1>
<p>鹿晗（LU HAN），1990年4月20日出生于北京海淀区，中国内地影视男演员、歌手。2008年赴韩国留学期间在明洞逛街时，被韩国SM娱乐有限公司星探发掘成为旗下练习生。2012年4月以韩国男子组合EXO/EXO-M成员正式出道，组合内担任主唱、领舞、门面担当。2014年8月，个人微博单条评论创吉尼斯世界纪录，成为中文社交媒体上的首位吉尼斯世界纪录获得者。10月，申请与SM公司合同无效，于2016 ... >>><br />
</p>
<p>
<img src="images/1.jpg">


</p>

</div>
<div class="share">

<div class="cleaner"></div>
</div>
<div id="footer"> Copyright © 明星--鹿晗</div>
</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

html {
background: #000;;
}

body {
   margin: 0;
   padding:0;
   font-family: Tahoma, "Trebuchet MS", Verdana;
   font-size: 12px;
   line-height: 1.5em;
   width: 100%;
   display: table;
   background: url(../images/bj.jpg) center top no-repeat fixed #000;
}

a:link, a:visited { color: #87430c; text-decoration: none; }
a:active, a:hover { color: #FFFF00;}

p {
   font-family: Tahoma, "Trebuchet MS", Verdana;
   font-size: 14px;
   color: #222; line-height:24px;
   text-align: justify;
}

h1 {
   font-family: Tahoma, "Trebuchet MS", Verdana;
   font-size: 25px;
   color: #333;
   font-weight: normal;
   margin: 0 0 15px 0;
}

h2 {
   font-family: "Times New Roman", Times, serif;
   font-size: 14px;
   color: #111;
   margin: 0 0 10px 0;
}

h3 {
   font-family: Tahoma;
   font-size: 13px;
   color: #111;
   font-weight: normal;
   margin: 0 0 3px 0;
}

.title_left {
   float: left;
   width: 333px;
   height: 46px;
}

.title_right {
   float: right;
   width: 165px;
   height: 40px;
   color: #d89300;
   font-family: Tahoma;
   font-size:28px;
   margin: 0;
   padding: 6px 0 0 0;
}

.title_left h1 {
   float: left;
   display: block;
   font-family: Tahoma;
   font-size: 25px;
   color: #e17638;
   font-weight: normal;
   margin: 0 0 2px 0;
}

.title_left h3 {
   font-family: Tahoma;
   font-size: 20px;
   color: #fff;
   font-weight: normal;
   display: block;
   float: right;
}

...