👧作者:大月月
📢分享知识: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 ©. 2022年
<p>大月月</p>
</div>
</body>
</html>
更多推荐
网页制作html+css+javascript
发布评论