静态网页设计——宠物狗狗网(HTML+CSS+JavaScript)

前言

声明:该文章只是做技术分享,若侵权请联系我删除。!!
感谢大佬的视频:
https://www.bilibili.com/video/BV1nk4y1X74M/?vd_source=5f425e0074a7f92921f53ab87712357b

使用技术:HTML+CSS+JS(静态网页设计)
主要内容:对宠物狗狗进行介绍。

主要内容

1、首页

首页用html标签分割成多个区域,每个区域都是用子div标签继续进行更加细致的分割,并且使用css设置样式,将每个区域想显示的效果用css设计出来,最后根据px单位进行划分,精准的分割页面格式化。
静态网页设计——宠物狗狗网(HTML+CSS+JavaScript)_第1张图片

最上方使用li标签+css设计制作的菜单导航,还有使用js实现的轮播图,可以自动切换图片,
或者点击下方的按钮可以手动切换图片。
静态网页设计——宠物狗狗网(HTML+CSS+JavaScript)_第2张图片

最下方使用p标签和人span标签嵌入许多文本,将关于网站主题的介绍全部写到网页中,文字排版根据字数来进行,使用不会出现不协调的情况。在文字旁边,使用img标签嵌入一些图片,使得网页整体更加的美观。
静态网页设计——宠物狗狗网(HTML+CSS+JavaScript)_第3张图片

部分代码:

<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+CSS+JavaScript)_第4张图片

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

部分代码:

<div class="gogo1">
  <p><strong>哈士奇介绍strong>p>
  <hr />
  <p>西伯利亚雪橇犬(俄语:Сибирский хаски,英语:Siberian Husky),常见别名哈士奇,昵称为二哈。<br />
    西伯利亚雪橇犬是原始的古老犬种,主要生活在在西伯利亚东北部、格陵兰南部。哈士奇名字是源自其独特的嘶哑叫声 [哈士奇性格多变,有的极端胆小,也有的极端暴力,进入人类社会和家庭的哈士奇,都已经没有了这种极端的性格,比较温顺,是一种流行于全球的宠物犬。哈士奇、金毛犬与拉布拉多并列为三大无攻击性犬类 ,被世界各地人们广泛饲养,并在全球范围内有大量该犬种的赛事。p>
  <p> p>
  <p><strong>图片展示strong>p>
  <hr />
  <p> 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+CSS+JavaScript)_第5张图片

代码:

<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
具体的代码也在该链接下。

你可能感兴趣的:(期末课程设计,宠物,html,css)