HTML静态网页成品作业(HTML+CSS)——婚礼婚纱网页设计制作(6个页面)

🎉不定期分享源码,关注不丢失哦

文章目录


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有6个页面

二、作品演示

1、首页

2、子页1

3、子页2

4、子页3

5、子页4

6、子页5

三、代码目录

四、网站代码

HTML部分代码

c 复制代码
<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.想要获取本文源码,点击前往吧

相关推荐
Jacob02341 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder6 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder6 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep14 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛19 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i28 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟32 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php
凌览36 分钟前
有了 25k Star 的MediaCrawler爬虫库加持,三分钟搞定某红书、某音等平台爬取!
前端·后端·python
万少38 分钟前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos
满分观察网友z1 小时前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端