【CSS】模仿携程网h5静态页面

最新推荐文章于 2022-08-15 19:55:46 发布

ljs_coding

最新推荐文章于 2022-08-15 19:55:46 发布

阅读量1.9k

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/ChristineAS/article/details/87860771

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

模仿的是导航栏的部分，主要是为了应用伸缩布局的相关知识和熟悉知识点。

效果图

源代码

<!DOCTYPE html>
<html>
<head>
	<title>携程网</title>
	<style type="text/css">
    *{/*第一步清除默认*/
    	margin: 0;
    	padding: 0;
    }
    /*从上到下都是统一的宽度，所以设置在body里面*/
    body{
    	min-width: 320px;
    	max-width: 540px;
    	margin: 0 auto;
    }
    header{
    	width: 100%;/*继承父亲宽度*/
    	height:100px;/*高度是固定的*/
    }
    header img{
    	width:100%;
    	height:100px;
    }
    .row{
    	height:90px;
    	background: linear-gradient(to right, rgba(250,109,83,1), rgba(250,154,77,1));
    	border-radius: 8px 8px;
    	margin: 5px;
    	display: flex;

    }
    .row3{
    	flex:1;

    } 
    .detail{
    	display: flex;
    	flex-direction:column;/*垂直排列*/
    	border-left: 1px solid #fff;
    }
    .row3 a{
    	color: #fff;
    	text-decoration: none;
    	display: block;
    	font-size: 15px;
    	text-align: center;
    	line-height: 45px;
    	height: 45px;
    }
    .detail a:first-child{
    	border-bottom:1px solid #fff;
    }
    .row:nth-child(2){
    	background: linear-gradient(to right, rgba(75,144,237,1), rgba(82,186,237,1));
    }
     .row:nth-child(3){
    	background: linear-gradient(to right, rgba(55,195,166,1), rgba(106,212,89,1));
    }
    .row3:first-child{
    	background: url(images/hotel.png) no-repeat;
    	background-size: auto 50px;
    	background-position: center bottom;
    }
    .row:nth-child(2) .row3:first-child{
		background: url(images/flight.png) no-repeat;
    	background-size: auto 50px;
    	background-position: center bottom;
    }
    .row:nth-child(3) .row3:first-child{
		background: url(images/travel.png) no-repeat;
    	background-size: auto 50px;
    	background-position: center bottom;
    }
	</style>
</head>
<body>
<header>
	<img src="images/header1.jpg">
</header>
<nav>
	<div class="row">
		<div class="row3">
			<a href="#">酒店</a>
		</div>
		<div class="row3 detail">
			<a href="#">海外酒店</a>
			<a href="#">特价酒店</a>
		</div>
		<div class="row3 detail">
			<a href="#">特价酒店</a>
			<a href="#">民宿/客栈</a>
		</div>
	</div>
	<div class="row">
		<div class="row3">
			<a href="#">飞机票</a>
		</div>
		<div class="row3 detail">
			<a href="#">火车票</a>
			<a href="#">特价机票</a>
		</div>
		<div class="row3 detail">
			<a href="#">汽车票 船票</a>
			<a href="#">专车 租车</a>
		</div>
	</div>
	<div class="row">
		<div class="row3">
			<a href="#">旅游</a>
		</div>
		<div class="row3 detail">
			<a href="#">门票</a>
			<a href="#">目的地攻略</a>
		</div>
		<div class="row3 detail">
			<a href="#">邮轮旅行</a>
			<a href="#">定制旅行</a>
		</div>
	</div>
</nav>
<footer></footer>
</body>
</html>

这个例子看似简单，实际上在样式部分还是运用了不少环环相扣的知识。我自己一开始做的效果比现在的还要差，这是第二遍。

总结：

定义class的时候要考虑到尽量减少样式的重复代码，比如这三栏样式一样，那么不必分别定义为hotel、flight、travel，而是统一使用row、row3这样的名称。
多类名的优势：既有共同样式又有不同样式的情况下使用。比如每一行的第一块和第二块、第三块都设置flex:1,里面的a都设置一样的字体样式等等，但右边两块要单独设置line-height等等。
display:flex;flex-direction:column;是放在一起的，都在父元素中。
CSS3渐变效果。这里使用的是background: linear-gradient(to right, rgba(250,109,83,1), rgba(250,154,77,1));表示从左到右渐变。
设置机票和旅行两块的时候使用的是.row:nth-child(2) .row3:first-child，而不是.row3:nth-child(4)，因为它们的父元素是不一样的，不能越过.row进行计数。
一行三块之间的白色空隙是用border定义的，而不是padding或margin。因为为row指定了一个整体的背景色。

ljs_coding

关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
【CSS】模仿携程网h5静态页面

模仿的是导航栏的部分，主要是为了应用伸缩布局的相关知识和熟悉知识点。效果图源代码<!DOCTYPE html><html><head> <title>携程网</title> <style type="text/css"> *{/*第一步清除默认*/ margin: 0; p...
复制链接

扫一扫

专栏目录