首页 > 分享 > 384.大学生HTML期末大作业 —【蓝色版爱宠之家宠物主题网页(5页)】 Web前端网页制作 html+css

384.大学生HTML期末大作业 —【蓝色版爱宠之家宠物主题网页(5页)】 Web前端网页制作 html+css

萌宠菠菠乐园
2024-12-25 17:22

一、网页简介

二、网页文件

三、网页效果

四、代码展示

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主流浏览器浏览。

二、网页文件

本网页实例共包含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">

</ul>
<div class="nav_r"></div>
</div>
</div>
</div>
<div id="banner">
<div id="MODBLK_223" class="mod_block media_image mb_banner_block">
<div class="flash_image"> <img src="images/cwyp11a42.jpg" tppabs="images/cwyp11a42.jpg" alt="" /> </div>
</div>
</div>
</div>


<div id="main_div">

<div class="web_bg">

<div id="main_all">
<div id="mainmain">
<div id="main_con">
<div id="i_left">
<div id="MODBLK_727" class="mod_block mb_e58bzTVu_block">
<h3 class="blk_t">文章分类</h3>
<div class="list_main category">
<div class="prod_type">
<div id="pro_type_YudXm1">
<ul>
<li> <a href="#"> 宠物医疗</a> </li>
<li> <a href="#"> 问题解答</a> </li>
<li> <a href="#"> 奇闻趣事</a> </li>
<div class="blankbar1"></div>
</ul>
</div>
</div>
<div class="list_bot"></div>
</div>
<div class="blankbar"></div>

</div>
<div id="MODBLK_728" class="mod_block mb_1D7TkOrv_block">
<h3 class="blk_t">宠物食品</h3>
<div class="newprod">
<div class="newprod_top"></div>
<div class="newprod_con">

<div class="pro_over">
<table class="media_grid" cellspacing="4" width="100%">
<tr>
<td>
<div class="newprod_list">
<div class="newprod_pic"><a href="146.htm" tppabs="146" title="珍宝猫粮什锦口味"><img name="picautozoom" border="0" src="images/nvlnhhSV.jpg" tppabs="images/nvlnhhSV.jpg" class="prodthumb" /></a></div>
<div class="newprod_name"><a href="146.htm" tppabs="146">珍宝猫粮什锦口味</a></div>
<div class="newprod_intr">分类: <a href="143.htm" tppabs="143">猫粮</a></div>

...

2.CSS

代码如下（节选示例）：

/*-----------------------------------// ȫ��ʽ //-----------------------------------*/

body {
font: 12px/180% Arial, "��", Helvetica, sans-serif, Verdana;
color: #444;
margin: 0;
text-align: center;
}

table,
td {
font: 12px/180% Arial, "��", Helvetica, sans-serif, Verdana;
color: #444;
}

table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}

th,
td {
border-collapse: collapse;
}

a {
blr: expression(this.onFocus=this.blur())
}

/*for IE*/

a {
outline: none;
}

/*for Firefox*/

A:link {
text-decoration: none;
color: #444;
}

A:visited {
text-decoration: none;
color: #444;
}

A:hover {
text-decoration: underline;
color: #ff6600;
}

#blue_font,
#blue_font a,
#blue_font a:visited {
color: #0053b9;
}

img {
border: 0;
}

div,
p,
img,
ul,
li,
form,
input,
label,
span,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}

ol,
ul,
li {
list-style-type: none;
}

.imr {
margin: 0 10px;
vertical-align: middle;
}

/*-----------------------------------// ҳ��ʽ //-----------------------------------*/

/*--- �ⲿdiv ---*/

/*#main_all{ width:970px; margin:0 auto;background:url(../images/content_top_bg.gif) no-repeat top #fff; padding-top:17px;}*/

.web_bg {
margin: 0 auto;
width: 100%;
}

#main_div {
width: 100%;
margin: 0 auto;
text-align: left;
}

/*--- ͷ�� ---*/

#top {
width: 100%;
margin: 0 auto;
}

#header {
margin: 0 auto;
width: 940px;
height: 120px;
}

#mainmain {
width: 940px;
margin: 0px auto;
}

#top_link {
float: left;
padding: 70px 0 0 180px;
}

#top_link #cart .cart_con {
border: none;
display: none;
}

#top_link,
#top_link a,
#top_link a:visited {
color: #444;
}

/*--- ��־ ---*/

#logo {
width: 940px;
float: left;
overflow: hidden;
height: 60px;
text-align: center;
margin-top: 25px;
margin-right: auto;
margin-left: auto;
}

/*--- �� ---*/

#nav {
height: 65px;
line-height: 65px;
width: 940px;
margin: 0 auto;
background: url("../images/nav_bg.gif")/*tpa=images/nav_bg.gif*/
repeat-x;
}

.nav_l {
display: none;
}

.nav_r {
display: none;
}

.navigation {
padding-left: 16px;
}

.navigation li {
float: left;
width: 110px;
text-align: center;
position: relative;
z-index: 5;
background: url("../images/nav_line.gif")/*tpa=images/nav_line.gif*/
no-repeat right center;
padding-right: 2px;
}

...

五、总结

设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:

1.简洁实用

尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；

2.使用方便

要满足使用者的要求，网页适合使用，显示出其功能美；

3.整体性好

围绕一个统一的目标设计，强调整体的功能性；

4.形象突出

尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。

5.交互式强

发挥网络的优势，想方设法使每个使用者都参与到其中来。

更多优质博客文章、完整代码案例模板，点击以下链接查阅：

仙女网页设计-CSDN博客

Web前端网页制作、大学生期末大作业、课程设计、毕业设计、完整代码案例模板、Web前端网页定制、教学课程、学习资料等，有需要的添加以下微信交流

乌龟分类及品种

长颈龟能活多久长颈龟活多久

热点分享

布偶猫吃什么对毛发好原来这些食物就可以

对于布偶猫这种长毛猫来说，一般情况下，布偶猫这样的长毛猫咪毛...

这九种宠物既新奇又独特，看完你爱上没有？

这九种宠物既新奇又独特，看完你爱上没有？小猫，小狗，仓鼠...

推荐分享

缅因猫能长多大一种体型较大的猫

缅因猫能长多大?缅因猫是很多人都喜欢的一个品种，尤其是广大的女...

警惕狗贩的骗人损招星期狗的症状特征

警惕狗贩的骗人损招染色：这一招最多的是用在斑点狗、蝴蝶犬...

热门点击排行

2024“最流行”的9种猫，附上最新参考价格，别买贵了！

带宠物被阻，女子“脱光”大闹健身房，以为不要脸就能解决问题？

分享分类导航

萌宠日常

宠物饲养指南

宠物营养食谱

384.大学生HTML期末大作业 —【蓝色版爱宠之家宠物主题网页(5页)】 Web前端网页制作 html+css

一、网页简介

二、网页文件

三、网页效果

四、代码展示

1.html

2.CSS

五、总结

1.简洁实用

2.使用方便

3.整体性好

4.形象突出

5.交互式强

乌龟分类及品种

长颈龟能活多久 长颈龟活多久

布偶猫吃什么对毛发好 原来这些食物就可以

这九种宠物既新奇又独特，看完你爱上没有？

缅因猫能长多大 一种体型较大的猫

警惕狗贩的骗人损招 星期狗的症状特征

长颈龟能活多久长颈龟活多久

布偶猫吃什么对毛发好原来这些食物就可以

缅因猫能长多大一种体型较大的猫

警惕狗贩的骗人损招星期狗的症状特征