9. 大学生HTML5期末大作业 ―【权志龙明星主题网页】 Web前端网页制作 html5+css3-CSDN博客

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

一、更多推荐

欢迎来到我的CSDN主页！Web前端网页制作、大学生期末大作业、课程设计、毕业设计、网页模版源码、学习资料等，更多优质博客文章、网页模板点击以下链接查阅：

仙女网页设计-CSDN博客

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

二、网页简介

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

三、网页文件

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

四、网页效果

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

五、代码展示

1.html

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="tzyh" />
<title>权志龙</title>

<link rel="stylesheet" href="css/reset.css" media="screen" />
<link rel="stylesheet" href="css/style.css" media="screen" />



</head>

<style>
A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
A.applink {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
A.info {color:#2F5BFF;background:transparent;text-decoration:none}
A.info:hover {color:green;background:transparent;text-decoration:underline}
</style>

</section>

</header>
</section>

<article id="anything-slider">
<div class="shadow-top"></div>
<section id="slider-container" style=" width:960px; margin:0 auto;">

<div class="lunhuan">
<script type="text/javascript" language="JavaScript">

var widths=960;
var w=3;
var widthss=widths+w;
var heights=300;
var heightss=heightss+w;
var heightt=20;
var counts=3;

img1=new Image();img1.src='img/qz7.jpg';
url1=new Image();url1.src='#';

img2=new Image();img2.src='img/qz77.jpg';
url2=new Image();url2.src='#';

img3=new Image();img3.src='img/qz777.jpg';
url3=new Image();url3.src='#';

var nn=1; //当前所显示的滚动图
var key=0; //标识是否为第一次开始执行
var tt; //标识作用

function change_img()
{
if(key==0){key=1;} //如果第一次执行KEY=1，表示已经执行过一次了。
else if(document.all)//document.all仅IE6/7认识，firefox不会执行此段内容
{
document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上
document.getElementById("pic").filters[0].Play(duration=2); //开始转换
document.getElementById("pic").filters[0].Transition=23;//转换效果
}

eval('document.getElementById("pic").src=img'+nn+'.src'); //替换图片
eval('document.getElementById("url").href=url'+nn+'.src'); //替换URL
//替换ALT

for (var i=1;i<=counts;i++)
{
document.getElementById("xxjdjj"+i).className='axx';
}
document.getElementById("xxjdjj"+nn).className='bxx'; //将当前页面的ID设置为选中状态
nn++;
if(nn>counts){nn=1;} //如果ID大于总图片数量。则从头开始循环
tt=setTimeout('change_img()',4000); //在4秒后重新执行change_img()方法.
}
function changeimg(n)//点击黑条上的链接执行的方法。
{
nn=n; //当前页面的ID等于传入的N值,
window.clearInterval(tt); //清除用于循环的TT
//重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行.
change_img();
}
//样式表
document.write('<style>');
document.write('.axx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;font-size:12px;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#666;');
document.write('line-height:12px;font:12px sans-serif;background-color:#eee;border:1px solid #666}');

document.write('.bxx{padding:1px 6px;margin-left:3px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#111;');
document.write('line-height:12px;font:12px sans-serif;background-color:#fff;border:1px solid #111}');

document.write('</style>');
//内容部分
document.write('<div style="width:'+widthss+'px;height:'+heights+'px;');
document.write('overflow:hidden;text-overflow:clip;float:left;">');
document.write('<div><a id="url" target="_blank"><img id="pic" ');
document.write('style="border:0;');
document.write('FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)"');
document.write(' width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);');
document.write('width:100%-2px;text-align:right;');
document.write('top:-19px;position:relative;margin:-5px 9px 0 1px;height:22px;line-height:22px;');
document.write('z-index:4000;"><div style="height:22px;line-height:22px;padding:2px 0 0 0;">');

for(var i=1;i<counts+1;i++)
{
document.write('<a href="#" id="xxjdjj'+i+'"');
document.write(' class="axx" target="_self">'+i+'</a>');
}
document.write('</div></div></div>');

change_img();

</script>
</div>

</section>
<div class="shadow-bottom"></div>
</article>

<section id="content-wrapper" style=" background:#fff;">

<section class="container_12">

<hr class="ruler" />

<section class="carousel grid_12">

<section class="grid_12 section-title" style=" color:red;">

<h6 style="color:#000; font-size:14px;">权志龙图集</h6>

...

2.CSS

代码如下（节选示例）：

:focus {
outline: 0;
}

body{
background: #fff;
color: #8f8f8f;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6{
color: #6f6f6f;
text-transform: uppercase;
margin-bottom: 5px;
}

h1{
font: bold 22px 'Droid Sans', sans-serif;
line-height: 32px;
}

h2{
font: bold 20px 'Droid Sans', sans-serif;
line-height: 30px;
}

h3{
font: bold 18px 'Droid Sans', sans-serif;
line-height: 28px;
}

h4{
font: bold 16px 'Droid Sans', sans-serif;
line-height: 26px;
}

h5{
font: bold 14px 'Droid Sans', sans-serif;
line-height: 24px;
}

h6{
font: bold 12px 'Droid Sans', sans-serif;
line-height: 22px;
}

/* PARAGRAPH */
p{
font: normal 12px 'Droid Sans', sans-serif;
line-height: 20px;
}

/* LINKS */
a{
text-decoration: none;
font: 12px 'Droid Sans', sans-serif;

-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

/* SPAN */
span{
font: 12px 'Droid Sans', sans-serif;
}

/* LIGHT COLORED TEXT */
.text-light{
color: #bbb;
}

/* FINDOUT MORE LINKS */
a.find-out-more{
margin-top: 20px;
float: left;
font: 12px 'Droid Sans', sans-serif;
display: block;
}

/* BLOCKQUOTE STYLES */
blockquote{
background: #fcfcfc;
font: italic 14px 'Droid Serif', serif;
line-height: 24px;
padding: 15px 20px;
margin: 15px 0;
float: left;
}

blockquote.left{
width: 60%;
margin: 10px 15px 8px 0;
float: left;
}

blockquote.right{
width: 60%;
margin: 10px 0 8px 15px;
float: right;
}

/* TEXT HIGHLIGHT */
.highlight-dark{
background: #8f8f8f;
color: #fff;
}

.highlight-light{
background: #ececec;
}

/*=====================================================================================
HEADER CONTAINER STYLES
======================================================================================*/
#header-wrapper{
width: 100%;
}

#header{
width: 940px;
margin-top: 30px;
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;
}

/* LOGO */
#logo{
width: 247px;
height: 28px;
margin-bottom: 30px;
margin-right: 30px;
float: left;
}

/* SOCIAL BOOKMARKS */
.social{
width: 663px;
float: right;
margin-bottom: 25px;
}

.social li{
float: right;
width: 25px;
height: 25px;
border-radius: 25px;
margin-right: 5px;
cursor: pointer;
}

.social li a{
text-indent: -9999px;
display: block;
}

/* SOCIAL AIM */
.social li.aim{
background: #ececec url("../img/social/aim.png") no-repeat center;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
-ms-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.social li.aim:hover{
background: #e6490c url("../img/social/aim.png") no-repeat center;
}

......