HTML静态网页作业成品(HTML+CSS)——电影购票网页设计制作(5个页面)

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

---

一、作品介绍

🏷️本套采用DIV+CSS布局，未使用Javacsript代码，共有5个页面。

二、作品演示

1、首页

2、电影详情页

3、电影选座页

4、登录页

5、注册页

三、代码目录

四、网站代码

HTML部分代码

<div class="header">
		<div class="w">
			<div class="logo">
				<a href="index.html">
					<img src="./images/logo.png" class="logo_img">
				</a>
			</div>
			<ul class="nav">
				<li class="active"><a href="index.html">首页</a></li>
				<li><a href="goupiao.html">购票</a></li>
				<li><a href="xuanzuo.html">选座</a></li>
				<li><a href="denglu.html">登录</a></li>
				<li><a href="zhuce.html">注册</a></li>
			</ul>
		</div>
	</div>
	
	<div class="banner">
		<img src="./images/banner.jpeg" alt="">
	</div>
	
	
	<div class="main">
		<div class="w">
			<div class="reying_box">
				<div class="main_tit">正在热映</div>
				<div class="reying_list">
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy1.jpg" alt="">
								<span>9.5</span>
							</div>
							<div class="reying_name">满江红</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy2.jpg" alt="">
								<span>8.8</span>
							</div>
							<div class="reying_name">不能流泪的悲伤</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy3.jpg" alt="">
								<span>9.3</span>
							</div>
							<div class="reying_name">流浪地球2</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy4.jpg" alt="">
								<span>9.0</span>
							</div>
							<div class="reying_name">蚁人与黄蜂女：量子狂潮</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy5.jpg" alt="">
								<span>9.3</span>
							</div>
							<div class="reying_name">中国乒乓之绝地反击</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy6.jpg" alt="">
								<span>9.1</span>
							</div>
							<div class="reying_name">黑豹2</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy7.jpg" alt="">
								<span>9.1</span>
							</div>
							<div class="reying_name">熊出没·伴我“熊芯”</div>
						</a>
					</div>
					<div class="reying">
						<a href="goupiao.html">
							<div class="reying_img">
								<img src="./images/dy8.jpg" alt="">
								<span>8.7</span>
							</div>
							<div class="reying_name">深海</div>
						</a>
					</div>
				</div>
			</div>

CSS部分代码

.header {
	background: #fff;
	border-bottom: 1px solid #d8d8d8;
}
.header .w {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 65px;
}
.header .logo {
}
.header .logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.header ul {
	display: flex;
	align-items: center;
}
.header ul li {
	margin-left: 25px;
	height: 65px;
	line-height: 65px;
	text-align: center;
	width: 100px;
}

.header ul li a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
	display: inline-block;
	width: 100%;
	height: 100%;
}
.header ul li.active {
	background-color: #df2d2d;
}
.header ul li.active a {
	color: #fff;
}
.header ul li:hover {
	background-color: #df2d2d;
}
.header ul li:hover a {
	color: #fff;
}
.banner {
	width: 100%;
}
.banner img {
	width: 100%;
}
.main .w{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.main_tit {
	color: #ef4238;
	font-size: 26px;
	padding: 20px 0;
}

.reying_list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 920px;
}
.reying {
	width: 215px;
	margin-bottom: 20px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #efefef;
}
.reying:hover {
	box-shadow: 0 0 10px 0 #e6e6e6;
}
.reying a {
	color: #000;
	text-decoration: none;
	text-align: center;
}
.reying_img {
	position: relative;
}
.reying_img img {
	width: 100%;
	vertical-align: top;
}
.reying_img span {
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 16px;
	padding: 3px 5px;
	font-style: italic;
	background-color: #ffb400;
	color: #fff;
}
.reying_name {
	margin-top: 10px;
}

五、源码获取

🥇 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙2.想要获取本文源码，点击前往吧