HTML5响应式网页设计（考试题：旅游项目）

效果图

.html代码

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="./css/css1.css">
	</head>
	<body>
		<div class="fullbigbox">
			<div class="elebigbox">
				<div class="bigheader">

					<div class="row">
						<div class="col-6">
							<div class="menuleft">
								<ul>
									<li><a href="#">最美旅游网</a></li>
									<li><a href="#">山东游</a></li>
									<li><a href="#">国内游</a></li>
									<li><a href="#">国际游</a></li>
								</ul>
							</div>

						</div>
						<div class="col-6">
							<div class="menuright">
								<ul>
									<li><a href="#">登录/注册</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="zhong">
					<div class="row">

						<div class="qq">
							<div class="col-1 ">
								<div class="zhongq"><a href="#">旅游直通车</a></div>
							</div>
						</div>

						<div class="col-1">
							<div class="zhongq">123</div>
						</div>

						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
						<div class="col-1">
							<div class="zhongq">123</div>
						</div>
					</div>
				</div>
				<div class="info">
					<div class="firstrow">
						<div class="row">

							<div class="col-6">
								<div class="infocontent">
									<div class="infocontbox">
										<dl>
											<dt>
											<div class="pic">	<img src="./img/img/zc.png" alt="">
											<div></div></dt>
											<dd>qwe</dd>
											<dd>123123</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="col-6">
								<div class="infocontent">
									<div class="infocontbox">
										<dl>
											<dt>
												<div class="pic">

													<img src="./img/img/zc.png" alt="">
												</div>
											</dt>
											<dd>qwe</dd>
											<dd>123123</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
						
							<div class="col-6">
								<div class="infocontent">
									<div class="infocontbox">
										<dl>
											<dt>
											<div class="pic">	<img src="./img/img/zc.png" alt="">
											<div></div></dt>
											<dd>qwe</dd>
											<dd>123123</dd>
										</dl>
									</div>
								</div>
							</div>
							<div class="col-6">
								<div class="infocontent">
									<div class="infocontbox">
										<dl>
											<dt>
												<div class="pic">
						
													<img src="./img/img/zc.png" alt="">
												</div>
											</dt>
											<dd>qwe</dd>
											<dd>123123</dd>
										</dl>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			<div class="footer">
				<div class="row">
					<div class="col-12">
						<div class="footerq">
							sadafasfxxxxx
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
		</div>
	</body>
</html>

css代码

html 复制代码

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
	flex-shrink: 1;
}

.col-1 {
	flex-grow: 1;
}

.col-2 {
	flex-grow: 2;
}

.col-3 {
	flex-grow: 3;
}

.col-4 {
	flex-grow: 4;
}

.col-5 {
	flex-grow: 5;
}

.col-6 {
	flex-grow: 6;
}

.col-7 {
	flex-grow: 7;
}

.col-8 {
	flex-grow: 8;
}

.col-9 {
	flex-grow: 9;
}

.col-10 {
	flex-grow: 10;
}

.col-11 {
	flex-grow: 11;
}

.col-12 {
	flex-grow: 12;
}

a:hover {
	font-weight: bold;
}

* {
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

.row {
	display: flex;
	flex-wrap: nowrap;
}

.fullbigbox {
	width: 100%;
	background-color: lightblue;
}

.elebigbox {
	margin-left: 10%;
	width: 80%;
	background-color: white;
}

.menuleft ul li {
	float: left;
	margin: 0px 50px;
}

.bigheader {
	width: 100%;
	height: 60px;
	background-color: lightblue;
}

.menuright ul li {
	float: right;
	margin-right: 20px;

}

.menuleft {
	height: 40px;
	margin-top: 10px;
	background-color: slategray;
	line-height: 40px;
}

.menuright {
	line-height: 40px;
	height: 40px;
	margin-top: 10px;
	background-color: slategray;
}

.zhongq {
	background-color: white;
	height: 40px;
	line-height: 40px;
	text-align: center;
}

.qq {
	background-color: rebeccapurple;
}

img {
	border-radius: 10px 10px 0px 0px;
}

.info {
	width: 100%;

}

.infocontent {
	display: flex;
}

.infocontbox {
	flex: 1;
	width: 0;
	margin: 10px;
}

.infocontbox dl dt img {
	width: 100%;
	height: 100%;
	border-radius: 10px 10px 0px 0px;
}

.infocontbox:hover {
	box-shadow: 0px 0px 10px 10px green;
}

.pic {
	overflow: hidden;
}

.infocontbox:hover dl dt img {
	transform: scale(1.1);
}

.footer {
	width: 100%;
	background-color: skyblue;
	height: 80px;
	position: relative;
}

.footerq {
	width: 100%;
	position: absolute;
	top: 20px;
	background-color: white;
	height: 60px;
	line-height: 60px;
	text-align: center;
}