如何使用弹性布局模拟携程旅行页面？

LJHFI

已于 2023-03-18 16:26:36 修改

阅读量268

点赞数

文章标签： html css

于 2023-03-18 16:05:13 首次发布

本文链接：https://blog.csdn.net/ljhfi/article/details/129638170

版权

html部分：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</div>

<div class="l"><h4>携程精选榜</h4><div class="box1"><img src="../images/goods1.jpg" alt=""> </div><h6>上海奢华酒店</h6> </div>

<div class="r"><h4 class="quanwei">权威排行榜</h4><div class="box2"><img src="../images/goods1.jpg" alt=""> </div><h6>上海周边酒店</h6> </div>

</div>

</div>

<option value="" >windows</option>

<option value="">windows</option>

</select>

</div>

</div>

</div>

<ul>

</ul>

</div>

</body>

</html>

css部分

margin: 0;

padding: 0;

}

body{

background-color: #f4f4f4;

}

.main{

height: 100%;

padding-bottom: 80px;

}

.sousuo{

margin: 0 auto;

margin-top: 5px;

width: 96%;

height: 32px;

border: 1px solid #3587f8;

border-radius: 10px;

}

.sousuo h4{

margin-top: 6px;

margin-left: 10px;

font-weight: 400;

color: #bdbdbd;

}

.xiaotubiao{

display: flex;

border-radius: 10px;

margin-top: 8px;

}

.xiaotubiao ul{

list-style: none;

width: 75%;

display: flex;

flex-direction: column;

margin-left: 3px;

margin-right: 2px;

}

.xiaotubiao ul a{

text-decoration: none;

}

.xiaotubiao ul li:first-child a:first-child{

background-color: #3587f8;

border-radius: 10px;

}

.xiaotubiao ul li{

width: 50%;

/* margin-right: 5px; */

}

.xiaotubiao span{

color: #fff;

font-size: 15px;

}

.xiaotubiao ul li a:first-child{

width: 70px;

height: 44px;

background-color: pink;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

margin-bottom: 2px;

}

.xiaotubiao ul li:first-child span:first-child{

width: 25px;

height: 20px;

background: url(../images/nav.png) no-repeat ;

background-position: 0px -78px;

background-size: 25px;

}

.xiaotubiao ul li:nth-child(2) span:first-child{

width: 25px;

height: 20px;

background: url(../images/nav.png) no-repeat ;

background-position: 0px -24px;

background-size: 25px;

}

.xiaotubiao ul li:nth-child(3) span:first-child{

width: 25px;

height: 20px;

background: url(../images/nav.png) no-repeat ;

background-position: -2px -103px;

background-size: 25px;

}

.xiaotubiao ul li:nth-child(4) span:first-child{

width: 25px;

height: 20px;

background: url(../images/nav.png) no-repeat ;

background-position: -2px -128px;

background-size: 25px;

}

.xiaotubiao ul li:nth-child(5) span:first-child{

width: 25px;

height: 20px;

background: url(../images/nav.png) no-repeat ;

background-position: -2px -227px;

background-size: 25px;

}

.box{

width: 100%;

display: flex;

padding-top: 10px;

}

.box .left{

width: 50%;

height: 160px;

background-color: #fff;

border-radius: 10px;

margin-right: 5px;

margin-left: 10px;

}

.box .left .top{

padding-top: 5px;

display: flex;

justify-content: space-between;

}

.box .left h4{

margin-left: 10px;

color:#f4621b;

font-weight: 400;

}

.box .left span{

background-color:#fdebe3 ;

margin-right: 10px;

color: #f4621b;

}

.box .left img,

.box .right img

{

border-radius: 10px;

width: 90%;

margin-top: 4px;

height: 100px;

}

.box .left .center{

text-align: center;

}

.box .left .bottom{

display: flex;

align-items: center;

}

.box .left .bottom h5{

font-size: 17px;

color: #f4621b;

}

.box .left .bottom i{

font-style: normal;

}

.box .left .bottom del{

font-size: 12px;

color: #666666;

margin-left: 5px;

margin-top: 2px;

}

.box .left .bottom .lijian{

background-color: #f4621b;

margin-left: 5px;

color: aliceblue;

}

.box .right{

position: relative;

margin-right: 10px;

display: flex;

justify-content: space-between;

width: 50%;

height: 160px;

background-color:#fff;

border-radius: 10px;

}

.box .right .l{

margin-right: 5px;

}

.box .right h4{

margin-top: 5px;

color: #bb883e;

}

.box .right h6{

margin-left: 5px;

font-weight: 400;

margin-top: 5px;

font-size: 12px;

overflow: hidden;

}

.box .right .quanwei{

background-color: #fdefd2;

}

.box .right .biaoqian{

position: absolute;

top:40px;

left: 0;

margin-left: 5px;

width: 20px;

height: 30px;

font-size: 12px;

text-align: center;

color: aqua;

font-weight: 700;

border: 2px dashed yellowgreen;

border-radius: 20px;

}

.lunbo img{

margin-top: 2px;

height: 40px;

width: 100%;

}

.button{

height: 20px;

width: 100%;

margin-top: 6px;

display: flex;

justify-content: space-evenly;

}

.others{

height: 30px;

width: 60%;

margin-top: 6px;

margin-left: 20%;

display: flex;

}

.others a{

width: 50%;

text-align: center;

line-height: 30px;

text-decoration: none;

color: #aeaead;

border-right: 1px solid #aeaead;

margin-right: 2px;

}

.others a:last-child{

border-right: 0;

margin-left: -5px;

}

.copy{

text-align: center;

font-size: 10px;

margin-top: 5px;

color: #aeaead;

}

.footer{

position: fixed;

left: 0;

bottom: 0;

width: 100%;

height: 40px;

background-color: #ffffff;

}

.footer ul{

display: flex;

justify-content: space-evenly;

list-style: none;

/* padding: 10px 0; */

}

.footer ul a{

text-decoration: none;

color: #7a7a7a;

}

.footer ul li{

position: relative;

display: flex;

}

.footer .img{

margin-left: 5px;

width: 25px;

height: 20px;

background: url(../images/nav.png) no-repeat ;

background-position: -2px -227px;

background-size: 25px;

}

图片来源：

等

效果图：

LJHFI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
如何使用弹性布局模拟携程旅行页面？

携程旅行这个练习主要用弹性布局。display:flex;justify-content:属性值；align-items:属性值；
复制链接

扫一扫