一、网页概述
本实例应用html5+css+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="header">
<a href="index.html">权志龙</a>
</div>
<div class="wrapper">
<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">G-DRAGON（权志龙），1988年8月18日出生于韩国首尔，韩国流行乐男歌手、词曲创作人、音乐制作人，男子演唱组合BIGBANG队长。</a></p>
<p><a href="view1.html">2001年，因参与特别企划专辑《大韩民国Hip-Hop Flex》而出道。2006年，作为组合BIGBANG成员身份正式出道。2009年，发行第一张专辑《Heartbreaker》。2012年9月15日，发行第二张专辑《One of a kind》。2013年9月，推出专辑《COUP D'ETAT》；2014年，创作发行与TAEYANG合唱的单曲《Good Boy》。2015年9月1日，随组合BIGBANG正式发行专辑《MADE SERIES》。</a></p>
<p><a href="view1.html">2017年6月，发布个人同名专辑《Kwon Ji Yong》。2017年1月7日至8日，随组合BIGBANG在韩国首尔高尺天空巨蛋举行“BIGBANG10 THE CONCERT : 0.TO.10 FINAL IN SEOUL”演唱会；2017年6月8日，发布个人同名专辑《Kwon Ji Yong》；2017年6月10日，在首尔上岩世界杯体育场举办solo演唱会“ACT III，M.O.T.T.E”，开启19个城市个人巡演。</a></p>
</article>
</div>
<div class="line">
<a href="view2.html"><img src="images/view2.jpg"/></a>
<h2>演艺经历</h2>
<p><a href="view2.html">2017年6月8日，权志龙（G-DRAGON）发布个人同名专辑《Kwon Ji Yong》；6月10日，在首尔上岩世界杯体育场举办solo演唱会“ACT III， M.O.T.T.E”，开启19个城市个人巡演。</a></p>
</div>
<div class="line">
<a href="view3.html"><img src="images/view3.0.jpg"/></a>
<h2>主要作品</h2>
<p><a href="view3.html">《KWON JI YONG》是权志龙于2017年6月9日发行的第二张迷你专辑。该专辑共收录5首歌曲。2017年6月8日宣布主打曲由《BULLSHIT》改为《无题(Untitled, 2014)》。</a></p>
</div>
<div class="line">
<a href="view5.html"><img src="images/view5.jpg"/></a>
<h2>社会活动</h2>
<p><a href="view5.html">2016年8月，G-DRAGON通过媒体了解到因内战等原因流离失所的难民们的现状，向联合国难民署韩国代表处捐献了8180万韩元。2018年2月27日，G-DRAGON陆军入伍。</a></p>
</div>
<div class="line">
<a href="view6.html"><img src="images/view6.jpg"/></a>
<h2>人物评价</h2>
<p><a href="view6.html">G-DRAGON是音乐界的才子。对于音乐，他一直有自己的坚持。可能是源于父母的领袖体质，凡事亲力亲为力求做到最好，演唱会的每一个细节他也都尽可能的去参与。（新浪娱乐评）。</a></p>
</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>
<div class="footer">
Copyright @ 2021 g-dragon.com All Rights Reserved. 权志龙网 版权所有
</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:#feefec;
}
a{color:#555;text-decoration:none;
}
.container{width:1000px;margin:0 auto;overflow:hidden;
}
.header{float:left;width:1000px;height:120px;line-height:120px;font-size:36px;font-weight:bold;text-align:center;background-color:#d32b2b;
}
.header a{color:#fff;
}
.wrapper{float:left;width:1000px;padding-bottom:30px;background-color:#fff;
}
.nav{float:left;width:1000px;height:40px;line-height:40px;margin-bottom:30px;font-size:14px;font-weight:bold;background-color:#ba3330;
}
.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;
}
.focus_button{position:absolute;bottom:20px;right:360px;padding:20px 0 0 30px;width:180px;height:30px;list-style:none;
}
.focus_button li{float:left;width:20px;height:6px;margin-left:10px;background-color:#fff;cursor:pointer;
}
.focus_button li.on{background-color:#d32b2b;
}
.main{float:left;width:1000px;margin-top:40px;
}
.main img{float:left;width:380px;height:300px;margin:4px 0 0 25px;
}
.main article{float:left;width:545px;height:300px;margin-left:25px;
}
.main article h2{float:left;width:545px;height:30px;line-height:30px;margin-bottom:10px;font-size:18px;
}
.main article p{float:left;width:545px;line-height:27px;
}
.line{float:left;width:462px;margin:30px 0 0 25px;
}
.line img{float:left;width:220px;height:160px;margin-top:5px;
}
.line h2{float:left;width:220px;height:30px;line-height:30px;margin-left:20px;font-size:18px;
}
.line p{float:left;width:220px;line-height:27px;margin:5px 0 0 20px;
}
.list{float:left;width:1000px;margin-top:20px;
}
.list h2{float:left;width:950px;height:30px;line-height:30px;margin:0 0 12px 25px;font-size:18px;
}
.list img{float:left;width:218px;height:270px;margin-left:25px;
}
.text{float:left;width:1000px;padding-bottom:20px;
}
.text h2{float:left;width:950px;height:30px;line-height:30px;margin:0 0 10px 25px;font-size:18px;text-align:center;
}
.text img{float:left;width:300px;height:445px;margin:10px 0 0 25px;
}
.text p{float:left;width:620px;line-height:27px;margin:5px 0 0 25px;
}
.work{float:left;width:1000px;padding-bottom:10px;
}
.work h2{float:left;width:950px;height:30px;line-height:30px;margin:0 0 10px 25px;font-size:18px;text-align:center;
}
.work article{float:left;width:218px;margin:10px 0 0 25px;
}
.work article img{float:left;width:218px;height:230px;
}
.work article h3{float:left;width:218px;height:30px;line-height:30px;margin-top:5px;
}
.work article p{float:left;width:218px;line-height:27px;margin-top:5px;
}
.image{float:left;width:1000px;padding-bottom:20px;
}
.image h2{float:left;width:950px;height:30px;line-height:30px;margin:0 0 10px 25px;font-size:18px;text-align:center;
}
.image img{float:left;width:460px;height:600px;margin:20px 0 0 25px;
}
.word{float:left;width:1000px;padding-bottom:10px;
}
.word h2{float:left;width:950px;height:30px;line-height:30px;margin:0 0 10px 25px;font-size:18px;text-align:center;
}
.word img{float:left;width:900px;margin:5px 0 0 50px;
}
.word p{float:left;width:900px;line-height:27px;margin:5px 0 0 50px;text-indent:25px;
}
.into{float:left;width:1000px;min-height:500px;padding:60px 0;
}
.into p{float:left;width:1000px;height:55px;margin-top:10px;
}
.into p span{float:left;width:330px;height:60px;line-height:60px;font-size:14px;text-align:right;
}
.into p input{float:left;width:330px;height:35px;margin:15px 0 0 10px;
}
.into p b{float:left;width:130px;height:60px;line-height:60px;margin-left:20px;font-size:14px;font-weight:normal;
}
.into p input.submit{letter-spacing:3px;color:#fff;background-color:#d32b2b;border:0;
}
.footer{float:left;width:1000px;height:100px;line-height:100px;text-align:center;color:#fff;background-color:#555;
}
...
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);
function scrollImage(that)
{
if(that>=0)
{
index=that;
}
else
{
if(start==0)
{
index++;
}
else
{
index--;
start=0;
}
}
if(index>=buttons.length) index=0;
if(index<0) index=buttons.length-1;
for(var j=0;j<buttons.length;j++)
{
images[j].className="";
buttons[j].className="";
}
images[index].className="current";
buttons[index].className="on";
}
images[index].className="current";
buttons[index].className="on";
for(var i=0;i<buttons.length;i++)
{
buttons[i].index=i;
buttons[i].οnclick=function()
{
that=this.index;
scrollImage(that);
}
}
timer=setInterval(scrollImage,option.ms);
wrapper.οnmοuseοver=function()
{
clearInterval(timer);
}
wrapper.οnmοuseοut=function()
{
timer=setInterval(scrollImage,option.ms);
}
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。