550.大学生HTML期末大作业 —【杨洋明星主题网页(7页)】 Web前端网页制作 html+css+js

一只小小的眠羊

于 2025-05-26 15:05:42 发布

阅读量1.6k

点赞数 55

分类专栏：大学生期末大作业明星文章标签：前端 html 课程设计 html5 css3 css javascript

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

版权

大学生期末大作业同时被 2 个专栏收录

507 篇文章

订阅专栏

明星

20 篇文章

订阅专栏

欢迎来到我的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" style="overflow:auto;overflow-x:hidden;">
<head>
<title>明星--杨洋</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/lrtk.css" />
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/pptBox.js"></script>
</head>
<body>

<div class="clear"></div>

<div class="nav">
<ul>
<li><a href="index.html">首页 </a></li>
<li><a href="jibenxinxi.html">基本信息</a></li>
<li><a href="yanyijingli.html">演艺经历</a></li>
<li><a href="zhuyaozuopin.html">主要作品</a></li>
<li><a href="shehuihuodong.html">社会活动</a></li>
<li><a href="huojiangjilu.html">获奖记录</a></li>
<li><a href="renwupingjia.html">人物评价</a></li>
</ul>
</div>

<div class="clear"></div>
<div class="main">
<div class="clear"></div>
<div class="banner">
<div id="xxx" >
<script>
var box =new PPTBox();
box.width = 980; //宽度
box.height =515;//高度
box.autoplayer = 3;//自动播放间隔时间

//box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})
box.add({"url":"images/q1.jpg","href":"#","title":"z赵丽颖1"})
box.add({"url":"images/q2.jpg","href":"#","title":"赵丽颖2"})
box.add({"url":"images/q3.jpg","href":"#","title":"赵丽颖3"})
box.add({"url":"images/q4.jpg","href":"#","title":"赵丽颖4"})
box.add({"url":"images/q5.jpg","href":"#","title":"赵丽颖5"})
box.show();
</script>
</div>
</div>

<h2>人物简介</h2>
<h2></h2>
<p><br />
<br />
杨洋 <br />
杨洋，1991年9月9日出生于上海，籍贯安徽合肥，毕业于中国人民解放军艺术学院2003级舞蹈系，中国内地影视男演员。2007年，因在李少红版《红楼梦》中饰演少年贾宝玉而踏入影视圈。2010年，他凭借该剧获得BQ红人榜年度最佳新人奖。2011年，杨洋参演个人首部电影《建党伟业》。2015年，因主演青春电影《左耳》和冒险剧《盗墓笔记》而获得更多关注；同年，其主演的青春励志剧《旋风少女》取得全国同时段电 ... >>></p>
<p></p>
<p></p>
<h2>人物照片浏览</h2>
<div class="main_list">
<ul>
<li><a href="#"><img src="images/q1.jpg" /></a></li>
<li><a href="#"><img src="images/q2.jpg" /></a></li>
<li><a href="#"><img src="images/q3.jpg" /></a></li>
<li><a href="#"><img src="images/q4.jpg" /></a></li>
<li><a href="#"><img src="images/q5.jpg" /></a></li>
<li><a href="#"><img src="images/q6.jpg" /></a></li>
<li><a href="#"><img src="images/q7.jpg" /></a></li>
<li><a href="#"><img src="images/q8.jpg" /></a></li>
<li><a href="#"><img src="images/q9.jpg" /></a></li>
<li><a href="#"><img src="images/q10.jpg" /></a></li>
<li><a href="#"><img src="images/q11.jpg" /></a></li>
<li><a href="#"><img src="images/q12.jpg" /></a></li>
</ul>
</div>
<div class="clear"></div>
</div>

<div class="clear"></div>
<div class="foot">
<p> 明星杨洋版权所有</p>

</div>

</body>
</html>

...

2.CSS

代码如下（节选示例）：

/* CSS Reset */
*{
   margin:0;
   padding:0;
   font-family:Microsoft YaHei;
   text-align: center;
}
.clear{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}
img{ border:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
li{ list-style-type:none;}
.ofh{overflow:hidden;}img{ vertical-align:top;}
.clear{ clear:both;}
a{ color:#000; font-size:12px; text-decoration:none;}
a:hover{ color:#000; text-decoration:none;}
body{ background:#eee;}
.ml10{ margin-left:10px;}
.ml15{ margin-left:15px;}
.ml20{ margin-left:20px;}
.mt5{ margin-top:5px;}
.mt10{ margin-top:10px;}
.mt20{ margin-top:20px;}

.head{ width:1024px;height:100px; margin: 0 auto; background:#0d7c9c;}
.logo{ width:500px; height:80px; margin:10px; float:left;}

.nav{ width:1024px; height:40px; background:#1071b5; margin:auto;}
.nav ul{ padding-left:20px;}
.nav ul li{height:40px; padding:0px 25px;float:left; text-align:center;}
.nav ul li a{ color:#eee;font-family:"Microsoft YaHei"; font-size:18px; line-height:40px;}
.nav ul li a:hover{ color:#fff;}
.nav ul li:hover{ background:#e3a726;}
.nav ul li:hover a{ color:#fff;}

.main{width:984px; padding:20px; padding-top:20px;height:auto; margin: 0 auto; background:#fff;}
.main p{color:#525446;font-family:"Microsoft YaHei"; font-size:14px; line-height:22px;}
.main h2{color:#04773d;font-family:"Microsoft YaHei"; font-size:22px; line-height:32px;}

.title{ width:100%; height:30px; background:#1959af;}
.title h2{ font-size:16px; padding-left:10px; line-height:30px; color:#fff;}

.info{ width:215px; height:auto; float:left;}
.info_nav{ width:210px; height:auto; margin:auto;}
.info_nav ul{}
.info_nav ul li{width:200px;height:31px;text-align:left;}
.info_nav ul li a{ color:#555;font-family:"Microsoft YaHei"; font-size:14px; line-height:30px;}
.info_nav ul li a:hover{ color:#600;}

.main_list{ width:960px; height:auto; }
.main_list li{ width:150px;height:100px; float:left; margin:3px; border:2px solid #fff;}
.main_list li:hover{border:2px solid #090;}
.main_list li img{ width:150px; height:100px; }

.tuku_list{ width:960px; height:auto; margin:20px auto; }
.tuku_list li{
   width:900px;
   height:800px;
   float:left;
   margin:5px;
   border:3px solid #fff;
}

...

3.JS

代码如下（节选示例）：

/**
* PPT 盒子
* 李清清 2012-05-17
*/
function PPTBox()
{
this.uid = PPTBoxHelper.getId();
PPTBoxHelper.instance[this.uid] = this;
this._$ = function(id){return document.getElementById(id);};
this.width = 400;//宽度
this.height = 300;//高度
this.picWidth = 15;//小图宽度
this.picHeight = 12;//小图高度
this.autoplayer = 4;//自动播放间隔（秒）
this.target = "_blank";
this._box = [];
this._curIndex = 0;
}
PPTBox.prototype =
{
_createMainBox : function (){
var flashBoxWidth = this.width * this._box.length + 5;
var html="<div id='"+this.uid+"_mainbox' class='mainbox' style='width:"+(this.width)+"px;height:"+(this.height+2)+"px;'>";
html += "<div id='"+this.uid+"_flashbox' class='flashbox' style='width:"+flashBoxWidth+"px;height:"+(this.height+2)+"px;'></div>";
html += "<div id='"+this.uid+"_imagebox' class='imagebox' style='width:"+this.width+"px;height:"+(this.picHeight+2)+"px;top:-"+(this.picHeight+20)+"px;'></div>";
html += "</div>";
document.write(html);
},
_init : function (){
var picstyle= "";
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
var imageHTML="";
var flashbox = "";
for(var i=0;i<this._box.length;i++){
var parame = this._box[i];
flashbox += this.flashHTML(parame.url,this.width,this.height,i);
imageHTML ="<div class='bitdiv "+((i==0)?"curimg":"defimg")+"' title ="+parame.title+" src='bit01.gif' "+picstyle+" onclick = \""+eventstr+".clickPic("+i+")\" οnmοuseοver=\""+eventstr+".mouseoverPic("+i+")\"></div>" + imageHTML;
}
this._$(this.uid+"_flashbox").innerHTML = flashbox;
this._$(this.uid+"_imagebox").innerHTML = imageHTML;

},
_play : function(){
clearInterval(this._autoplay);
var idx = this._curIndex+1;
if(idx>=this._box.length){idx=0;}
this.changeIndex(idx);
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay = setInterval(eventstr,this.autoplayer*1000);

},
flashHTML : function(url,width,height,idx) {
var isFlash = url.substring(url.lastIndexOf('.')+1).toLowerCase()=="swf";
var html = "";
if(isFlash){
html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' "
+ "codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0' width='"+width+"' height='"+height+"'>"
+ "<param name=\"movie\" value=\""+url+"\" />"
+ "<param name='quality' value='high' />"
+ "<param name='wmode' value='transparent'>"
+ "<embed src='"+url+"' quality='high' wmode='opaque' pluginspage='http://www.macromedia.com/go/getflashplayer'"
+" type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>"
+" </object>";
} else {
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']";
var style = "";
if(this._box[idx].href){
style = "cursor:pointer"
}
html="<img src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>";
}
return html;
},
changeIndex : function(idx){
var parame = this._box[idx];
moveElement(this.uid+"_flashbox",-(idx*this.width),1);
var imgs = this._$(this.uid+"_imagebox").getElementsByTagName("div");
imgs[this._box.length-1-this._curIndex].className = "bitdiv defimg";
imgs[this._box.length-1-idx].className = "bitdiv curimg";
this._curIndex = idx;
},
mouseoverPic:function(idx){
this.changeIndex(idx);
if(this.autoplayer>0){
clearInterval(this._autoplay);
var eventstr = "PPTBoxHelper.instance['"+this.uid+"']._play()";
this._autoplay = setInterval(eventstr,this.autoplayer*1000);
}
},
clickPic:function(idx){
var parame = this._box[idx];
if(parame.href&&parame.href!=""){
window.open(parame.href,this.target);
}
}