web前端期末大作业 html+css+javascript网页设计实例 宠物狗网站制作

一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/240763

(title-U16JP- 宠物狗-22页 HTML+CSS+JS)]

截图演示

08.png

07.png

06.png

05.png

04.png

03.png

02.png

01.png

---

三、 作品代码

HTML代码

  


  
狗狗百科
  

    
网站首页
    
狗狗分类
    
狗狗资讯
    
狗狗用品
    
联系我们
  


  

    

      
  
      
  
      
  
      
  
    
  
  

    

    
  
  
  <   >  


  

    

      

        
狗
      
      
  狗（拉丁文Canis lupus familiaris）属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来，驯养时间在4万年前~1.5万年前。被称为“人类最忠实的朋友”，是饲养率最高的宠物，其寿命大约在12~18年  。在中国文化中，狗属于十二生肖之一，在十二生肖中的第11位。 
    
    

      

        
狗狗资讯
      
      

        
比利时牧羊犬的细节
        
大丹犬智商 大丹犬性格大揭秘
        
养狗，我劝你不要养“茶杯犬”，不然你会和我一样
        
狗狗喝咖啡也会中毒，一旦喝下这个量，狗狗可能会
        
开朗的狗狗突然不开心，它情绪低落有这3个原因，
      
    
  
  

    

      
狗狗美图
    
    

      
  
      
  
      
  
    
  
  
狗狗百科

CSS代码

* {
    margin: 0;
    padding: 0;
}
body {
    margin: 0 auto;
    font-size: 14px;
    background: #fff;
    color: #333;
    position: relative;
}
img {
    border: none;
}
a {
    cursor: pointer;
    color: #333;
    text-decoration: none;
    outline: none;
}

.fenl {
    margin-top: 10px;
}
.fenl li {
    display: inline-block;
    margin: 5px;
    width: 120px;
    line-height: 36px;
    background: #71a5b0;
    color: #fff;
    font-size: 14px;
    text-align: center;
}
.fenl li a {
    display: block;
    color: #fff;
}
form {
    width: 100%;
    display: block;
}
form p {
    margin: 10px 0;
    font-size: 16px;
    color: #333;
}
form .phone {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
form textarea {
    width: 100%;
    height: 100px;
}
form .but {
    background: #71a5b0;
    border: none;
    color: #333;
    margin: 20px auto;
    display: block;
    width: 200px;
    height: 40px;
    color: #fff;
}
.details_a {
    margin: 30px 0 50px;
}
.details_a .pic {
    width: 26%;
    float: left;
}
.details_a .pic img {
    width: 100%;
}
.details_a .text {
    float: right;
    width: 72%;
}
.details_a .text h2 {
    font-size: 20px;
}
.details_a .text p {
    font-size: 14px;
    line-height: 26px;
    color: #333;
}
.details h1 {
    font-size: 20px;
    color: #333;
    text-align: center;
    padding: 25px 0;
    border-bottom: 1px solid #ccc;
}
.details .text {
    line-height: 26px;
    color: #333;
    font-size: 16px;
    padding:20px 0;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app