目录
一、网页概述
本实例应用html5+css3、视频、project等，带实验教学报告,代码简单。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页共包含4个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
1.html
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>宠物首页</title>
<link href="css/css_file.css" rel="stylesheet" type="text/css" />
<style>
p{
color: blue;
}
</style>
</head>
<body>
<div id="templatemo_container">
<div id="templatemo_menu">
<ul>
<li><a href="#" class="current">首页</a></li>
<li><a href="cw.html">宠物资料</a></li>
<li><a href="zhanghao.html">赛事报名</a></li>
<li><a href="shipin.html">宠物视频</a></li>
<li><a href="#">客服服务</a></li>
<li class="last"><a href="#">救助热线</a></li>
</ul>
</div>
<div id="templatemo_content">
<div id="main_column">
<div class="post_box">
<h2>哈士奇</h2>
<ul class="post_info">
<li class="post_date">2021年12月18日</li>
<li class="post_author"><a href="#">宠物爱好者</a></li>
<li class="post_comment"><a href="#">评论区 ( 999+ )</a></li>
</ul>
<div class="post_body">
<a href="#"><img src="img/tu1.png" alt="image" width="560" height="360" /></a>
</div>
<div class="continue"><a href="#">Continue</a></div>
</div>
<div class="cleaner_h60"></div>
<div class="post_box">
<h2>柯基犬</h2>
<ul class="post_info">
<li class="post_date">2021年12月18日</li>
<li class="post_author"><a href="#">宠物爱好者</a></li>
<li class="post_comment"><a href="#">评论区( 168 )</a></li>
</ul>
<div class="post_body">
<a href="#"><img src="img/tu2.png" alt="image" width="560" height="360"/></a>
</div>
<div class="continue"><a href="#">Continue</a></div>
</div>
<div class="cleaner_h60"></div>
<div class="post_box">
<h2>英短蓝猫</h2>
<ul class="post_info">
<li class="post_date">2021年12月18日</li>
<li class="post_author"><a href="#">宠物爱好者</a></li>
<li class="post_comment"><a href="#">评论区( 999+ )</a></li>
</ul>
<div class="post_body">
<a href="#"><img src="img/tu3.png" alt="image" width="560" height="360"/></a>
</div>
...
2.CSS
代码如下（节选示例）：
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffc;
background: #ffffff;
}
a:link, a:visited { color: #f9a025; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #FFFF66; text-decoration: underline; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.fl { float: left; }
.fr { float: right; }
.margin_r10 { margin-right: 10px; }
.button_01 a {
display: block;
width: 150px;
height: 30px;
padding: 7px 0 0 30px;
background: left bottom no-repeat;
color: #f5e5c7;
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
h1 {
margin: 0 0 20px 0;
padding: 2px 0 10px 0;
font-size: 30px;
font-weight: bold;
color: #ffffff;
}
h2 {
margin: 0px;
padding: 0px;
font-size: 26px;
color: #ffffff;
font-weight: normal;
background: url(../image/templatemo_header_bg.png) no-repeat;
}
h3 {
margin: 0 0 10px 0;
padding: 2px 0 5px 0;
font-size: 16px;
font-weight: bold;
color: #CCC;
border-bottom: 1px dotted #333;
}
h4 {
margin: 0 0 0 0;
padding: 0 0 5px 0;
font-size: 14px;
color: #ffffff;
font-weight: bold;
}
.image_wrapper {
border: 1px solid #ffffff;
margin-top: 3px;
margin-bottom: 10px;
}
.fl_image {
float: left;
margin-right: 15px
}
.fr_image {
float: right;
margin-left: 15px
}
.list_01 {
margin: 15px 0 20px 40px;
padding: 0px;
}
.list_01 li {
margin: 0px;
padding: 0 0 10px 0;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
六、更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
