仿写携程旅游手机浏览器页面

xiecheng.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<!--    约束视口宽度，每个手机根据自身进行设置，必须添加--><meta name="viewport" content="width=device-width"><title>携程</title>
<!--    外链式-->
<!--    清楚默认样式--><link rel="stylesheet" type="text/css" href="css/reset.css">
<!--    首页样式--><link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!--    移动端没有版心，移动端宽度一般使用百分比布局-->
<!--百分比布局设置最小宽度和最大宽度-->
<!--header书写--><div class="header">
<!--        固比： 搜索框--><div class="search"><span>搜索：目的地/酒店/景点/航班号</span></div>
<!--        固： 注册--><a href="" class="login">我的</a></div>
<!--banner--><div class="banner"><div class="pic">
<!--            插入图--><img src="data:image/banner.jpg"></div>
<!--        小圆点--><div class="circles"><ol><li class="active"></li><li></li><li></li><li></li><li></li><li></li></ol></div></div>
<!--主导航--><div class="main-nav"><div class="row"><ul><li><a href="">酒店1</a></li><li><a href="">酒店2</a></li><li><a href="">酒店3</a></li><li><a href="">酒店4</a></li><li><a href="">酒店5</a></li></ul></div><div class="row"><ul><li><a href="">机票</a></li><li><a href="">酒店2</a></li><li><a href="">酒店3</a></li><li><a href="">酒店4</a></li><li><a href="">酒店5</a></li></ul></div><div class="row"><ul><li><a href="">旅游</a></li><li><a href="">酒店2</a></li><li><a href="">酒店3</a></li><li><a href="">酒店4</a></li><li><a href="">酒店5</a></li></ul></div><div class="row"><ul><li><a href="">景点</a></li><li><a href="">酒店2</a></li><li><a href="">酒店3</a></li><li><a href="">酒店4</a></li><li><a href="">酒店5</a></li><li><a href="">酒店5</a></li></ul></div></div>
<!--侧导航--><div class="sub-nav"><ul><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li><li><a href="">自由行</a></li></ul></div>
<!--特卖会--><div class="sale">
<!--        标题--><div class="hd"><h3>特卖会</h3><a href="" class="hongbao">领红包再下单</a></div>
<!--        内容bd 左右两部分--><div class="bd"><div class="left">
<!--                图片--><div class="pic"><img src="data:image/banner.jpg"><span>爆款</span></div><div class="txt"><p class="info">三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游三亚五日游</p><p class="price"><i>￥</i><b>1499</b>起<span>2.7折</span></p></div></div><div class="right"><ul><li><p>千款特价</p><p>走过路过不要错过</p></li><li><p>千款特价</p><p>走过路过不要错过</p>--                  </li><li><p>千款特价</p><p>走过路过不要错过</p></li></ul></div></div></div></body>
</html>

index.css

*{padding: 0;margin: 0;
}
body{/*大背景*/background-color: #f2f2f2;font-size: 12px;color: #000000;
}
a{text-decoration: none;color: #2eaae0;
}
img{/*去掉图片小间隔*/display: block;/*图片和父盒子相同*/width: 100%;
}
ul,ol{list-style: none;
}
/*header开始*/
.header{/*1移动端一般使用百分比布局*//*2移动端必须设置最小宽度和最大宽度 使用px*/width: 100%;min-width: 320px;max-width: 540px;/*高度使用  px*/height: 45px;border-top: 1px solid #000000;border-bottom: 1px solid #000000;/*固定定位：脱标 参考浏览器窗口*/position: fixed;/*固定定位水平居中*/left: 50%;/*拉回自身宽度*/transform: translateX(-50%);/*padding：上，左为了子盒子距离父盒子远，右padding为了挤出固比固模型中的固*/padding: 7px 50px 0 8px;/*盒子最终占有宽度100%，高45px，还设置了paddingborder*//*内减盒模型：width height占有*/box-sizing: border-box;/*默认压盖顺序：都有定位的元素后面压盖前面*/z-index: 10;
}.header .search{/*比：标准流 百分比：父盒子内容宽比值*/width: 100%;height: 26px;border: 1px solid #999999;border-radius: 4px;/*盒子阴影*/box-shadow: 0 3px 3px rgba(0,0,0,.2);background-color: #ffffff;box-sizing: border-box;/*挤出背景图区域，将文字挤远点*/padding-left: 24px;line-height: 24px;
}
.header .search::before{/*伪元素content*/content: "";
/*    行内元素不能设置宽高*/
/*    设置大小，位置调整 绝对定位*/
/*    绝对定位参考：参考距离最近且有定位的祖先元素，header有固定定位参考顶点：边框以内的四个顶点，无视padding*/position: absolute;top: 13px;left: 17px;/*渲染效果13*14，设计师将图片放大2倍，前端开发缩小一般使用*/width: 13px;height: 14px;/*背景图设置*//*background-position坐标减半*/background: url("../image/icon.png") no-repeat -0.5px -0.5px;/*引入背景缩小*/background-size: 21px 123px;
}
/*固比固模型：固 使用绝对定位*/
.header .login{/*a是行内元素不能设置宽高*/position: absolute;/*绝对定位：脱标 可以设置宽高*//*子绝父固*/right: 0;top: 4px;width: 50px;height: 39px;text-align: center;line-height: 15px;color: #2eaae0;
}.header .login::before{content: "";/*标准流：块级元素可以设置宽高*/display: block;width: 23px;height: 24px;/*块级元素水平居中*/margin: 0 auto;background: url("../image/icon.png") no-repeat -0px -78.5px;background-size: 21px 123px;
}
.banner{width: 100%;min-width: 320px;max-width: 540px;/*盒子水平居中*/margin: 0 auto;/*由于header设置固定定位，脱标压盖住标准流*/padding-top: 45px;position: relative;
}
.banner .circles{/*小圆点盒子压盖图片*/position: absolute;right: 6px;bottom: 6px;width: 167px;height: 5px;
}
.banner .circles ol li{/*浮动：同级元素并排显示并且设置宽高*/float: left;width: 5px;height: 5px;margin-right: 5px;background-color: rgba(255,255,255,.5);border-radius: 5px;
}
.banner .circles ol .active{width: 17px;background-color: #ffffff;
}
/*主导航*/
.main-nav{/*一般盒子设置通栏*/width: 100%;/*省略高度内容撑开*//*利用padding挤出间隔*/padding: 4px;box-sizing: border-box;min-width: 320px;max-width: 540px;margin: 0 auto;
}
.main-nav .row{width: 100%;height: 90px;background-color: #ff697a;border-radius: 8px;margin-bottom: 4px;
}
.main-nav .row ul li{float: left;/*均分*/width: 33.33%;height: 45px;/*有左边框 上边框*/border-left: 1px solid #ffffff;border-top: 1px solid #ffffff;box-sizing: border-box;
}
.main-nav .row ul li:first-child{border: none;height: 90px;
}
.main-nav .row ul li:nth-child(2),
.main-nav .row ul li:nth-child(3){border-top: none;
}
.main-nav .row ul li a{/*a行内元素*/display: block;/*标准流：父盒子的内容高度的比值*/height: 100%;text-align: center;line-height: 45px;color: #ffffff;/*文字阴影*/text-shadow: 0 2px 2px rgba(0,0,0,.2);
}
.main-nav .row ul li:first-child a{position: relative;
}
/*序选择器：所有儿子中的排名*/
.main-nav .row ul li:first-child a::after{content: "";position: absolute;/*绝对定位水平居中*/left: 50%;transform: translateX(-50%);bottom: 15px;width: 73px;height: 34px;background: url("../image/hotel.png") no-repeat 0 0;/*背景图压缩*/background-size: 73px 32.5px;
}
.main-nav .row:nth-child(2){background-color: #3d98ff;
}
.main-nav .row:nth-child(3){background-color: #44c522;
}
.main-nav .row:nth-child(4){background-color: #fc9720;
}
.main-nav .row:nth-child(2) ul li:first-child a::after{background: url("../image/fly.png") no-repeat 0 0;/*背景图压缩*/background-size: 79.5px 34px;
}
.main-nav .row:nth-child(3) ul li:first-child a::after{background: url("../image/travel.png") no-repeat;/*背景图压缩*/background-size: 90.5px 47px;bottom: 11px;
}
.main-nav .row:nth-child(4) ul li:first-child{height: 45px;
}
.main-nav .row:nth-child(4) ul li:first-child a::after{background: none;
}
.main-nav .row:nth-child(4) ul li:nth-child(4){border-left: 0;
}
.sub-nav{width: 100%;height: 182px;padding: 0 4px;min-width: 320px;max-width: 540px;margin: 0 auto;box-sizing: border-box;
}
.sub-nav ul{/*大盒子不设置白色背景，设置四个圆角*/width: 100%;height: 100%;border-radius: 8px;/*将li多余背景色溢出隐藏*/overflow: hidden;
}
.sub-nav ul li{
/*    均分  水平方向：li+border-right垂直方向：li 60px 上下间隔使用mg*/float: left;width: 25%;height: 60px;border-right: 1px solid #f2f2f2;margin-bottom: 1px;box-sizing: border-box;/*白色背景渲染*/background-color: #ffffff;
}
.sub-nav ul li:nth-child(4n){border-right: none;
}
.sub-nav ul li a{display: block;width: 100%;height: 100%;color: #000000;/*单行垂直方向调整：line-height*/line-height: 90px;text-align: center;position: relative;
}
.sub-nav ul li a::before{
/*    小图标：伪元素  绝对定位*/content: "";position: absolute;left: 50%;margin-left: -10px;top: 11px;width: 25px;height: 25px;background: url("../image/sub.png") no-repeat -4px -4px;background-size: 28px 280px;
}
.sub-nav ul li:nth-child(5) a::before{background-position: -3px -33px;
}
/*特卖会*/
.sale{width: 100%;height: 263px;border-top: 1px solid #dbdbdb;border-bottom: 1px solid #dbdbdb;background-color: #ffffff;margin: 8px auto;min-width: 320px;max-width: 540px;padding: 15px 8px 0 8px;box-sizing: border-box;
}
.sale .hd{width: 100%;height: 14px;margin-bottom: 15px;position: relative;
}
.sale .hd h3{/*渲染背景图  同时有文字不能让用户看到，利用padding-top挤出盒子高度*//*移动端宽度一般使用百分比布局，但是对于固定宽度还是是哦那个px*/width: 56px;height: 0;padding-top: 14px;background: url("../image/home_text.png") no-repeat;background-size: 79px 57.5px;overflow: hidden;
}
.sale .hd .hongbao{/*a行内元素  位置定在右侧  绝对*/position: absolute;top: -4px;right: 0;width: 102px;height: 20px;/*text-align: center;*//*line-height: 20px;*//*渐变*/background-image: -webkit-linear-gradient(left,#fe6375,#fe7ccd);border-radius: 20px;padding-left: 11px;box-sizing: border-box;line-height: 20px;color: #ffffff;
}
.sale .hd .hongbao::after{content: "";position: absolute;top: 6px;width: 7px;height: 7px;border-top: 2px solid #ffffff;border-right: 2px solid #ffffff;/*正方向旋转45°*/transform: rotate(45deg);
}
.sale .bd{width: 100%;height: 205px;
}
.sale .bd .left{float: left;width: 50%;height: 100%;border-right: 2px solid #ffffff;background-color: #f9f9f9;box-sizing: border-box;
}
.sale .bd .left .pic{width: 100%;height: 117px;overflow: hidden;position: relative;}
.sale .bd .left .pic span{/*利用长方形+三角形*/position: absolute;/*长方形*/width: 38px;height: 20px;left: 0;top: 0;background-color: #fd3a51;color: #ffffff;text-align: center;line-height: 20px;
}
.sale .bd .left .pic span::after{content: "";/*设置10px宽度的上边框三角*/position: absolute;width: 0;height: 0;border: 10px solid #fd3a51;/*上边框 ，上三角形*/border-color: #fd3a51 transparent transparent;/*上边框宽度边长到20px*/border-top-width: 20px;right: -10px;
}
.sale .bd .left .txt{padding: 8px 6px 0 8px;font-size: 12px;line-height: 22px;
}
.sale .bd .left .txt .info{/*多行文字显示省略号*//*盒子宽高*/width: 100%;height: 44px;/*文字转box*/display: -webkit-box;/*垂直*/-webkit-box-orient: vertical;/*2行*/-webkit-line-clamp: 2;/*文字溢出显示省略号*/text-overflow: ellipsis;/*盒子溢出省略*/overflow: hidden;
}
.sale .bd .left .txt .price{height: 23px;font-size: 14px;line-height: 23px;color: #ff495e;
}
.sale .bd .left .txt .price i{/*文字不倾斜*/font-style: normal;font-size: 12px;
}
.sale .bd .left .txt .price span{padding: 2px 6px;font-size: 12px;color: #ffffff;background-color: #fd3a51;border-radius: 10px;margin-left: 4px;
}
.sale .bd .right{float: left;width: 50%;border-left: 2px solid #ffffff;box-sizing: border-box;
}
.sale .bd .right ul li {/*同级元素要设置浮动都必须设置浮动*/float: left;background-color: #f9f9f9;padding-top: 9px;box-sizing: border-box;
}
.sale .bd .right ul li:first-child {width: 100%;height: 88px;margin-bottom: 4px;padding-left: 7px;position: relative;
}
.sale .bd .right ul li:first-child p:first-child {color: #fd3a51;font-weight: bold;
}
.sale .bd .right ul li:first-child::after{content: "";position: absolute;right: 4px;bottom: 0;width: 50px;height: 50px;background: url("../image/pic-1.png") no-repeat;background-size: 50px 50px;
}
.sale .bd .right ul li:nth-child(2){width: 50%;height: 112px;position: relative;
}
.sale .bd .right ul li:nth-child(3){width: 50%;border-left: 4px solid #ffffff;height: 112px;position: relative;
}
.sale .bd .right ul li:nth-child(2)::after{content: "";width: 50px;height: 50px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 3px;background: url("../image/pic-2.png") no-repeat;background-size: 50px 50px;
}
.sale .bd .right ul li:nth-child(3)::after{content: "";width: 50px;height: 50px;position: absolute;left: 50%;transform: translateX(-50%);bottom: 3px;background: url("../image/pic-3.png") no-repeat;background-size: 50px 50px;
}

仿写携程旅游手机浏览器页面相关推荐

Webmagic 爬虫框架爬取马蜂窝、携程旅游、汽车之家游记信息
WebMagic学习遇到的问题 Log4j错误解决:在src目录下添加配置文件 log4j.properties log4j.rootLogger=INFO, stdout, filelog4j. ...
python爬取携程旅游评价信息词云图分析
python爬取携程旅游评价信息词云图分析前言前面咱们已经分析过如何爬取携程旅游的相关信息,如果没有看过的,可以先跳转看一下前面的那篇博客:python 爬虫一键爬取携程旅游团数据这一篇呢,咱 ...
jsp页面适应手机屏幕_Jsp编写的页面如何适应手机浏览器页面
经常遇到JSP网页需要适配手机设备的尺寸问题解决: 在JSP加入 content属性值 : width:可视区域的宽度,值可为数字或关键词device-width(设备的宽度) maximum-sc ...
python爬携程上出境游数据_python爬取携程旅游评价信息词云图分析
python爬取携程旅游评价信息词云图分析前言前面咱们已经分析过如何爬取携程旅游的相关信息,如果没有看过的,可以先跳转看一下前面的那篇博客:python 爬虫一键爬取携程旅游团数据这一篇呢,咱 ...
python 爬取携程旅游景点评论
python爬取携程旅游景点评论爬取网址:https://you.ctrip.com/ 爬取评论全部代码 import requests import json import re import t ...
使用pandas清洗携程旅游数据
1.导入模块 from pandas import DataFrame,Series import pandas as pd import numpy as np from fuzzywuzzy im ...
素质拓展·【团建宝】千岛湖皮划艇+露营+环岛骑行2日团建-【携程旅游】
素质拓展·[团建宝]千岛湖皮划艇+露营+环岛骑行2日团建-[携程旅游] 素质拓展·[团建宝]千岛湖皮划艇+露营+环岛骑行2日团建-[携程旅游] posted on 2016-10-24 14:02 l ...
订单失效怎么做的_携程旅游系统崩溃？济南一市民遭遇“钱已付，酒店订单不存在”...
10月2日晚间,有多名网友发布微博,称通过携程APP预订酒店,付款后显示订单不存在,系统疑似崩溃."我在携程APP上预订的酒店,银行卡的钱已经扣了,可携程订单显示'该订单已失效'." ...
阻止手指缩放手机浏览器页面
阻止手指缩放手机浏览器页面首先在html的head头部加: <meta name="viewport" content="width=device-width, ...

仿写携程旅游手机浏览器页面

仿写携程旅游手机浏览器页面相关推荐

最新文章

热门文章