国内旅游计划(二)

最新推荐文章于 2022-09-19 18:19:14 发布

叫我小袁就好

最新推荐文章于 2022-09-19 18:19:14 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_42788101/article/details/89462856

版权

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>国内旅游计划</title>
	<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<section class="区域1">
	<header class="区域2"></header>
	<h1>国内旅游计划</h1>
</body>
	<section class="container">
	<div class="1">
		<a href="#"><img src="file://C:/Users/Administrator/Desktop/猪1.jpg" width="100%" alt="" class="pic" />
		<div class="底部">
			<p class="face"><img src="file://C:/Users/Administrator/Desktop/猪2.jpg" width="38" height="38" alt="" /></p>
			<h2 class="title">我的旅行行程</h2>
		</div>
		<p class="day">14天</p>
		</a>
		<div class="infos">
			<div>
				<em>城市</em>
				<p>昆明 - 香格里拉 - 西藏</p>
			</div>
		</div>
	</div>
	</section>
	<section class="container">
		<div class="1">
			<a href="#">
				<img src="file://C:/Users/Administrator/Desktop/td.jpg" width="100%" alt="" class="pic" />
			</a>
		</div>
	</section>



	<footer class="qui-footerBasic">
		<p class="switchStyse"><span>手机版</span><a href="#"><span>电脑版</span></a><span><a href="#">APP</a></span></p>
	</footer>

	<section>
		<aside class="qui-asides">
			<section class="qui-aside">
				<nav class="qui-asideNav">
					<ul>
						<li><a href="#"><span>首页</span></a></li>
						<li><a href="#"><span>目的地</span></a></li>
						<li><a href="#"><span>酒店</span></a></li>
						<li><a href="#"><span>机票</span></a></li>
						<li><a href="#"><span>时间</span></a></li>
						<li><a href="#"><span>点评</span></a></li>
					</ul>
				</nav>
			</section>
		</aside>
	</section>

</html>

common.css

html{
	height: 100%;
	overflow-x: hidden;
	background: :#f5f5f5;
	color: #444;
	font: 14px/24px Helvetica !important;
}
body{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
	position: relative;
	z-index: 0;
	width: 100%;
	max-width: 640px;
	min-height: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,0.3); 
}
div,ul,li,p{
	margin: 0;
	padding: 0
	outline: none;
}
	em,strong {
		font-style: normal;
		font-weight: normal;
	}
	ul{
		list-style-type: none;
	}
	h1{
		font-size: 55px;
		margin-top: 30px;
		color: white;
		text-align: center;
	}

main.css

.qui-page{
	width: 640px;
}
qui-header{
	width: 100%;
	height: 80px;
	overflow:hidden;
	background-color: #2bab79;
}
container{
	width: 100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing: border-box;
}
.plcRouteList{
	border-bottom: 1px solid #e632ea;
	background-color: #fff;
	padding-left: 5px; 
}
.plcRouteList li{
	padding: 15px 5px 15px 0;
	border-top: 1px solid #e6e8ea;
}
.plcRouteList a{
	display: block;
	position: relative;
}
.plcRouteList .pic{
	display: block;
	min-height: 150px;
}
.picRouteList .bottom{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50px;
	padding: 30px 0 0 60px;
	color: #fff;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.6));
	background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.6));  
}
.plcRouteList .bottom .face{
	float: left;
	margin-left: -50px;
	width: 38px;
	height: 38px;
	border: 1px solid #fff;
	border-radius: 50%;
	overflow: hidden; 
}
.plcRouteList .bottom .face img{
	display: block;
	border-radius: 50%;
}
.plcRouteList .buttom .title{
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 18px;
	font-weight: bold;
	line-height: 22px;
}
.plcRouteList .day{
	position: absolute;
	top: 10px;
	right: 10px;
	width: 50px;
	height: 50px;
	background-color: rgba(43,171,121,0.8);
	border-radius: 50%;
	text-align: center;
	font-size: 18px;
	line-height: 50px;
	color: #fff;
}
.plcRouteList .infos{
	margin-top: 7px;
}
.plcRouteList .infos>div{
	margin-bottom: 5px;
	padding-left: 40px;
}
.plcRouteList .infos em{
	float: left;
	margin-left: -40px;
	font-size: 15px;
	font-weight: bold;
}
.plcRouteList .infos p{
	max-height: 48px;
	overflow: hidden;
}
.qui-footerBasic .switchStyle{
	color: #9ea3ab;
}
.qui-footerBasic .switchStyle span{
	margin-left: 30px; 
}
.qui-footerBasic .wsitchStyle a{
	color: #444;
	text-decoration: none;
}
.qui-asides{
	position: absolute;
	left: -200px;
	top: 0;
	height: 400px;
	width: 200px;
}
.qui-aside{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 200px;
	overflow-y: scroll;
	background-color: #2d9141;
}
.qui-asideNav{
	padding: 80px 10px 10px;
}
.qui-asideNav li{
	border-top: 1px solid #232d34;
	background-color: #36424b;
}
.qui-asideNav a{
	text-decoration: none;
	display: block;
	padding-left: 15px;
	font-size: 16px;
	line-height: 44px;
	color: #ced1d5;
}
.qui-asideNav a:hover{
	color: white;
	background-color: #2bab79;
}

袁同学——2019年4月22日

叫我小袁就好

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
2
评论
国内旅游计划(二)

HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>国内旅游计划</title> <link rel="stylesheet" type="text/css" href="common.css"><lin...
复制链接

扫一扫