移动web)开发(4)之携程案例

vlambda
2022-02-21

移动web)开发(4)之携程案例

又到了做案例巩固的时候了,下面放一些制作的大纲,提供思路.这一期比较水了.

移动web)开发(4)之携程案例

唉,光是最上面的搜索框就一大堆代码,有点麻烦,而且很多东西想不到,真的是哭了呜呜呜...

移动web)开发(4)之携程案例

背景渐变必须添加私有前缀.如果不指定方向的话默认是从上往下渐变的.

效果:

如果想要沿着对角线渐变的话,就将方向改成 top left. 这是左上到左下的渐变,其他的方向也是可以的.

断断续续看了两天终于看完这个案例,自己也跟着敲了一遍,虽然说flex很牛逼但是还是好麻烦啊啊啊,心力交瘁啊,在做的过程中多次被震撼,怎么还能做这么做???

代码:

html部分

<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="./css/normalize.css"> <link rel="stylesheet" href="./css/index.css">
 <title> 携程在手,说走就走</title></head>
<body> <!-- 顶部搜索模块 --> <div class="search-index"> <div class="search"> <!-- 因为前面有个块级元素,所以文字会被挤下来!!! --> 搜索:目的地/酒店/景点/航班号 </div> <a href="#" class="user">我 的</a> </div> <!-- 焦点图模块 --> <div class="focus"> <img src="./upload/focus.jpg" alt=""> </div> <!-- 局部导航栏 --> <ul class="local-nav"> <li><a href="#" title="景点·玩乐"> <span class="local-nav-icon"></span> <span>景点·玩乐</span> </a></li> <li><a href="#"> <span class="local-nav-icon"></span> <span>景点·玩乐</span> </a></li> <li><a href="#"> <span class="local-nav-icon"></span> <span>景点·玩乐</span> </a></li> <li><a href="#"> <span class="local-nav-icon"></span> <span>景点·玩乐</span> </a></li> <li><a href="#"> <span class="local-nav-icon"></span> <span>景点·玩乐</span> </a></li>
 </ul> <nav> <div class="nav-common"> <div class="nav-items"> <a href="#">海外酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav-common"> <div class="nav-items"> <a href="#">海外酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav-common"> <div class="nav-items"> <a href="#">海外酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> </div>
 </nav> <!-- 侧导航栏 --> <ul class="subnav"> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-icon"></span> <span>电话费</span> </a> </li>
 </ul> <!-- 销售模块 --> <div class="sales"> <div class="sales-hd"> <h2>热门活动</h2> <a href="#" class="more">获取更多福利</a>
 </div> <div class="sales-bd"> <div class="row"> <a href=""><img src="./upload/pic1.jpg" alt=""></a> <a href=""><img src="./upload/pic2.jpg" alt=""></a> </div> <div class="row"> <a href=""><img src="./upload/pic3.jpg" alt=""></a> <a href=""><img src="./upload/pic4.jpg" alt=""></a> </div> <div class="row"> <a href=""><img src="./upload/pic5.jpg" alt=""></a> <a href=""><img src="./upload/pic6.jpg" alt=""></a> </div>

 </div> </div></body>
</html>

CSS部分:

body { max-width: 540px; min-width: 320px; margin: 0 auto; font: normal 14px/1.5 tahoma,"Lucida Grande",Verdana,"microsoft Yahei", STXihei,hei; color: #000; background: #f2f2f2; /* 隐藏水平滚动条 */ overflow-x: hidden; -webkit-tap-highlight-color: transparent; /* height: 2000px; */}div { box-sizing: border-box;}a { text-decoration: none; color: #222;}a img { -webkit-touch-callout: none;}li { list-style: none;}ul { padding: 0; margin: 0;}/* 顶部搜索模块 */.search-index { /* 固定定位不以父元素为准而以屏幕为准,所以要给它一个宽度的范围限制 */ min-width: 320px; max-width: 540px; display: flex; position: fixed; top: 0; left: 50%; /* 由于宽度是会变化的,所以不能使用margin-left */ transform: translateX(-50%); /* 兼容老版本的浏览器 */ -webkit-transform: translateX(-50%); /* 固定的盒子必须要有宽度 */ width: 100%; height: 44px; background-color: #f6f6f6; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;


}.search { position: relative; flex: 1; height: 26px; line-height: 24px; border: 1px solid #ccc; margin: 7px 10px; padding-left: 25px; border-radius: 5px; color: #666; box-shadow: 0 2px 4px rgba(0,0,0,.2);}.search::before { position: absolute; content: ''; left: 5px; top: 5px; display: block; width: 16px; height: 15px; background: url(../images/sprite.png) no-repeat -58px -279px;    background-size: 104px 328px;}.user { /* 这是整个user部分的大小 */ width: 44px; height: 44px; font-size: 12px; text-align: center;}.user::before { content: ''; display: block; /* 图片的大小为24*26 */ width: 24px; height: 26px; background: url(../images/sprite.png) -58px -193px no-repeat; background-size: 104px 328px; margin: 2px auto -2px;} .focus { margin-top: 44px;}.focus img { width: 100%;}.local-nav { display: flex; height: 64px; background-color: #fff; border-radius: 8px; margin: 3px 4px;}.local-nav li { flex: 1; height: 64px; /* background-color: blueviolet; */}.local-nav li a { display: flex; flex-direction: column; /* 因为没有给a高度,所以是不能在y轴上居中的. */ align-items: center; font-size: 12px;}.local-nav-icon { width: 32px; height: 32px; background: url(../images/localnav_bg.png) 0 0 no-repeat; margin-top: 8px; background-size: 32px 160px;}nav { overflow: hidden; margin: 0 4px 3px; border-radius: 8px;}.nav-common { display: flex; height: 88px; background-color: pink;}.nav-common:nth-child(2) { margin-top: 3px; margin-bottom: 3px;}.nav-common .nav-items { display: flex; flex-direction: column; flex: 1; line-height: 44px; text-align: center; /* justify-content: center; */    /* align-items: center; */}.nav-items:nth-child(-n+2) {    border-right: 1px solid #fff;}.nav-items a { flex: 1; color: #fff; font-size: 14px;    text-shadow: 1px 1px rgba(0,0,0,.2);}.nav-items a:nth-child(1) { border-bottom: 1px solid #fff;}.nav-items:nth-child(1) a { border-bottom: none; background: url(../images/hotel.png) bottom center no-repeat; background-size: 121px auto;}.nav-common { background: -webkit-linear-gradient(left,#fa5a55,#fa994d);}.subnav { display: flex; flex-wrap: wrap; padding: 5px 0; border-radius: 8px; background-color: #fff; margin: 0 4px;}.subnav li { flex: 20%;}.subnav a { display: flex; flex-direction: column; /* justify-content: center; */    align-items: center;}.subnav-icon { width: 28px; height: 28px; margin-top: 4px; background-color: pink; background: url(../images/subnav-bg.png); background-size: 28px auto;}.sales { background-color: #fff;    margin: 4px;  ;}.sales-hd { position: relative; border-top: 1px solid #bbb; height: 44px; border-bottom: 1px solid #ccc;}.sales-hd h2 { position: relative; font-size: 0px;}.sales-hd h2::after { /* 使用了绝对定位所以不用转换成块级元素 */ position: absolute; top: 12px; left: 20px; /* display: block; */ content: ''; width: 79px; height: 20px; background: url(../images/hot.png) 0 -18px; background-size:79px auto;}.more { position: absolute; top: 8px; right: 5px; background: -webkit-linear-gradient(left, #ff506c, #ff6bc6); border-radius: 15px; padding: 3px 20px 3px 10px; color: #fff;}.more::after { content: ''; position: absolute; top: 9px; right: 9px; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff;    transform: rotate(45deg);}.row { display: flex;    border-bottom: 1px solid #eee;}.row a { flex: 50%;}.row a img { width: 100%;}.row a:nth-child(odd) { border-right: 1px solid #eee;}