首页 > 分享 > 55. Web前端网页制作宠物主题网页设计实例大学生期末大作业 html+css

55. Web前端网页制作宠物主题网页设计实例大学生期末大作业 html+css

萌宠菠菠乐园
2024-11-16 10:17

一、前言

二、网页文件

三、网页效果

四、代码展示

1.HTML

2.CSS

五、更多推荐

一、前言

本实例以宠物为主题设计，div+css布局，三级页面、注册页面等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>
   <head>
       <meta charset="utf-8" />
       <title>宠物之家</title>
       <link href="css/style.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
   <div class="web">
       <div class="top">
           <img src="img/img1.jpg" />
       </div>
       <div id="nav">
           <ul>
               <li><a href="index.html">首页</a></li>
               <li><a href="about.html">关于宠物</a></li>
               <li><a href="chongwu.html">宠物猫狗</a></li>
               <li><a href="news.html">宠物新闻</a></li>
               <li><a href="goumai.html">宠物购买</a></li>
               <li><a href="lingshi.html">宠物零食</a></li>
               <li><a href="zhuce.html">会员注册</a></li>
           </ul>
       </div>
       <div class="main">
           <div class="title"><strong>萌宠欣赏</strong></div>
           <div class="ibox1">
               <ul>
                   <li>
                       <img src="img/img2.jpg" />
                       <h1>英短</h1>
                   </li>
                   <li>
                       <img src="img/img3.jpg" />
                       <h1>混血布偶</h1>
                   </li>
                   <li>
                       <img src="img/img4.jpg" />
                       <h1>英短乳色蓝猫</h1>
                   </li>
                   <li>
                       <img src="img/img5.jpg" />
                       <h1>英短（1个月）</h1>
                   </li>
               </ul>
           </div>
           <div class="title"><strong>关于我们</strong></div>
           <div class="ibox2">
               <img src="img/img6.jpg" />
               <p>宠物之家是一家宠物综合服务平台，拥有宠物之家商城（线上电商）、宠物之家宠物服务与新零售（线下）、宠物社交（涵盖宠物社区、宠物百科等）三大业务板块。宠物之家不但涵盖了犬猫与水族等其它小宠商品适用的品牌干粮、湿粮、零食、香波、服饰笼窝等万种商品，解决宠物“吃穿用度”问题，同时宠物之家还与全国近万家宠物店、宠物医院合作开展寄养、美容、绝育、医疗等服务，解决宠物“生老病死”问题。宠物之家已经构建了一个将线上与线下业务联合起来的一个生态闭环。 </p>
               <p>自2019年1月上线以来，一直秉承以专业的经验、周到的服务和强大的网络优势为养宠爱宠人士提供线上线下的一站式服务，以全新的养宠理念，打造“电子商务+服务与新零售+社交”三位一体的全方位互联网平台。宠物之家拥有宠物之家商城、宠物之家宠物APP、宠物百科等多个专业服务载体，涵盖众多养宠资讯、养宠服务和宠物商品，为千万用户提供宠物寄养、美容、医疗等服务。宠物之家也是国内首个双十一（2019年）日销量突破1.6亿元的电商平台。 </p>
           </div>
       </div>
       <div class="foot">Copyright @ 2020-2029 宠物之家 ALL Rights</div>
   </div>
   </body>
</html>

......

2.CSS

代码如下（节选示例）：

body {
   margin: 0 auto;
   font-size: 16px;
   font-family: "微软雅黑";
   line-height: 22px;
}
div,p,input,ul,li,h1,h2,h3 {
   height: auto;
   margin: 0;
   padding: 0;
   vertical-align: middle;
   list-style: none;
}

a {
   color: #131313;
   text-decoration: none;
}
.web{
   width: 1024px;
   height: auto;
   overflow: hidden;
   margin: 0 auto;
}
.top{
   height: 522px;
}
#nav{
   height: 45px;
   width: 100%;
   background: #313131;
}
#nav ul{
   padding: 0px;
}
#nav ul li{
   float: left;
   margin: 0px 43px;
}
#nav ul li a{
   line-height: 45px;
   font-size: 16px;
   color: #ffffff;
}
.main{
   height: auto;
   overflow: hidden;
}
.title{
   width: 200px;
   height: 50px;
   border-bottom: #e9421a 3px solid;
   line-height: 50px;
   margin: 0 auto;
   font-size: 16px;
   margin-top: 20px;
   margin-bottom: 20px;
   text-align: center;
}
.ibox1{
   height: 335px;
}
.ibox1 ul{
   padding: 0px;
}
.ibox1 ul li{
   float: left;
   width: 242px;
   margin: 0px 7px;
}
.ibox1 ul li h1{
   height: 45px;
   line-height: 45px;
   font-weight: normal;
   text-align: center;
   font-size: 14px;
}
.ibox2{
   height: 270px;
}
.ibox2 img{
   float: left;
   margin-right: 20px;
}
.ibox2 p{
   line-height: 30px;
   text-indent: 2em;
   font-size: 14px;
}
.foot{
   height: 50px;
   line-height: 50px;
   background: #cccccc;
   text-align: center;
   font-size: 14px;
}
.about{
   padding: 20px;
}
.about p{
   line-height: 30px;
   text-indent: 2em;
   font-size: 14px;
}
.about img{
   display: block;
   margin:0 auto;
   margin-top: 20px;
   margin-bottom: 20px;
}
.chongwu {
   height:auto;
   overflow:hidden;
}
.chongwu ul {
   padding: 0px;
}
.chongwu ul li {
   width:300px;
   float: left;
   padding:20px;
}
.chongwu h1{
   height: 50px;
   line-height:50px;
   text-align:center;
   font-size:14px;
   font-weight: bold;
}
.chongwu p{
   color:#171717;
   font-size:14px;
   }
.news{
   padding: 20px;
   height: auto;
   overflow: auto;
}
.news ul{
   padding: 0px;
}
.news ul li{
   height: 30px;
   line-height: 30px;
   border-bottom: #313131 1px dashed;
}
.news ul li a{
   font-size: 14px;
}
.news ul li span{
   float:right;
}
.goumai{
   padding: 20px;
   height: auto;
   overflow: hidden;
}
.goumaibox{
   width: 470px;
   height: 300px;
   margin: 10px;
   float: left;
   background: #fcddd6;
}
.goumaibox img{
   float: left;
   margin-right: 15px;
}
.goumaibox p{
   height: 30px;
   line-height: 30px;
   font-size:14px;
}
.lingshi{
   padding: 20px;
   height: auto;
   overflow: hidden;
}
.lingshibox{
   width: 470px;
   height: 300px;
   margin: 10px;
   float: left;
   border: #E9421A 1px solid;
}
.lingshibox p{
   line-height:25px;
   font-size:14px;
   padding: 20px;
}
.lingshibox span{
   font-size: 20px;
   font-weight: bold;
}
.zhuce{
   width:400px;
   height:400px;
   margin:0 auto;
   margin-bottom:30px;
   }
.news p{
   line-height: 30px;
   font-size: 14px;
   text-indent: 2em;
}
.wtitle{
   height: 40px;
   line-height: 40px;
   text-align: center;
   border-bottom: #313131 1px dashed;
   text-align: center;
   font-size: 18px;
   margin-bottom: 20px;