HTML期末大作业~布偶猫7页带留言板~Web大学生网页成品-s012

最新推荐文章于 2024-09-28 19:02:04 发布

HTML网页设计-期末大作业

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量1.9k

点赞数 38

分类专栏： HTML期末大作业文章标签：前端 html 课程设计 css js 大作业

本文链接：https://blog.csdn.net/qq_41157797/article/details/136919809

版权

HTML期末大作业专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这篇文章详细分析了一段HTML和CSS代码，展示了如何创建一个简单的静态网页，包括页面结构、样式、图片展示和链接功能，以布偶猫为主题，介绍了HTML标签、CSS样式和页面元素的使用。

摘要由CSDN通过智能技术生成

HTML期末大作业~ 学生HTML个人网页作业作品下载个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作，HTML网页设计结课作业

http://imianba.cn/#/articles?category=1&theme=0

这段代码是一个简单的静态网页，展示了有关布偶猫的信息和相册。让我们来分析这段代码的功能和使用技术。

页面结构：
页面采用了经典的HTML结构，包括文档声明（<!DOCTYPE>）、html标签、head标签和body标签。
在head标签中设置了页面的字符编码为utf-8，并设置了页面的标题为“无标题文档”。
在head标签中还引入了一个外部CSS样式表（style/css.css），用于设置页面的样式。
页面内容：
页面内容主要分为顶部header、导航栏nav、内容区域cont和底部bottom。
顶部header展示了一个图片（top.jpg）作为页面的顶部背景。
导航栏nav包括了多个菜单链接，用户可以点击链接跳转到不同的页面。
内容区域cont包括了布偶猫的简介和相册信息，使用了标题（h2）和段落（P）标签展示文本内容。
相册部分使用了一个表格（table）来展示多张布偶猫的图片。
样式设置：
页面中使用了内联样式（style属性）来设置部分元素的样式，如标题下方的横线和字体大小。
页面引入了外部CSS样式表（css.css），用于统一设置页面的样式，包括导航栏样式、内容区域样式等。
使用技术：
HTML：用于搭建页面结构，包括标签、属性等。
CSS：用于设置页面样式，包括颜色、字体、边框等。
图片：用于展示页面元素，如顶部背景图片和相册图片。
链接：用于实现页面内部跳转链接。
表格：用于布局相册部分的图片展示。
总的来说，这段代码展示了一个简单的静态网页，通过HTML和CSS技术实现了页面的结构和样式设置，并展示了布偶猫的简介和相册信息。虽然页面比较简单，但通过这个例子可以了解到如何使用HTML和CSS创建静态网页，展示文本内容和图片信息。

<!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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

在这里插入图片描述

源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ ~ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
❉ ~ http://imianba.cn/#/articles?category=1&theme=0
❉ ~ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑