目录
一、更多推荐
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
5000+网页案例完整代码，主题涵盖30+种类型:
二、网页简介
本实例应用html5+css3，代码简单，适用于大学生课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
三、网页文件
本网页实例共包含5个页面：
四、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
五、代码展示
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="top">
<div class="top-ner">
<div class="logo"><img src="images/logo.jpg" /> </div>
<div class="jy"><img src="images/jy.jpg" /></div>
</div>
</div>
<div id="nav">
<ul>
<li class="hot"><a href="index.html">网站首页</a></li>
<li><a href="jianjie.html">个人简介</a></li>
<li><a href="zuopin.html">个人作品</a></li>
<li><a href="jinian.html">后世纪念</a></li>
<li><a href="liuyan.html">留言评论</a></li>
</ul>
</div>
<div class="banner">
<img src="images/banner1.jpg" />
</div>
<div class="main">
<div class="title">个人简介</div>
<div class="box1">
<img src="images/img1.jpg" />
<h1>鲁迅先生一生简介</h1>
<p>鲁迅（1881年9月25日-1936年10月19日），原名周樟寿，字豫山，改名周树人，字豫才，浙江绍兴人。著名文学家、思想家、革命家、民主战士，新文化运动的重要参与者，中国现代文学的奠基人之一。</p>
<p>早年与厉绥之和钱均夫同赴日本公费留学，于日本仙台医科专门学校肄业。"鲁迅"，1918年发表《狂人日记》时所用的笔名，也是最为广泛的笔名。</p>
<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为"二十世纪东亚文化地图上占最大领土的作家"。</p>
<p>毛泽东曾评价："鲁迅的方向，就是中华民族新文化的方向。"</p>
</div>
<div class="title">鲁迅先生相册</div>
<div class="box2">
<table cellspacing="0" cellpadding="0" align="center"
border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">
<table width="958" height="130" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="95" height="110" align="center"><img src="images/img2.jpg" /></td>
<td width="95" align="center"><img src="images/img3.jpg" /></td>
<td width="95" align="center"><img src="images/img4.jpg" /></td>
<td width="95" align="center"><img src="images/img5.jpg" /></td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<div class="title">欢迎留言评论</div>
<div class="box3">
<div class="box3-left">
<img src="images/23.jpg" />
</div>
<div class="box3-right">
<div class="rtitle"><img src="images/img10.jpg" /></div>
<table width="100%" border="0" cellspacing="0">
<form id="form1" name="form1" method="post" action="">
<tr>
<td width="25%" height="53" align="right">姓名：</td>
<td width="75%">
<label for="textfield"></label>
<input class="int" type="text" name="textfield" id="textfield" />
</td>
</tr>
<tr>
<td height="44" align="right">邮箱：</td>
<td>
<label for="textfield2"></label>
<input class="int" type="text" name="textfield2" id="textfield2" />
</td>
</tr>
<tr>
<td height="44" align="right">留言：</td>
<td>
<label for="textfield3"></label>
<input class="liy" type="text" name="textfield3" id="textfield3" />
</td>
</tr>
<tr height="63">
<td colspan="2" align="center">
<button type="submit" class="btn"></button>
</td>
</tr>
</form>
</table>
</div>
</div>
</div>
<div class="foot">鲁迅先生介绍专题网</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
body {
margin: 0 auto;
font-size: 14px;
font-family: "微软雅黑";
line-height: 22px;
color: #585858;
}
div,p,input,ul,li,img,h1,h2,h3 {
height: auto;
margin: 0;
padding: 0;
vertical-align: middle;
}
li {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.top {
height: 80px;
}
.top-ner {
width: 983px;
margin: 0 auto;
}
.logo {
float: left;
}
.jy {
float: right;
margin-top: 10px;
}
#nav {
height: 35px;
width: 100%;
background: #1f6bbe;
}
#nav ul {
display: block;
padding: 0px;
width: 983px;
margin: 0 auto;
}
#nav ul li {
padding: 0px 40px;
height: 35px;
line-height: 35px;
float: left;
}
#nav ul li a {
color: #FFF;
font-size: 16px;
}
.hot {
background: #4e9ffb;
}
.banner {
height: 580px;
margin: 0 auto;
background: #333;
overflow: hidden;
}
.main {
width: 983px;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.title {
height: 60px;
line-height: 60px;
border-bottom: #ececec 8px solid;
font-size: 22px;
margin-bottom: 15px;
}
.box1 {
height: 270px;
}
.box1 img {
float: left;
margin-top: 30px;
margin-right: 30px;
}
.box1 h1 {
height: 65px;
line-height: 65px;
font-size: 22px;
font-weight: normal;
color: #1f6bbe;
}
...
六、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
标签：Web,网页,auto,height,html,鲁迅,font,margin From： https://blog.csdn.net/VX_L_5201314168/article/details/144351010