目录
欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！
说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！
奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！
我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！
非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！
一、网页概述
本实例应用html+css，div+css布局，代码精简，适用于大学生网页课程作业设计；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含7个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!doctype html>
<html>
<head>
<meta charset="GB2312">
<meta name="keywords" content="tzyh" />
<title>Resume</title>
<link href="css/style.css" rel="stylesheet"></head>
<body >
<!-- Copyright ?2005. Spidersoft Ltd -->
<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>
<!-- /Copyright ?2005. Spidersoft Ltd -->
<center>
<table width="960" border="0" class="main" cellspacing="0" cellpadding="0" style=" margin-bottom:20px;" >
<tr>
<td height="76" colspan="3" class="branding">
<center><a href="index.html" >
<img src="images/logo.png" alt="Horus" /></center>
</a> </td>
</tr>
<tr>
<td height="125" colspan="3">
<table width="960" border="0" align="center" cellspacing="0" class="nav">
<tr><td></td>
<td width="120" height="125" ><a class="active" href="index.html" >首页</a></td>
<td width="120" ><a href="x.html" >个人简介</a></td>
<td width="120" ><a href="c.html" >演艺经历</a></td>
<td width="120"><a href="r.html" >个人生活</a></td>
<td width="120"><a href="d.html" >代表作品</a></td>
<td width="150"><a href="z.html" >相册欣赏</a></td>
<td width="120"><a href="k.html" >在线留言</a></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="870" colspan="3" >
<table width="960" border="0" align="center" cellspacing="0">
<tr>
<td width="960" height="1270" style=" background:#fff;">
<div class="t1"><br>
<h1 style="font-size:24px; line-height:50px; color:#000; text-indent:1em;">欢迎来到鹿晗的个人网站~</h1>
<table border="0" cellspacing="0" cellpadding="0" style="padding:30px; line-height:30px; font-size:14px;">
<tr>
<td><img src="images/index.png" width="300" /></td>
<td><p style="padding-left:26px; font-size:14px; color:#666;">鹿晗（LU HAN），1990年4月20日出生于北京海淀区，中国内地影视男演员、歌手。
2008年赴韩国留学期间在明洞逛街时，被韩国SM娱乐有限公司星探发掘成为旗下练习生。2012年4月以韩国男子组合EXO/EXO-M成员正式出道，组合内担任主唱、领舞、门面担当 。
2014年8月，个人微博单条评论创吉尼斯世界纪录，成为中文社交媒体上的首位吉尼斯世界纪录获得者 。10月，申请与SM公司合同无效，于2016年7月19日达成和解 。
2015年1月，主演的首部电影《重返20岁》上映，凭借此片获第22届北京大学生电影节最受欢迎男演员奖 。5月，登《福布斯》杂志中文版封面 。8月，加盟综艺节目《奔跑吧兄弟第三季》 。10月，主演的悬疑电影《我是证人》上映 。12月，个人首张专辑《Reloaded（重启）》全球发行 。
2016年6月，参加浙江卫视综艺节目《我去上学啦第二季》 。8月，主演的电影《盗墓笔记》上映，在片中饰演男主角吴邪 。12月，荣登"中国90后10大影响力人物"榜首，并以2.7亿财富居2016"中国90后富豪榜"第五位 ；同月，主演张艺谋执导的好莱坞电影《长城》，在片中饰演士兵彭勇 [15-17] 。
2017年1月，首次登上央视春节联欢晚会演唱歌曲《爱你一万年》 。4月，主演古装玄幻剧《择天记》 [19] 登陆湖南卫视十点档青春进行时剧场 ，该剧平均收视率达1.12，全网播放量突破270亿，为周播剧场开创以来非暑期档收视冠军 。6月，主演青春励志剧《甜蜜暴击》 。9月，主演科幻战争电影《上海堡垒》。
2018年3月，参加爱奇艺综艺节目《热血街舞团》</p></td>
</tr>
</table>
</div>
<div class="t2" style="padding-left:30px;">
<h1 style="font-size:24px; line-height:50px; color:#000; text-align:center;">鹿晗风采~</h1>
<table border="0" cellspacing="20" cellpadding="0">
<tr>
<td><img src="images/a1.jpg"></td>
<td><img src="images/a2.jpg"></td>
<td><img src="images/a3.jpg"></td>
</tr>
<tr>
<td><img src="images/a4.jpg"></td>
<td><img src="images/a5.jpg"></td>
<td><img src="images/a6.jpg"></td>
</tr>
<tr>
<td><img src="images/a7.jpg"></td>
<td><img src="images/a8.jpg"></td>
<td><img src="images/a9.jpg"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="footer" colspan="3" >
<center><font color="white">鹿晗个人网站</font></center>
</td>
</tr>
</table>
</center>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
*{ margin:0; padding:0;}
body {
font-family:Arial, '微软雅黑', sans-serif;
font-size: 13px;
background: #55462d url("../images/templatemo_body.jpg") repeat ;
-webkit-font-smoothing: antialiased;
margin:0;
padding:0;
}
.nav{ height: 90px;}
.nav tr{text-align:center;}
.nav tr td a {
color:#026a7b;
padding:9px 26px; font-size:15px;
font-weight: bold;
text-decoration: none;
}
.nav tr td a:hover,.nav tr td a.active{
background:pink; }
.branding {
position: relative;
z-index: 9999;
}
#footer{
height:60px;
color:#E8E1AA;
font-weight: bold;
background: url("../images/border-yellow.png") repeat-x left top;}
.t1{
clear: both;
padding-bottom: 20px;
margin-bottom: 40px;
background: url("../images/hr2.png") no-repeat bottom center
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询，有兴趣的联系我!
您的支持是我创作的动力！看到这里就【点赞收藏博文】，Thanks！
更多优质博客文章、网页模板点击以下链接查阅：仙女网页设计-CSDN博客。
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
