网页制作html+css+javascript_网页萌宠乐园代码-CSDN博客

本文链接：https://blog.csdn.net/m0_67280147/article/details/124716927

👧作者：大月月
📢分享知识：html+css+javascript网页制作
❌：拒绝摆烂，天天向上

网页制作之萌宠乐园

❤希望大家多多点赞收藏哦

- 网页制作之萌宠乐园
✏网页部分截图
✏网页部分代码
- 📌style.css(部分代码)
- 📌index.html(主页面代码)

✏网页部分截图

🚩
🚩
🚩

✏网页部分代码

📌style.css(部分代码)

*{
margin:0px;
padding:0px
}
img{border:0px;}
html{
width:100%;
height:100%;
/* background-color: rgb(220, 202, 137); */
background-image:url(images/top_bg.gif);
background-position:top left;
background-repeat:repeat-x;
}
body{
width:995px;
height:100%;
margin:0 auto;
background-image:url(images/top4.png);
background-position:top left;
background-repeat:no-repeat;
font-family:Arial;
font-size:11px;
color:#333333;
}
#meta{
float:right;
padding:31px 70px 0 0
}
#meta a{
color:#42030E;
text-decoration:underline;
display:block;
float:left
}
#meta a:visited{text-decoration:underline}
#meta a:hover{text-decoration:none}
#meta span{
padding:0 25px 0 0;
float:left
}
#meta img{
float:left;
margin:0 6px 0 0;
}
#menu{
background-image:url(images/menu_bg.jpg);
background-image:top left;
background-repeat:no-repeat;
margin:247px 0 0 0;
float:left;
width:995px;
height:64px;
text-align:center
}
#menu ul{
width:594px;
margin:0 auto;
}
#menu li{
float:left;
list-style-type:none;
}
#menu li a{
display:block;
float:left;
height:54px;
background-position:bottom;
background-repeat:no-repeat
}
#menu li a:hover{
background-image:url(images/arrow.gif);
}
#menu li a.active{
background-image:url(images/arrow.gif);
}
#content{
background-image:url(images/content_bg.gif);
background-position:top left;
background-repeat:repeat-y;
float:left;
width:953px;
margin:0 0 0 21px;
display:inline
}
.navigation{
width:200px;
float:left
}
.navigation ul{
margin:6px 0 50px 15px;
list-style-type:none;
font-size:13px;
}
.navigation li{
background-image:url(images/li_bg.gif);
background-position:top left;
background-repeat:no-repeat;
height:20px;
padding:4px 0 0 20px;
}
.navigation li a{
text-decoration:none;
color:#535353
}
.navigation li a:hover{
  color: #e9750f;
}
.center{
width:483px;
float:left;
}
.welcome{
background-image:url(images/welcome1.png);
background-position:top left;
background-repeat:no-repeat;
margin:6px 0 12px 5px;
display:inline;
width:465px;
height:268px;
float:left
}
.welcome span{
display:block;
width:168px;
height:143px;
margin:80px 0 0 80px;
font-size: 20px ;
font-family: 微软雅黑;
}
.text{
width:451px;
padding:10px 19px 5px 13px
}

📌index.html(主页面代码)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>萌宠</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div id="meta">
      <span
        ><img src="images/meta1.gif" alt="" width="15" height="15" />
        <a href="index.html">超级萌宠</a></span
      >

      <span
        ><img src="images/meta2.gif" alt="" width="15" height="15" />
        <a href="index1.html">牧羊犬</a></span
      >
      <span
        ><img src="images/meta1.gif" alt="" width="15" height="15" />
        <a href="index2.html">萨摩耶</a></span
      >
      <span
        ><img src="images/meta2.gif" alt="" width="15" height="15" />
        <a href="index3.html">金毛</a></span
      >
    </div>
    <div id="menu">
      <ul>
        <li>
          <a href="index.html" class="active"
            ><img src="images/but01.png" alt="" width="104" height="36"
          /></a>
        </li>
        <li>
          <a href="index1.html"
            ><img src="images/but02.png" alt="" width="101" height="36"
          /></a>
        </li>

        <li>
          <a href="index2.html"
            ><img src="images/but03.png" alt="" width="115" height="36"
          /></a>
        </li>
        <li>
          <a href="index3.html"
            ><img src="images/but04.png" alt="" width="93" height="36"
          /></a>
        </li>
      </ul>
    </div>
    <div id="content">
      <div class="navigation">
        <ul>
          <li><a href="#">我们的萌宠狗狗 </a></li>
          <li><a href="#">萌宠狗狗活动</a></li>
          <li><a href="#">萌宠狗狗品种</a></li>
          <li><a href="#">萌宠狗狗品种简介</a></li>
          <li><a href="#">萌宠狗狗服务</a></li>
          <li><a href="#">萌宠狗狗特别服务</a></li>
          <li><a href="#">犬种信息</a></li>
          <li><a href="#">我们的萌宠狗狗 </a></li>
          <li><a href="#">萌宠狗狗活动</a></li>
          <li><a href="#">萌宠狗狗品种</a></li>
          <li><a href="#">萌宠狗狗品种简介</a></li>
          <li><a href="#">萌宠狗狗服务</a></li>
          <li><a href="#">萌宠狗狗特别服务</a></li>
          <li><a href="#">犬种信息</a></li>
          <li><a href="#">我们的萌宠狗狗 </a></li>
          <li><a href="#">萌宠狗狗活动</a></li>
          <li><a href="#">萌宠狗狗品种</a></li>
          <li><a href="#">萌宠狗狗品种简介</a></li>
          <li><a href="#">萌宠狗狗服务</a></li>
          <li><a href="#">萌宠狗狗特别服务</a></li>
          <li><a href="#">犬种信息</a></li>
          <li><a href="#">萌宠狗狗品种简介</a></li>
          <li><a href="#">萌宠狗狗服务</a></li>
          <li><a href="#">萌宠狗狗特别服务</a></li>
          <li><a href="#">犬种信息</a></li>
        </ul>
      </div>
      <div class="center">
        <div class="welcome">
          <span>欢迎来到萌宠乐园 <br />Welcome to Mengchong paradise </span>
        </div>
        <div class="text">
          <span class="title">我们的萌宠俱乐部</span>
          <hr />

          <p>
            提到狼狗，大家不免有些紧张。可是你用不着多担心一俗 话说“秋毫无犯"一-
            -只 要你不触怒 它，它是不会来咬你的。
            它有一身黄黑色的卷毛，十分可爱。那一对葡萄似的大眼睛炯炯有神，再配上那尖尖的牙齿和短
            短的尾巴，就组成了-只既凶猛又可爱的狼狗。 在它晚_上可以睡沙发。尽管
            这样，它还是不满足，它每天都和别的狗来-场跑步比赛，或是来-场厮打。它还是别的狗“作
            乱”的“头儿”:比如把邻居家的花盆打碎啦，把饭菜弄的满地都是....它的主人几次想把这条“恶贯满
            盈”的狗“凌迟处死”，可想来想去还是不舍得哪。可要是太放纵它，它只不定哪天还咬人呢!

            <br />
            这事真的发生了，可正是因为这事儿它才被评为一等功狗呢!这似贬实褒的绰号引起了人们的注
            意，我要说出来呀，你晕死:那天晚上，小偷来偷它家东西，不，它主人家东西。这时这只狼狗正在
            巡逻，忽然，-条黑影蹿出来，和它撞了个满怀。它忍痛放声大叫，把别的狗惊醒。在它旁边熟睡的
            大大小小的狗狗们一跃而起，它"以身作则”，
          </p>
          <p>
            这事真的发生了，可正是因为这事儿它才被评为一等功狗呢!这似贬实褒的绰号引起了人们的注
            意，我要说出来呀，你晕死:那天晚上，小偷来偷它家东西，不，它主人家东西。这时这只狼狗正在
            巡逻，忽然，-条黑影蹿出来，和它撞了个满怀。它忍痛放声大叫，把别的狗惊醒。在它旁边熟睡的
            大大小小的狗狗们一跃而起，它"以身作则”，
          </p>
        </div>
      </div>
      <div class="news_events">
        <span class="title">萌宠照片</span>
        <hr />
        <img
          src="images/latest.jpg"
          alt=""
          width="217"
          height="144"
          class="latest"
        /><br />
        <span class="title">萌宠活动</span>
        <hr />
        <div class="news">
          <div class="data">大头狗狗</div>
          <p>
            在春天，我喜欢在嫩绿的草地.上翻跟头，喜欢追正在休息的小鸟，喜欢抓正在花丛中跳舞的蝴
            蝶，喜欢吵醒正在睡觉的小猫。在夜晚我总是望着浩瀚的天空，看着星星总觉的很奇妙。
          </p>
          <div class="more"><a href="#">了解更多</a></div>
        </div>
        <div class="news">
          <div class="data">大头狗狗</div>
          <p>
            在夏天，我喜欢吐舌头。太阳好像总是跟我过不去，把我晒得像火炉子一样我只好洗澡了，我洗
            完澡后走总喜欢到泥巴里滚来滚去，滚够了，我又在烫的火辣的地面奔跑在秋天我总觉得没意思，只
            是静静地呆在家里，边吃水果边看着叶子一片又一片的落下来。
            在冬天，我喜欢在被冰封了的地面上滑冰，还喜欢看奇妙的雪花，我在冬天还认识了一位好朋友
            呢!他的名字叫: "“大头。 我的生活有趣吧!
          </p>
          <div class="more"><a href="#">了解更多</a></div>
        </div>
      </div>
      <hr width="953" height="87" />
      <br />
    </div>
    <div id="footer">
      <div>
        <a href="index.html">超级萌宠</a> | <a href="index1.html">牧羊犬</a> |
        <a href="index2.html">萨摩耶</a> |
        <a href="index3.html">金毛</a>
      </div>
    </div>
    <div id="copyright">
      Copyright &copy;. 2022年
      <p>大月月</p>
    </div>
  </body>
</html>