【运用flex制作携程界面练习笔记】

Sonder,

已于 2023-03-09 17:08:20 修改

阅读量221

点赞数 1

分类专栏： flex布局文章标签： css3 css html

于 2022-06-06 16:31:05 首次发布

本文链接：https://blog.csdn.net/qq_43178432/article/details/124816776

版权

flex布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

运用flex制作携程界面练习笔记

前言
一、设置搜索栏在网页固定且居中效果
二、伪元素和伪类
- 2.1 需求：定义一个输入框，当输入数字超出可选范围，则改变输入框的颜色提醒用户
- 2.2 需求：定义一组复选框，当选中复选框时，在复选框后提示已勾选
三、设置最常见的上面一个图片，下面是文字描述的样式
四、设置渐变的背景颜色
- 4.1背景的线性渐变（向下/向上/向左/向右/对角线）
- 4.2背景的径向渐变（由其中心定义）
五、 CSS的定位（[position](https://www.w3school.com.cn/css/css_positioning.asp)）

前言

主要记录我自己觉得重要的知识点

参考学习视频

提示：以下是我自己的思考，错误的地方欢迎指出

一、设置搜索栏在网页固定且居中效果

.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）

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。
后面top、bottom、left 和 right 用偏移属性代替

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-绝对定位（相对于最近的定位祖先元素进行定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 < html>
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再占有原先的位置。(脱标)
例如：在相对定位中添加一个在右下方的绝对定位盒子

 .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盒子的顶部

当到下一个盒子时，才消失

Sonder,

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【运用flex制作携程界面练习笔记】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档运用flex制作携程界面练习前言一、设置搜索栏在网页固定且居中效果二、伪元素和伪类2.1 需求：定义一个输入框，当输入数字超出可选范围，则改变输入框的颜色提醒用户2.2 需求：定义一组复选框，当选中复选框时，在复选框后提示已勾选三、设置最常见的上面一个图片，下面是文字描述的样式前言主要记录我自己觉得重要的知识点参考学习视频提示：以下是我自己的思考，错误的地方欢迎指出一、设置搜索栏在网页固定且居中效果.search-i.
复制链接

扫一扫