17. 大学生HTML期末大作业 ―【哈士奇宠物狗主题响应式网页】 Web前端网页制作 html5+css3

佳人悠悠

已于 2024-11-05 17:24:32 修改

阅读量520 前端网页动物文章标签：前端 html 课程设计 javascript html5 css jquery

于 2024-11-05 17:23:53 首次发布

本文链接：https://blog.csdn.net/m0_67368443/article/details/143515948

前端网页同时被 2 个专栏收录

169 篇文章 0 订阅

动物

12 篇文章 0 订阅

仙女网页设计-CSDN博客

5000+完整代码，主题涵盖30+种类型:

二、网页简介

本实例应用html5+css3，div+css布局，bootstrap框架等。适用于大学生网页课程作业设计。响应式布局可以根据不同的设备屏幕大小自动调整页面布局，提高用户体验；本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

三、网页文件

本网页实例共包含4个页面：

四、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

五、代码展示

1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/css.css"/>
<title>二哈</title>
</head>

<body style=" background:#fff;">

<div class="container">
<header>
<div class="logo"><img src="images/logo.png"/></div>
<div class="nav"><a href="index.html">主页</a><a href="lishi.html">历史起源</a><a href="chengzhang.html">成长历</a><a href="erha.html">二哈</a></div>
<div class="clear"></div>
</header>


<div class=" con">
<div class="Part1 container">
<h2 class="Title"><i><img src="images/tli.png"></i>哈士奇</h2>
<div class="col-sm-4"> <img src="images/2.jpg" width="100%"/> </div>
<div class="col-sm-8 text">
<p>西伯利亚雪橇犬（俄语：Сибирский хаски，英语：Siberian Husky），常见别名哈士奇，昵称为二哈。<br>
西伯利亚雪橇犬是原始的古老犬种，主要生活在在西伯利亚东北部、格陵兰南部。哈士奇名字是源自其独特的嘶哑叫声 [1] 。哈士奇性格多变，有的极端胆小，也有的极端暴力，进入人类社会和家庭的哈士奇，都已经没有了这种极端的性格，比较温顺，是一种流行于全球的宠物犬。哈士奇、金毛犬与拉布拉多并列为三大无攻击性犬类 [2] ，被世界各地人们广泛饲养，并在全球范围内有大量该犬种的赛事。</p>
</div>
</div>
<div class="container part2">
<h2 class="Title"><i><img src="images/tli.png"></i>进化史</h2>
<ul>
<li class="col-sm-4"><img src="images/18.jpg" width="100%"/>
<p>三个月</p>
</li>
<li class="col-sm-4"><img src="images/9.jpg" width="100%"/>
<p>一岁</p>
</li>
<li class="col-sm-4"><img src="images/111.jpg" width="100%"/>
<P>两岁</P>
</li>
</ul>
<div class="banner col-sm-12"> <img src="images/bo.jpg"/> </div>
</div>
</div>

<footer>
<p>版权所有 </p>
</footer>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

/*通用类*/
* {
   margin: 0;
   padding: 0;
}
body {
   margin: 0 auto;
   line-height: 21px
}
img {
   border: none;
   min-width: 100%;
}
a {
   cursor: pointer;
   color: #333;
   text-decoration: none;
   outline: none;
}
em {
   font-style: normal;
}
.lt {
   float: left;
}
.rt {
   float: right;
}
ul, li, h1, h2, h3, p {
   padding: 0;
   margin: 0;
   list-style: none
}
ul {
   list-style-type: none;
}
.clear {
   clear: both
}
/*header 开始*/
header {
   background: #878984;
   border-bottom: 2px solid #f1f1f1;
}
header .logo {
   float: left;
   height: 90px;
   width: auto;
   margin: 0 auto;
}
header .logo img {
   width: auto;
   height: 100%;
}
header .nav {
   float: left;
   width: 50%;
   text-align: center;
   height: 90px;
   line-height: 90px;
}
header .nav a {
   float: left;
   width: 25%;
   display: inline-block;
   text-align: center;
   color: #fff;
   font-size: 24px;
   margin-top: 10px;
}
.banner {
   background-size: cover;
}
.banner img {
   width: 100%;
   display: block;
}
footer {
   text-align: center;
   color: #fff;
   background: #878984;
}
footer p {
   height: 50px;
   line-height: 50px;
}
.Title i {
   height: 50px;
   display: inline-block;
   position: relative;
   top: -8px;
   margin-right: 10px;
}
.Title i img {
   height: 100%;
   width: auto;
}
.Title {
   font-size: 32px;
   color: #333;
   height: 50px;
   line-height: 50px;
   margin: 20px 10px;
}
.con .text {
   font-size: 18px;
   color: #333;
   line-height: 26px;
}
.con .text p {
   margin: 0 0 10px 0;
}
.part2 {
   margin-bottom: 30px;
}
.part2 li {
   text-align: center;
   margin-bottom: 30px;
}
.part2 li p {
   font-size: 16px;
   padding: 10px 0;
   display: block;
   background: #CCC;
}
.part2 li img {
   height: 270px;
}
.container {
   background: #f1f1f1;
}
.bj {
   display: block;
   width: 100%;
   background: url(../images/bj.gif);
   height: 40px;
   margin-bottom: 20px;
}
.part3 li {
   min-height: 120px;
   text-align: left;
}
.part3 li p {
   min-height: 120px;
   padding: 10px;
}
.part4 li {
   height: 278px;
   background: #ccc;
   margin-bottom: 20px;
   overflow: hidden;
}