静态网页设计——宠物狗狗网（HTML+CSS+JavaScript）

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！

感谢大佬的视频：
https://www.bilibili.com/video/BV1nk4y1X74M/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术：HTML+CSS+JS（静态网页设计）

主要内容：对宠物狗狗进行介绍。

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，

或者点击下方的按钮可以手动切换图片。

最下方使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。

部分代码：

html 复制代码

<div class="daohang">
  <p><a href="index.html">首页</a></p>
  <p><a href="gogo1.html">哈士奇</a></p>
  <p><a href="gogo2.html">藏獒</a></p>
  <p><a href="gogo3.html">贵宾犬</a></p>
  <p><a href="gogo4.html">松狮  </a></p>
  <p><a href="gogo5.html">边境牧羊犬</a></p>
  <p><a href="gogo6.html">吉娃娃</a></p>
  <p><a href="gogo7.html">其它</a></p>
  <p><a href="liuyan.html">留言</a></p>
</div>
<div class="banner1">
 <div class="gallery">
    <div class="gallery-cell">
    <img src="images/01.jpg" alt="orange tree" />
  </div>
  <div class="gallery-cell">
    <img src="images/02.jpg" alt="submerged" />
  </div>
  <div class="gallery-cell">
    <img src="images/03.jpg" alt="look-out" />
  </div>
  <div class="gallery-cell">
    <img src="images/04.jpg" alt="freedom tower" />
  </div>

2、宠物分类

宠物分类页面实际上有七个页面，分别对各种宠物狗进行了简单的文字介绍，用了p标签。最后用img标签展示几张宠物狗的图片。

该网站页面过多，我这里就不进行一一列举说明了，我放出一些页面的图片即可。

部分代码：

html 复制代码

<div class="gogo1">
  <p><strong>哈士奇介绍</strong></p>
  <hr />
  <p>西伯利亚雪橇犬（俄语：Сибирский хаски，英语：Siberian Husky），常见别名哈士奇，昵称为二哈。<br />
    西伯利亚雪橇犬是原始的古老犬种，主要生活在在西伯利亚东北部、格陵兰南部。哈士奇名字是源自其独特的嘶哑叫声 [哈士奇性格多变，有的极端胆小，也有的极端暴力，进入人类社会和家庭的哈士奇，都已经没有了这种极端的性格，比较温顺，是一种流行于全球的宠物犬。哈士奇、金毛犬与拉布拉多并列为三大无攻击性犬类 ，被世界各地人们广泛饲养，并在全球范围内有大量该犬种的赛事。</p>
  <p>&nbsp;</p>
  <p><strong>图片展示</strong></p>
  <hr />
  <p>&nbsp;</p>
  <p><img src="images/hs1.jpg" alt="t" width="220" height="144" class="hsimg" /><img src="images/hs2.jpg" alt="t" width="220" height="144" class="hsimg" /><img src="images/hs3.jpg" alt="t" width="220" height="144" class="hsimg" /><img src="images/hs4.jpg" alt="t" width="220" height="144" class="hsimg" /></p>
</div>

3、留言

该页面使用了form表单技术，可以填写并且提交文字信息，密码会被****字符代替，不会泄露密码，其他的名字则直接用明文的input标签。

代码：

html 复制代码

<ul>
<li><span>您的姓名：</span><input name="" type="text" class="message_in" /></li>
<li><span>您的邮箱：</span><input name="" type="text" class="message_in" /></li>
<li><span>您的电话：</span><input name="" type="text" class="message_in" /></li>
<li><span>留言主题：</span><input name="" type="text" class="message_in" /></li>
<li><span>留言内容：</span><textarea name="" cols="" rows="" class="message_te"></textarea></li>
<li>　　　　　　<input name="" type="button" value="提交" class="message_btn" />　　<input name="" value="重置" type="button" class="message_btn" /></li>
</ul>

总结

想要看具体效果的同学，可以访问这个链接：
https://www.bilibili.com/video/BV1nk4y1X74M/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。