携程手机端网页设计效果图
携程手机端网页设计效果图
为了避免挂科，该做的还是得做，自己学得也不咋会，就瞎写的，反正只要效果图出来就完事。所以代码极其啰嗦哈哈哈哈。
效果图如下：
文件总的放置路径是这样的 :
这个是 html ：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>L-Kingtitle>
<link rel="stylesheet" href="fa/css/all.css">
<link rel="stylesheet" href="css/style.css">
<link href="css/swiper.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/swiper.min.js">script>
head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/1.jpg">div>
<div class="swiper-slide"><img src="images/2.jpg">div>
<div class="swiper-slide"><img src="images/3.jpg">div>
div>
div>
<script>
var mySwiper = new Swiper
('.swiper-container', {
direction: 'horizontal', // 水平切换选项
spaceBetween: 20,
slidesPerView: 'auto',
loop: true, // 循环模式选项
loopedSlides: 5,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
})
script>
<div class="search">
<button>button>
<input type="text" value="搜索：目的地/酒店/景点/航班号">
div>
<div class="users">
<div class="user">div>
<a href="#" class="me">我 的a>
div>
<div class="nav">
<div>
<a href="#">
<img src="images/1.png" alt="">
攻略·景点
a>
div>
<div>
<a href="#">
<img src="images/2.png" alt="">
门票·玩乐
a>
div>
<div>
<a href="#">
<img src="images/3.png" alt="">
美食林
a>
div>
<div>
<a href="#">
<img src="images/4.png" alt="">
周边游
a>
div>
<div>
<a href="#">
<img src="images/5.png" alt="">
一日游
a>
div>
div>
<div class="main">
<nav>
<div class="nav-common">
<div class="nav-items">
<a href="#" id="hotel">酒店a>
div>
<div class="nav-items">
<a href="#">民宿·客栈a>
div>
<div class="nav-items">
<a href="#">机票·火车票+酒店a>
div>
div>
<div class="nav-common">
<div class="nav-items">
<a href="#" id="airplane">机票a>
div>
<div class="nav-items">
<a href="#">火车票a>
div>
<div class="nav-items">
<a href="#">汽车·船票a>
div>
<div class="nav-items">
<a href="#">专车·租车a>
div>
div>
<div class="nav-common">
<div class="nav-items">
<a href="#" id="travel">旅游a>
div>
<div class="nav-items">
<a href="#">高铁游a>
div>
<div class="nav-items">
<a href="#">邮轮游a>
div>
<div class="nav-items">
<a href="#">定制游a>
div>
div>
nav>
div>
<div class="sales-box">
<div class="sales-hd">
<div>div>
<div>
更多
<i class="fas fa-angle-right">i>
div>
div>
<div class="sales-bd">
<div class="column">
<a href="#">
<img src="images/10020q000000gajaeDB6E_C_360_202.jpg">
a>
<a href="#">
<p>三亚5日自由行(5钻)·避寒热销【高星假型酒店合辑·四晚连住】春节限时享受...p>
a>
<div class="price"><span>￥span>2192起div>
div>
<div class="first">
<div>
<span>千款特价span>
<span>走过路过不要错过span>
div>
<div>div>
div>
<div class="two">
<div class="row">
<div>
<span>境外精选span>
<span> 限时抢购span>
div>
<div>div>
div>
<div class="row">
<div>
<span class="trt">周边玩乐span>
<span class="trb"> 欢乐度周末span>
div>
<div>div>
div>
div>
div>
div>
<div class="foot-nav">
<a href="#">
<img src="images/one.png" alt="">
自由行
a>
<a href="#">
<img src="images/two.png" alt="">
WIFI电话卡
a>
<a href="#">
<img src="images/three.png" alt="">
保险·签证
a>
<a href="#">
<img src="images/four.png" alt="">
换钞·购物
a>
<a href="#">
<img src="images/five.png" alt="">
当地向导
a>
<a href="#">
<img src="images/six.png" alt="">
特价机票
a>
<a href="#">
<img src="images/seven.png" alt="">
礼品卡
a>
<a href="#">
<img src="images/eight.png" alt="">
申卡·借钱
a>
<a href="#">
<img src="images/nine.png" alt="">
旅拍
a>
<a href="#">
<img src="images/ten.png" alt="">
更多
a>
div>
<div class="footer">
<div class="foot">
<a href="#">
<img src="images/电话预订.jpg" alt="">
电话预订
a>
<a href="#">
<img src="images/下载客户端.jpg" alt="">
下载客户端
a>
<a href="#">
<img src="images/我的.jpg" alt="">
我的订单
a>
div>
<p class="link">
<a href="#">网站地图a>
<span>|span>
<a href="#">
<img src="images/earth.png" alt="">
Language
<img src="images/down.png" alt="">
a>
<span>|span>
<a href="#">电脑版a>
p>
<p class="bottom">©2019携程旅行 | 沪ICP备08023580号p>
div>
body>
html>
这个是样式表 ：
body {
max-width: 540px;
min-width: 320px;
margin: auto;
font: 12px/1.5 "Microsoft yahei";
background: #F2F2F2;
height: 2000px;
}
.swiper-container {
position: relative;
margin-top: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.swiper-wrapper img {
width: 540px;
height: 230px;
}
.search {
position: absolute;
width: 450px;
height: 32px;
background-color: white;
margin: -225px 0 0 20px;
border-radius: 16px;
z-index: 999999;
}
button {
width: 20px;
height: 20px;
background: url("../images/search.png") no-repeat;
background-size: 90%;
border: 0;
outline: none;
margin: 7px 0 5px 16px;
}
input {
position: absolute;
width: 390px;
font-size: 14px;
color: #b0b0b0;
border: 0;
margin-top: 6px;
outline: none;
}
.users {
position: absolute;
margin: -225px 0 0 485px;
z-index: 99999;
}
.user {
width: 24px;
height: 24px;
background: url("../images/me.png") no-repeat center;
background-size: 100%;
}
.me {
text-decoration: none;
color: white;
}
.nav {
position: absolute;
display: flex;
width: 510px;
margin: -30px 0 0 15px;
background-color: white;
border-radius: 5px;
z-index: 99999;
box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.nav div {
flex: 1;
}
.nav a {
display: block;
text-decoration: none;
text-align: center;
color: black;
margin: 12px 0;
}
.nav img {
display: block;
width: 30%;
height: 30px;
margin: auto;
}
.main {
display: flex;
flex-direction: row;
width: 510px;
margin: 60px auto 10px auto;
}
nav {
overflow: hidden;
border-radius: 8px;
}
.nav-common {
width: 510px;
height: 80px;
display: flex;
line-height: 80px;
}
.nav-common:nth-child(2)
{
margin: 1px 0;
}
.nav-items {
display: flex;
flex-direction: row;
height: 80px;
}
.nav-items a {
display: block;
color: #fff;
text-decoration: none;
margin: 0 auto;
font-size: 16px;
}
.nav-common .nav-items:nth-child(1) {
flex: 1.5;
}
.nav-common:nth-child(1) .nav-items:nth-child(1) {
flex: 1.5;
background: url(../images/grid-nav-items-hotel@v7.15.png) no-repeat bottom right;
background-size: 70%;
}
.nav-common:nth-child(2) .nav-items:nth-child(1) {
background: url(../images/grid-nav-items-flight@v7.15.png) no-repeat bottom right;
background-size: 70%;
}
.nav-common:nth-child(3) .nav-items:nth-child(1) {
background: url(../images/grid-nav-items-travel@v7.15.png) no-repeat bottom right;
background-size: 70%;
}
.nav-common:nth-child(1) .nav-items:nth-child(2) {
flex: 1;
}
.nav-common:nth-child(1) .nav-items:nth-child(3) {
flex: 2;
border-right: 0;
}
.nav-common .nav-items:nth-child(n+2) {
flex: 1;
}
/* 此处的nth-child(-n+3)表示前3个元素 */
.nav-items:nth-child(-n+3) {
border-right: 1px solid #fff;
}
.nav-common:nth-child(1) {
background: linear-gradient(to right,#FA5956, #FFCD50);
}
.nav-common:nth-child(2) {
background: linear-gradient(to right,#4b90ed, #53bced);
}
.nav-common:nth-child(3) {
background: linear-gradient(to right,#34c2a9, #6cd559);
}
#hotel, #airplane, #travel {
display: block;
margin-left: 15px;
}
.nav-common:nth-child(1) .nav-items:nth-child(2) {
background: url(../images/grid-nav-items-minsu@v7.15.png) no-repeat bottom left;
background-size: 50%;
}
.nav-common:nth-child(1) .nav-items:nth-child(3) {
background: url(../images/grid-nav-items-jhj@v7.15.png) no-repeat bottom right;
background-size: 70%;
}
.nav-common:nth-child(1) .nav-items:nth-child(3) a {
color: #A05416;
}
.nav-common:nth-child(2) .nav-items:nth-child(2) {
background: url(../images/grid-nav-items-train.png) no-repeat bottom left;
background-size: 50%;
}
.nav-common:nth-child(3) .nav-items:nth-child(2) {
background: url(../images/grid-nav-items-dingzhi@v7.15.png) no-repeat bottom left;
background-size: 70%;
}
.sales-box {
width: 510px;
margin: auto;
}
.sales-hd {
position: relative;
height: 40px;
line-height: 40px;
}
.sales-hd div:nth-child(1) {
position: absolute;
width: 80px;
height: 30px;
background: url("../images/te.png") no-repeat center;
background-size: 100%;
margin-top: 5px;
}
.sales-hd div:nth-child(2) {
float: right;
width: 70px;
height: 26px;
background: linear-gradient(to right,#ff4e6b, #ff6cc0);
font-size: 15px;
color: white;
margin: 5px 10px;
border-radius: 13px;
text-align: center;
line-height: 26px;
}
.sales-hd div i {
font-size: 18px;
}
.column {
float: left;
width: 252px;
height: 255px;
margin-right: 5px;
background-color: #f9f9f9;
}
.sales-bd a {
text-decoration: none;
color: black;
}
.sales-bd .column a p {
display: block;
font-size: 14px;
margin: 5px 5px;
height: 45px;
}
.sales-bd .column a img {
width: 253px;
height: 160px;
}
.sales-bd .column .price {
height: 30px;
font-size: 20px;
color: #ff3d74;
margin-left: 5px;
}
.sales-bd .column .price span {
font-size: 14px;
}
.first {
float: left;
width: 253px;
height: 100px;
margin-bottom: 5px;
background-color: #f9f9f9;
}
.first div:nth-child(1) {
width: 150px;
height: 100px;
}
.first div:nth-child(1) span:nth-child(1) {
display: inline-block;
width: 75px;
height: 20px;
font-size: 18px;
color: #ff3270;
line-height: 20px;
margin: 30px 0 10px 15px;
}
.first div:nth-child(1) span:nth-child(2) {
display: block;
width: 135px;
height: 20px;
margin-left: 15px;
color: #4a3e4c;
}
.first div:nth-child(2) {
width: 80px;
height: 80px;
background: url("../images/pic1.png") no-repeat center;
background-size: 100%;
margin: -92px 10px 0 160px;
}
.two {
float: left;
display: flex;
flex-direction: row;
height: 150px;
}
.two .row {
flex: 1;
width: 124px;
}
.two .row:nth-child(1) {
background-color: #f9f9f9;
margin-right: 5px;
}
.two .row:nth-child(1) span:nth-child(1) {
display: block;
width: 75px;
height: 20px;
font-size: 18px;
font-weight: 900;
color: #73a6f5;
margin:10px auto 10px auto;
}
.two .row:nth-child(1) span:nth-child(2) {
display: block;
color: #4a3e4c;
font-size: 13px;
margin-left: 34px;
}
.two .row:nth-child(1) div:nth-child(2) {
width: 70px;
height: 70px;
background: url("../images/pic2.png") no-repeat center;
background-size: 100%;
margin: 10px auto 0 auto;
}
.two .row:nth-child(2) {
background-color: #f9f9f9;
}
.two .row:nth-child(2) span:nth-child(2) {
display: block;
color: #4a3e4c;
font-size: 13px;
margin-left: 28px;
}
.two .row:nth-child(2) span:nth-child(1) {
display: block;
width: 75px;
height: 20px;
font-size: 18px;
font-weight: 900;
color: #7fcb9a;
margin:10px auto 10px auto;
}
.two .row:nth-child(2) div:nth-child(2) {
width: 70px;
height: 70px;
background: url("../images/pic3.png") no-repeat center;
background-size: 100%;
margin: 10px auto 0 auto;
}
/* 设置底部导航栏 */
.foot-nav {
width: 510px; /* 容器宽高 */
height: 120px;
margin: 5px auto 0 auto; /* nav的上下左右距离 */
display: flex;
flex-direction: row; /* 设置元素横向伸缩 */
flex-wrap: wrap;
}
.foot-nav a {
display: block;
width: 100px;
text-decoration: none;
text-align: center;
color: black;
margin: auto;
}
/* 设置图片样式 */
.foot-nav img {
display: block; /* 将img转换为块元素 */
width: 20px; /* 设置图片宽高 */
height: 20px;
margin: 0 auto 5px auto;
}
/* 设置底部样式 */
.footer {
height: 120px; /* 容器的高 */
text-align: center; /* 容器里文字居中 */
}
.footer .foot {
display: flex; /* 设置div为弹性盒 */
height: 60px;
border-top: 1px solid #c2c2c2; /* 设置上下边框线 */
border-bottom: 1px solid #c2c2c2;
margin: auto; /* 使nav水平居中 */
background-color: white;
}
.footer .foot a {
flex: 1;
text-decoration: none;
color: #34383b;
}
.footer img {
display: block;
margin: 10px auto 2px auto;
}
/* 设置最低部的样式 */
.footer p {
display: block;
line-height: 30px;
margin: auto;
}
.footer .link a {
display: inline-block;
text-decoration: none;
color: #8A8A8A;
text-align: center;
}
.footer .link span {
font-size: 16px;
color: #b29999;
margin: 0 3px;
}
.link img {
display: inline-block;
width: 13px;
vertical-align: middle;
margin: 0 5px 0 0;
}
.link img:nth-child(2) {
margin-left: -3px;
}
.footer .bottom {
font-size: 5px;
color: #999999;
}
图标字体库文件 ：
链接：https://pan.baidu.com/s/1Ezhz9zM50TuOmsncoYhJLg
提取码：6pwq
顶头的轮播图相关的 js 文件 ：
链接：https://pan.baidu.com/s/1AMV_xm6f2C7ov0pbdXCWgw
提取码：xmus
链接：https://pan.baidu.com/s/1YjKMn6XqnGVWRSN_v6nkaA
提取码：tdl7
重置样式表文件 ：
链接：https://pan.baidu.com/s/1TuT5Rgv_J8gbOjA3m7a9cg
提取码：iig0
图片文件 ：
链接：https://pan.baidu.com/s/1HDS2ESneNVPyDi7S3VM2Bg
提取码：hrk2