🎉
不定期分享源码,关注不丢失哦
文章目录
- 一、作品介绍
- 二、作品演示
- 1、首页
- 2、子页1
- 3、子页2
- 4、子页3
- 5、子页4
- 6、子页5
- 三、代码目录
- 四、网站代码
- HTML部分代码
- CSS部分代码
- 五、源码获取
一、作品介绍
🏷️本套采用HTML+CSS,未使用Javacsript代码,共有6个页面
。
🏷️想要获取本文源码,点击前往吧
二、作品演示
1、首页
2、子页1
3、子页2
4、子页3
5、子页4
6、子页5
三、代码目录
四、网站代码
HTML部分代码
<div class="top">
<div class="w">
<div class="top_left">
欢迎来到初见婚纱有限公司
</div>
</div>
</div>
<div class="header">
<div class="w">
<div class="header_left">
<a href="">
初见婚纱
</a>
</div>
<div class="nav">
<div class="nav_item active"><a href="index.html">首页</a></div>
<div class="nav_item"><a href="anli.html">婚礼案例</a></div>
<div class="nav_item"><a href="lvpai.html">婚礼旅拍</a></div>
<div class="nav_item"><a href="zixun.html">婚礼资讯</a></div>
<div class="nav_item "><a href="yuyue.html">婚礼预约</a></div>
</div>
</div>
</div>
<div class="banner">
<img class="banner_img" src="images/banner1.jpg" alt="">
</div>
CSS部分代码
.top {
width: 100%;
background-color: #f4f4f4;
color: #666;
font-size: 14px;
}
.top .w {
padding: 8px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.header {
width: 100%;
padding: 15px 0;
background-color: #fff;
}
.header .w {
display: flex;
align-items: center;
justify-content: space-between;
}
.header_left a {
height: 60px;
font-size: 32px;
color: #f00;
font-weight: bold;
vertical-align: top;
}
.header .nav {
display: flex;
align-items: center;
}
.header .nav_item {
margin-left: 65px;
}
.header .nav_item a {
color: #3e3e3e;
}
.header .nav_item.active a,.header .nav_item:hover a{
color: #f00;
border-bottom: 2px solid #f00;
}
.banner {
width: 100%;
}
.banner img {
width: 100%;
}
五、源码获取
🥇 ~ 关注我,点赞博文~
每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]
三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧