382.大学生HTML期末大作业 —【布偶猫宠物主题网页 (7页)】 Web前端网页制作 html+css
目录
一、网页简介
二、网页文件
三、网页效果
四、代码展示
1.html
2.CSS
五、总结
1.简洁实用
2.使用方便
3.整体性好
4.形象突出
5.交互式强
欢迎来到我的CSDN主页！您的支持是我创作的动力！Web前端网页制作、网页完整代码、大学生期末大作业案例模板完整代码、技术交流等，有兴趣的联系我交流学习!更多优质博客文章、网页模板点击以下链接查阅：
仙女网页设计-CSDN博客
5000+网页案例完整代码，主题涵盖30+种类型:
一、网页简介
本实例应用html+css，div+css布局，代码精简，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。
二、网页文件
本网页实例共包含7个页面：
三、网页效果
以下是本篇文章正文内容，下面案例仅供参考（节选示例）：
四、代码展示
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="style/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="images/top.jpg" width="1000"/></div>
<div id="nav"> <a href="index.html">首页</a> <a href="suo.html">布偶猫简介</a> <a href="dian.html">外形特点</a> <a href="qing.html">生活习性</a> <a href="cheng.html">品种介绍</a><a href="news.html">精彩图集</a><a href="about.html">给我留言</a> </div>
<div class="cont">
<h2 style="border-bottom:1px solid #ddd; font-size:15px;">布偶猫简介</h2>
<P>布偶猫，又称"布拉多尔（Ragdoll）"，发源于美国，是一种杂交品种宠物猫。是现存体型最大、体重最重的猫之一。头呈楔形，眼大而圆，被毛丰厚，四肢较长且富有肉感，尾长，身体柔软，毛色有重点色、手套色或双色等等。布偶猫较为温顺好静，对人友善。其美丽优雅又非常类似于狗的性格（Puppy cat）而又被称为"仙女猫"，"小狗猫"。特殊的外貌和温和的性格是布偶猫最大的特点之一。</P>
<h2 style="border-bottom:1px solid #ddd; font-size:15px;">布偶猫相册</h2>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td><img src="images/qing01.jpg" width="220" height="200"/></td>
<td><img src="images/qing02.jpg" width="220" height="200"/></td>
<td><img src="images/qing03.jpg" width="220" height="200"/></td>
<td><img src="images/qing04.jpg" width="220" height="200"/></td>
</tr>
</table>
</div>
<div id="bottom" style=" text-align:center;">
<P>布偶猫</P>
</div>
</body>
</html>
...
2.CSS
代码如下（节选示例）：
@charset "utf-8";
/* CSS Document */
/*重置样式*/
* {
margin:0;
padding:0;
}
ul, li, dl, dt, dd {
list-style:none;
}
a {
text-decoration:none;
color:#fff;
}
a:hover {
text-decoration:none;
}
img {
border:none;
}
/*公用样式*/
body {
font-family:'微软雅黑', Helvetica, sans-serif;
font-size:14px;
color:#333;
background:#F0F2F5;background:url(../images/bg.jpg) right top fixed;
}
#header {
width:1000px;
margin:0 auto;
}
#nav {
width:1000px;
margin:0 auto;
background:#000;
height:40px;
line-height:40px;
}
#nav a {
padding:0px 30px;
font-size:14px;
}
.cont {
width:940px;
margin:0 auto;
background:#fff;
padding:15px 30px;
line-height:40px;
}
.cont h2 {
font-size:30px;
color:#E0503D;
margin-bottom:30px;
}
.cont p {
font-size:20px;
}
#bottom {
width:960px;
margin:0 auto;padding:20px;background:#fff;
}
#bottom p {
text-align:center;
line-height:50px;
}
...
五、总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多优质博客文章、完整代码案例模板，点击以下链接查阅：
仙女网页设计-CSDN博客
Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流
相关知识
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业...
HTML5期末大作业：宠物网站设计——布偶猫(7页)带留言板 HTML+CSS+JavaScript web结课作业的源码 web网页设计实例作业 html大学生网站开发实践作业
【web前端期末大作业】简单HTML宠物猫网页（HTML+CSS）
HTML5期末大作业：宠物狗狗主题——好宠之家(5页) HTML+CSS+JavaScript 学生个人HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品
HTML5期末大作业：动物宠物主题网站设计——宠物网(8页)HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
宠物商店宠物网站 网页设计 html源码 大作业
宠物狗狗网站 网页设计 html源码 大作业
【web开发网页制作】宠物主题萌宠之家网页制作（4页面）
384.大学生HTML期末大作业 —【蓝色版爱宠之家宠物主题网页(5页)】 Web前端网页制作 html+css
网址: 382.大学生HTML期末大作业 —【布偶猫宠物主题网页 (7页)】 Web前端网页制作 html+css https://m.mcbbbk.com/newsview891458.html
| 上一篇: 宠物网页设计教程：HTML5+C |
下一篇: 宠物网站都有哪些？宠物网站大全介 |
