【运用flex制作携程界面练习笔记】
运用flex制作携程界面练习笔记
- 前言
- 一、设置搜索栏在网页固定且居中效果
- 二、伪元素和伪类
- 2.1 需求：定义一个输入框，当输入数字超出可选范围，则改变输入框的颜色提醒用户
- 2.2 需求：定义一组复选框，当选中复选框时，在复选框后提示已勾选
- 三、 设置最常见的上面一个图片，下面是文字描述的样式
- 四、 设置渐变的背景颜色
- 4.1背景的线性渐变（向下/向上/向左/向右/对角线）
- 4.2背景的径向渐变（由其中心定义）
- 五、 CSS的定位（[position](https://www.w3school.com.cn/css/css_positioning.asp)）
- static-静态定位（HTML 元素默认情况下的定位方式）
- relative-相对定位（相对于其正常位置进行定位）
- fixed-固定定位（相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置）
- absolute-绝对定位（相对于最近的定位祖先元素进行定位）
- sticky-粘性定位（根据用户的滚动位置进行定位）
前言
主要记录我自己觉得重要的知识点
参考学习视频
提示：以下是我自己的思考，错误的地方欢迎指出
一、设置搜索栏在网页固定且居中效果
.search-index {position: fixed;max-width: 540px;min-width: 320px;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 44px;background-color: pink;
}
- 由于设置了position，所以无法用margin: 0 auto;实现居中
- 使用偏移量实现居中，其中transform设置向左移动相对于当前盒子一半的大小
二、伪元素和伪类
伪元素
- 用:: （CSS2时用:）
- 伪元素不允许和伪元素进行拼接，只能有一个伪元素
- 伪元素本身不存在在DOM文档中，它需要人为的去创建它。且就算你创建了伪元素，它也只是逻辑上存在，实际上也并不存在DOM文档中，也就是说你无法使用JS去获取改变它。
伪元素的分类详细见官方文档
伪类
- 用:
- 可以进行多个伪类的拼接
- 伪类它存在于DOM文档中，但如果你没有特别的去声明它，你就看不到它
伪类的分类详细见官方文档
2.1 需求：定义一个输入框，当输入数字超出可选范围，则改变输入框的颜色提醒用户
<body><h1>请输入数字</h1><input type="number" min="1" max="10"><h2>结果：</h2>
</body>
<style>body {background: pink;color: #fff2e5;} input {font-size: 3em;width: 200px;height: 50px;border-radius: 10px;}input:out-of-range {background: orange;}
</style>
当超出范围时，提醒用户“超出范围”
input:out-of-range+h2::after {content: "超出范围";}
2.2 需求：定义一组复选框，当选中复选框时，在复选框后提示已勾选
input::after {display: none;content: "已勾选";width: 150px;height: 50px;margin-left: 100px;font-size: 30px;font-weight: bold;}
input:checked::after {display: block;}
其中关于元素隐藏的一个小点，参考详细内容
- display:none和visible:hidden都能把网页上某个元素隐藏起来
- display:none —不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到
- visible:hidden— 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到
三、 设置最常见的上面一个图片，下面是文字描述的样式
样式例子如下：
设计思路如下：
<a href="#"><span class="icon1"></span><span>景点·玩乐</span>
</a>
a {display: flex;flex-direction: column;align-items: center;}
.icon1 {width: 32px;height: 32px;margin-top: 8px;background: url(../images/localnav_bg.png) no-repeat;background-size: 32px auto;}
四、 设置渐变的背景颜色
4.1背景的线性渐变（向下/向上/向左/向右/对角线）
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
注意：
- 背景渐变必须添加浏览器私有前缀，例如谷歌-webkit-，也就是（-webkit-linear-gradient）
- direction可以是：方位名词（top\right\bottom\left\left top…）或者度数（0deg / 90deg / 180deg / 270deg），默认是top
- 必须定义至少两个色标
例如：.nav-common:nth-child(1) { background: -webkit-linear-gradient(left, orange, yellow); }
则其背景色渐变效果为从左边开始，颜色为从橘色到黄色
repeating-linear-gradient() 函数用于重复线性渐变：
例如： background: -webkit-repeating-linear-gradient(left, #FA5A55 10%, #FA994D 20%);
4.2背景的径向渐变（由其中心定义）
语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地，shape 为椭圆形，size 为最远角，position 为中心
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）
使用大小不同的关键字
size 参数定义渐变的大小。它可接受四个值：
closest-side
farthest-side
closest-corner
farthest-corner
background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
background: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
background: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
五、 CSS的定位（position）
static-静态定位（HTML 元素默认情况下的定位方式）
- 静态定位的元素不受偏移属性的影响，即这些偏移属性对其不起作用
- position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
例如：当设置偏移量left后，盒子没有任何变化
.static {position: static;width: 200px;height: 200px;left: 30px;border: 2px solid red;}
relative-相对定位（相对于其正常位置进行定位）
- 设置相对定位的元素的偏移属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间（移动位置的时候参照点是自己原来的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。(不脱标，继续保留原来的位置)
- 一般都是和绝对定位配套使用，即绝对定位的父级盒子用相对定位
和static的区别就是可以设置偏移属性，例如：
.relative {position: relative;width: 100px;height: 200px;top: 20px;left: 20px;border: 3px solid pink;}
fixed-固定定位（相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置）
- 元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动(需要设置偏移属性才会起作用)
- 固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位
例如：设置一个固定定位窗口
.fixed {position: fixed;width: 100%;height: 30px;left: 40px;top: 30px;background-color: yellow;border: 1px solid #ccc;}
absolute-绝对定位（相对于最近的定位祖先元素进行定位）
- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
- 绝对定位不再占有原先的位置。(脱标)
例如：在相对定位中添加一个在右下方的绝对定位盒子
.absolute {position: absolute;right: 0px;bottom: 0;height: 40px;border: 2px solid blue;}
sticky-粘性定位（根据用户的滚动位置进行定位）
- 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
- 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位（特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同）
例如：在标准流盒子中设置一个粘性盒子，其top为0
.sticky {position: sticky;height: 20px;top: 0;border: 2px solid black;}
当滚动界面时，一直处于static盒子的顶部
当到下一个盒子时，才消失
【运用flex制作携程界面练习笔记】相关推荐
- 移动端--（flex布局携程旅行）
技术:主要采用flex弹性布局 HTML程序 <!DOCTYPE html> <html lang="en"><head><meta ch ...
- python 携程_python 携程爬虫开发笔记
前言 最近购买了<Python3 爬虫.数据清洗与可视化实战>,刚好适逢暑假,就尝试从携程页面对广州的周边游产品进行爬虫数据捕捉. 因为才学Python不够一个星期,python的命名规范 ...
- 携程飞机票部分 vue/cli+element-plus
App.vue 作为入口文件,其中html部分放全局公共的样式. import其他vue文件,以及router, setup里获取后台数据库的数据,转发给路由. 默认的初始跳转界面是Home.js r ...
- 携程在线网页制作（flex布局）
携程在线网页制作(flex布局) 1.技术选型 方案:单独制作移动端页面 技术:flex布局 2.搭建相关文件夹结构 css images(背景图.精灵图等) upload(产品图) index.ht ...
- 微信小程序UI------实现携程首页顶部的界面（弹性布局）
2019独角兽企业重金招聘Python工程师标准>>> 今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看 ...
- 使用Flex布局实现携程APP首页布局
目录 一.整体分析 二.具体样式实现 1.全局样式设置 2.搜索栏 3.游玩导航栏 4.主要功能导航栏 5.便利功能导航栏 6.广告部分 7.页面底部 三.完成效果 四.总结 一.整体分析 这次作业主 ...
- 仿移动端苏宁(rem布局)、携程(flex布局)首页静态页面，源码可下载
移动端苏宁首页(rem布局) 前几个月时跟着黑马pink老师的视频使用rem布局制作了移动端苏宁首页以及移动端携程首页,视频里只完成了一部分页面,于是自己则把剩下未完成的部分敲完并通过码云部署发布静态 ...
- 携程 Apollo 配置中心 | 学习笔记（七） | 如何将配置文件敏感信息加密？
携程 Apollo 配置中心 | 学习笔记(一) Apollo配置中心简单介绍 携程 Apollo 配置中心 | 学习笔记(二) Windows 系统搭建基于携程Apollo配置中心单机模式 携程 A ...
- flex布局的应用 —— 模仿携程移动端的首页
写在前面 昨天已经过去,未来还未到来,所以当下是上天给的最好的恩赐,好好把握. 昨天又很仔细的看了看flex布局,今天下午动手用flex布局做了一个练习,就是模仿携程移动端首页.有一段时间没写html ...
最新文章
- 关于鼠标、键盘的几个例子
- 什么是Python?主要运用哪些方面?
- 国家开放大学2021春1080工程数学（本）题目
- Mybatis执行流程分析_自定义简易Mybatis框架
- .net实现批量在线打印_如何实现报表的批量打印需求
- 【报告分享】企鹅智家智慧社区解决方案2019.pdf（附下载链接）
- NASM汇编语言与计算机系统16-保护模式-全局描述符表GDT
- micropython 驱动 移植_MicroPython v1.12 版本更新
- UEFI原理与编程（一）：环境搭建
- 如何通过视频转换器将qsv格式转换成mp4格式
- 串联滞后校正网络的作用_以下关于串联滞后校正的描述正确的是( )。
- 带你Dart带你Diao之类（一）
- endnote导入bib
- Android打开自启动设置页面
- 基于云服务创建弹性托管集群服务
- 英语口语198之每日十句口语
- 【研0需要知道的那些事01】如何判断期刊是否为核心期刊，知网导出参考文献越来越多怎么办？
- OLAP、OLTP的介绍和比较
- 华为智慧屏和鸿蒙系统对比,华为智慧屏s55和v55区别-华为智慧屏s55和v55对比
- RecyclerView 控件的使用（Android studio）