css实战案例3：携程旅游首页完整布局

源码了解：hadluo
于 2024-07-18 12:18:17 发布
阅读量276
点赞数 3
文章标签： css 旅游前端
本文链接：https://blog.csdn.net/luozheng4698729/article/details/140519657
版权
完整代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>

		<div class="search_box">
			<!-- 搜索框-->
			<div class="search">搜索：目的地/酒店/航班</div>
			<a class="user">我的</a>
		</div>
		
		<!-- 焦点图图-->
		<div class="focus">
			<img src="img/22.jpg"/>
		</div>
		
		
		<div class="nav_local">
			<ul>
				<li>
					<a class="nav_local_item">
						<img src="img/nav21.png" class="nav_local_item_icon"></img>
						<span  class="nav_local_item_text">景点*玩乐</span>
					</a>
				</li>
				<li>
					<a class="nav_local_item">
						<img src="img/nav22.png" class="nav_local_item_icon"></img>
						<span class="nav_local_item_text">周边游</span>
					</a>
				</li>
				<li>
					<a class="nav_local_item">
					<img src="img/nav23.png" class="nav_local_item_icon"></img>
						<span class="nav_local_item_text">美食林</span>
					</a>
				</li>
				<li>
					<a class="nav_local_item">
					<img src="img/nav24.png" class="nav_local_item_icon"></img>
						<span class="nav_local_item_text">一日游</span>
					</a>
				</li>
				<li>
					<a class="nav_local_item">
					<img src="img/nav25.png" class="nav_local_item_icon"></img>
						<span class="nav_local_item_text">当地攻略</span>
					</a>
				</li>
			</ul>
		</div>
		
		<!-- 主导航栏 -->
		<div class="nav">
			<div class="nav-common">
				<div class="nav-common-top">
					<a>海外酒店</a>
				</div>
				<div class="nav-common-top">
					<a>海外酒店</a>
					<a>特价酒店</a>
				</div>
				<div class="nav-common-top">
					<a>海外酒店</a>
					<a>特价酒店</a>
				</div>
			</div>
			<div class="nav-common">
				<div class="nav-common-top">
					<a>海外酒店</a>
				</div>
				<div class="nav-common-top">
					<a>海外酒店</a>
					<a>特价酒店</a>
				</div>
				<div class="nav-common-top">
					<a>海外酒店</a>
					<a>特价酒店</a>
				</div>
			</div>
			<div class="nav-common">
				<div class="nav-common-top">
					<a>海外酒店</a>
				</div>
				<div class="nav-common-top">
					<a>海外酒店</a>
					<a>特价酒店</a>
				</div>
				<div class="nav-common-top">
					<a>海外酒店</a>
					<a>特价酒店</a>
				</div>
			</div>
		</div>
		
		
		
		<div class="list">
			<div class="list-header">
				<h2>热门活动</h2>
				<a class="list-header-more">获取更多福利></a>
			</div>
			
			
			
			<div class="list-body">
				<div class="list-body-item">
					<div class="list-body-item-box"></div>
					<div class="list-body-item-box"></div>
				</div>
				
				<div class="list-body-item">
					<div class="list-body-item-box">
						<div class="list-body-item-box-inner"></div>
						<div class="list-body-item-box-inner"></div>
					</div>
					<div class="list-body-item-box">
						<div class="list-body-item-box-inner"></div>
						<div class="list-body-item-box-inner"></div>
					</div>
				</div>
			</div>
			
			
		</div>


	</body>
</html>


<style>
	.list-body {
		display: flex;
		flex-direction: column;
	}
	.list-body .list-body-item {
		height: 150px;
		background-color: rebeccapurple;
		display: flex;
	}
	.list-body .list-body-item:nth-child(1){
		border-bottom: 1px solid #fff;
	}
	
	.list-body-item-box {
		flex: 1;
		background-color: #4B90ED;
		display:flex;
		flex-direction: column;
	}
	.list-body-item-box-inner {
		flex: 1;
		background-color: #6CD559;
	}
	.list-body-item-box-inner:nth-child(1){
		border-bottom: 1px solid #ccc;
	}
	
	.list-body-item-box:nth-child(1){
		border-right: 1px solid #fff;
	}
	
	.list {
		border-top: 1px solid #bbb;
		background-color: #fff;
		margin: 4px;
		padding: 0px;
	}
	.list .list-header {
		position: relative;
		height: 44px;
		border-bottom: 1px solid #ccc;
	}
	.list .list-header h2 {
		/*这个是为了seo优化，并不在页面显示*/
		text-indent: -999px;
		overflow: hidden;
		position: relative;
	}
	/*添加一个图片*/
	.list .list-header h2::after{
		content: "";
		background: url(img/hot.png) no-repeat center;
		width: 79px;
		height: 33px;
		background-size: 79px auto;
		position: absolute;
		top: 0px;
		left: 20px;
	}
	
	.list-header-more {
		position: absolute;
		top: 0px;
		right: 8px;
		background: -webkit-linear-gradient(left,#ff506c,#ff6bc6);
		border-radius: 15px;
		padding: 3px 10px 3px 10px;
		font-size: 12px;
		color: #707070;
	}
	
	
	
	///
	a{
		text-decoration: none;
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	dic {
		box-sizing: border-box;
	}
	body {
		min-width: 320px;
		max-width: 540px;
		margin: 0 auto;
	}
	.search_box {
		position: fixed;
		top: 0;
		/*居中*/
		left: 50%;
		transform: translateX(-50%);
		/*transform 属性允许你旋转、缩放、倾斜或平移给定元素*/
		-webkit-transform: translateX(-50%);/*向左平移当前元素长度的一半*/
		/*兼容老浏览器写法*/
		width: 100%;
		min-width: 320px;
		max-width: 540px;
		height: 44px;
		display: flex;
		background-color: #fff;
		z-index: 10;
	}

	.search {
		flex: 1; /*左边占一份*/
		height: 26px;
		line-height: 26px;
		border: 1px solid #ccc;
		margin: 7px 10px;
		border-radius: 5px;
		position: relative;
		padding-left: 25px;
		color: #707070;
		font-size: 13px;
		/*下边框阴影：x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色*/
		box-shadow: 0px 2px 4px rgba(0, 0, 0,.4);
	}
	.search::before {
		content: "";
		background: url(img/search.png) no-repeat center;
		width: 20px;
		height: 20px;
		background-size:20px;
		
		/*使用绝对定位，让他浮出来，不占一行，因为后面还有文字*/
		top: 3px;
		left: 3px;
		position: absolute; /*默认是相对整个body的位置进行绝对定位，如果父级元素加了position: relative，就是相对于父级的位置进行绝对定位*/
	}
	
	
	/* CSS 伪元素 :before 和 :after 是两个强大的工具，它们允许我们在选定元素的前后插入内容，而无需修改HTML结构。这些伪元素通常与 content 属性一起使用，可以插入文本或图像。*/
	.user::before {
		content:"";
		background: url(img/my.png) no-repeat center;
		width: 17px;
		height: 17px;
		background-size:17px;
		display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
		margin: 0 auto; /*水平居中*/
	}
	.user {
		width: 44px;
		height: 44px;
		text-align: center;/*里面的文字水平居中*/
		font-size: 10px;
		padding-top: 8px;
		color: #1296db;
	}
	
	.focus img{
		width: 100%;
		margin-top:44px;;
	}
	.nav_local{
		padding: 4px;
	}
	.nav_local ul{
		height: 64px;
		border-radius: 8px;
		display: flex;
	}

	.nav_local li {
		/*均分*/
		flex: 1;
	}
	
	.nav_local_item {
		display: flex;
		/*主轴设置为y轴， 竖向排列*/
		flex-direction: column;
		/*副轴居中*/
		align-items: center;
	}
	.nav_local_item_icon {
		width: 32px;
		height: 32px;
	}
	.nav_local_item_text{
		font-size: 13px;
		color: #707070;
		margin-top: 2px;
	}

	.nav {
		border-radius: 8px;
		/*这里作用是让我们的圆角边框能显示*/
		overflow: hidden;/*溢出隐藏、清除浮动、解决外边距塌陷等等*/
	}
	
	.nav .nav-common {
		height: 88px;
		display: flex;
	}
	/*nth-child(n) 选择列表中的倒数第n个标签 n为数字*/
	.nav-common:nth-child(2){
		margin: 3px 0;
	}
	.nav-common-top {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.nav-common-top a {
		flex: 1;
		line-height: 44px;
		color: #fff;
		font-size: 14px;
		/*文字阴影*/
		text-shadow: 1px 1px rgba(0, 0, 0,.2);
		text-align: center;
	}
	.nav-common-top a:nth-child(1){
		border-bottom: 1px solid #fff;
	}
	.nav-common-top:nth-child(1) a {
		border:0;
	}
	.nav-common-top:nth-child(1) a::after {
		content: "";
		background: url(img/hotel_ico.png) no-repeat center;
		display: block;
		background-size: 30px;
		width: 30px;
		height: 30px;
		margin-left: 50%;
		transform: translateX(-50%);
		/*transform 属性允许你旋转、缩放、倾斜或平移给定元素*/
		-webkit-transform: translateX(-50%);/*向左平移当前元素长度的一半*/
	}
	
	/*选择前两个元素*/
	.nav-common-top:nth-child(-n+2){
		border-right: 1px solid #fff;
	}
	
	.nav-common:nth-child(1) {
		/**从左到右，颜色线性渐变*/
		background:-webkit-linear-gradient(left , #FA5A55,#FA994D);
	}
	
	
	.nav-common:nth-child(2) {
		/**从左到右，颜色线性渐变*/
		background:-webkit-linear-gradient(left , #4B90ED,#53BCED);
	}
	
	
	.nav-common:nth-child(3) {
		/**从左到右，颜色线性渐变*/
		background:-webkit-linear-gradient(left , #34C2A9,#6CD559);
	}
	
</style>