398.大学生HTML期末大作业 —【薛之谦明星主题精品网页(7页)】 Web前端网页制作 html+css+js-CSDN博客

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

欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

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

一、网页简介

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

二、网页文件

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

三、网页效果

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

四、代码展示

1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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><br />
</p>
<p>薛之谦（Joker Xue），1983年7月17日出生于上海，华语流行乐男歌手、影视演员、音乐制作人，毕业于格里昂酒店管理学院。<br />
2005年，因参加选秀节目《我型我秀》而正式出道 [1] 。2006年，发行首张同名专辑《薛之谦》，随后凭借歌曲《认真的雪》获得广泛关注 [2-3] 。2007年，凭借专辑《你过得好吗》获得MusicRadio中国TOP排行榜内地年度最受欢迎男歌手奖。2008年，发行专辑《深深爱过你》，同年在上海举行个人首场演唱会"谦年传说" [4-5] 。2013年，专辑《几个薛之谦》获得MusicRadio中国TOP排行榜内地推荐唱片 [6] 。2014年，凭借专辑《意外》获得第21届东方风云榜颁奖最佳唱作人 [7] ；同年他还获得音悦V榜年度盛典年度创作歌手奖 [8] 。<br />
2015年6月，薛之谦首度担当制作人并发行原创EP《绅士》 [9] ；同年，他还主演都市励志剧《妈妈像花儿一样》 [10] 。2016年，凭借EP《绅士》、《一半》获得第16届全球华语歌曲排行榜最受欢迎男歌手、五大最受欢迎男歌手奖、上海地区杰出歌手奖及最受欢迎创作歌手奖，而歌曲《初学者》则获得年度二十大金曲奖 [11-12] 。2017年4月，开启"我好像在哪见过你"全国巡回演唱会 [13] ；同年，薛之谦获得第7届全球流行音乐年度盛典年度最佳男歌手及MusicRadio榜中国TOP排行榜内地最佳男歌手 [14-15] 。</p>
<p><br />
<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;
}

.gallery ul{ margin-left:-40px;}
.gallery li{ float:left; margin:5px; list-style-type:none;}
.gallery li img{ width:75px; height:75px;}

li{ list-style-type:none;}

#container { width: 950px; padding:30px; margin:10px auto; background-color:rgba(255,255,255,0.7);-moz-border-radius:20px;border-radius:20px; min-height:600px; margin-bottom:50px;
}

.index_main{ width:700px; height:auto; margin:auto; padding:50px 0px;text-align:center;}
.index_main h1{ color:#fff;font-size:111px; text-align:center; line-height:136px; font-weight:normal;}
.index_list{ width:960px; margin:auto; min-height:80px; padding-top:20px;}
.index_list ul{
}
.index_list li{ height:50px; margin:15px; float:left; }
.index_list li a{ color:#fff;font-size:22px; text-align:center; line-height:36px;}
.index_list li a:hover{ color:#FC0;}

...