移动WEB开发之flex布局

news2024/11/13 9:25:11
css基础（一）css基础（一）_上半场结束，中场已休息，下半场ing的博客-CSDN博客
Emmet语法Emmet语法_上半场结束，中场已休息，下半场ing的博客-CSDN博客
css基础（二）css基础（二）_上半场结束，中场已休息，下半场ing的博客-CSDN博客
css基础（三）css基础（三）_上半场结束，中场已休息，下半场ing的博客-CSDN博客
css基础（四）css基础（四）_上半场结束，中场已休息，下半场ing的博客-CSDN博客
css基础（五）css新特性（五）_上半场结束，中场已休息，下半场ing的博客-CSDN博客
移动WEB开发之流式布局移动WEB开发之流式布局_上半场结束，中场已休息，下半场ing的博客-CSDN博客
移动WEB开发之flex布局移动WEB开发之flex布局_上半场结束，中场已休息，下半场ing的博客-CSDN博客
移动WEB开发之rem适配布局移动WEB开发之rem适配布局_上半场结束，中场已休息，下半场ing的博客-CSDN博客
移动WEB开发之响应式布局移动端WEB开发之响应式布局_上半场结束，中场已休息，下半场ing的博客-CSDN博客

目录

一、flex布局体验

1.1 传统布局与flex布局

1.2 初体验

二、flex布局原理

三、flex布局常见父项属性

3.1 常见父项属性

3.2 flex-direction设置主轴的方向

3.2.1 主轴与侧轴

3.2.2 属性值

3.3 justify-content设置主轴上的子元素排列方式

3.4 flex-wrap设置子元素是否换行

3.5 align-items 设置侧轴上的子元素排列方式(单行)

3.6 align-content 设置侧轴上的子元素的排列方式(多行)

3.7 align-content 和 align-items 区别 

3.8 flex-flow

四 、 flex布局子项常见属性

4.1 flex 属性

4.2 align-self控制子项自己在侧轴上的排列方式

4.3 order属性定义项目的排列顺序

一、flex布局体验

1.1 传统布局与flex布局

1.2 初体验

1.2.1  搭建HTML结构

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

1.2.2 CSS样式

span 直接给宽度和高度，背景颜色，还有蓝色边框

给 div 只需要添加 display: flex 即可

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            
        }
        
        div span {
            /* width: 150px; */
            height: 100px;
            background-color: purple;
            margin-right: 5px;
            flex: 1;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

二、flex布局原理

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

1、当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
2、伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

三、flex布局常见父项属性

3.1 常见父项属性

以下有 6 个属性是对父元素设置的

        flex-direction：设置主轴的方向
        justify-content：设置主轴上的子元素排列方式
        flex-wrap：设置子元素是否换行
        align-content：设置侧轴上的子元素的排列方式（多行）
        align-items：设置侧轴上的子元素排列方式（单行）
        flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

3.2 flex-direction设置主轴的方向

3.2.1 主轴与侧轴

在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

        默认主轴方向就是x轴方向，水平向右

        默认侧轴方向就是y轴方向，水平向下


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            /* 给父级添加flex属性 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 行 row  那么y轴就是侧轴喽 */
            /* 我们的元素是跟着主轴来排列的 */
            /* flex-direction: row; */
            /* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */
            flex-direction: column;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

3.2.2 属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

3.3 justify-content设置主轴上的子元素排列方式

  • justify-content 属性定义了项目在主轴上的对齐方式
  • 注意： 使用这个属性之前一定要确定好主轴是哪个
属性值说明
flex-start默认值从头部开始，如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在主轴居中对齐(如果主轴是 x 轴则水平居中)
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            /* 默认的主轴是 x 轴 row */
            flex-direction: row;
            /* justify-content: 是设置主轴上子元素的排列方式 */
            
            /* justify-content: flex-start; */
            
            /* justify-content: flex-end; */
            
            /* 让我们子元素居中对齐 */
            /* justify-content: center; */
            
            /* 平分剩余空间 */
            /* justify-content: space-around; */
            
            /* 先两边贴边， 在分配剩余的空间 */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 我们现在的主轴是y轴 */
            flex-direction: column;
            /* justify-content: center; */
            justify-content: space-between;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

 

3.4 flex-wrap设置子元素是否换行

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

意思就是如果按照我们设置的盒子大小，一行只能装 3 个盒子，但是我们有 5 个盒子，那么 flex 布局默认会给我们塞上去，自动缩小盒子大小。

属性值说明
nowrap默认值，不换行
wrap换行
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面  */
            /* flex-wrap: nowrap; */
            flex-wrap: wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

3.5 align-items 设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用

属性值说明
flex-start从上到下
flex-end从下到上
center挤在一起居中(垂直居中)
stretch拉伸(默认值)
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 主轴是 y 轴 column */
            flex-direction: column;
            /* 设置主轴上的子元素居中 */
            justify-content: center;
            /* 设置侧轴上的子元素居中 */
            align-items: center;
           
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

3.6 align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

属性值说明
flex-start默认值在侧轴的头部开始排列
flex-end在侧轴的尾部开始排列
center在侧轴中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴先分布在两头，再平分剩余空间
stretch设置子项元素高度平分父元素高度
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认主轴是 x 轴 */
            /* 换行 */
            flex-wrap: wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
            
            /* align-content: flex-start; */
            /* align-content: center; */
            /* align-content: space-between; */
            align-content: space-around;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>

3.7 align-content 和 align-items 区别 

1、align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
2、align-content 适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。
3、总结就是单行找 align-items 多行找 align-content

3.8 flex-flow

flex-flow 属性是flex-direction 和flex-wrap 属性的复合属性

flex-flow: row wrap;

1、flex-direction：设置主轴的方向
2、justify-content：设置主轴上的子元素排列方式
3、flex-wrap：设置子元素是否换行
4、align-content：设置侧轴上的子元素的排列方式（多行）
5、align-items：设置侧轴上的子元素排列方式（单行）
6、flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 600px;
            height: 300px;
            background-color: pink;
            /* flex-direction: column;
            flex-wrap: wrap; */
            /* 把设置主轴方向和是否换行（换列）简写 */
            flex-flow: column wrap;
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

四 、 flex布局子项常见属性

4.1 flex 属性

flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。

.item {
    flex: <number>;	/* default 0*/
}


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        section {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 0 auto;
        }
        
        section div:nth-child(1) {
            width: 100px;
            height: 150px;
            background-color: red;
        }
        
        section div:nth-child(2) {
            flex: 1;
            background-color: green;
        }
        
        section div:nth-child(3) {
            width: 100px;
            height: 150px;
            background-color: blue;
        }
        
        p {
            display: flex;
            width: 60%;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
        }
        
        p span {
            flex: 1;
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
    </section>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>

 

4.2 align-self控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }

        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

4.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面  */
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/705065.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Spring Boot中的STOMP Broker：原理及使用

Spring Boot中的STOMP Broker：原理及使用

Spring Boot中的STOMP Broker&#xff1a;原理及使用 简介 STOMP&#xff08;Simple Text Oriented Messaging Protocol&#xff09;是一种基于文本的协议&#xff0c;用于在Web应用程序之间传递消息。STOMP提供了一种简单的方式来实现WebSocket的双向通信。在Spring Boot中&…
阅读更多...
centos7.X安装docker---个人学习经验

centos7.X安装docker---个人学习经验

工具&#xff1a;VMware Workstation Pro 16.1 系统&#xff1a;CentOS-7-x86_64-DVD-2009 docker&#xff1a;docker-ce-24.0.2-1 说明&#xff1a;这是个人在学习安装docker的时候一些经验&#xff0c;如有不对的还请指教&#xff0c;有些步骤因个人专业能力和时间问题并未…
阅读更多...
Elasticsearch-01篇（单机版简单安装）

Elasticsearch-01篇（单机版简单安装）

Elasticsearch-01篇&#xff08;单机版简单安装&#xff09; 1. 前言1.1 关于 Elastic Stack 2. Elasticsearch 的安装&#xff08;Linux&#xff09;2.1 准备工作2.1.1 下载2.1.2 解压&#xff08;启动不能用root&#xff0c;所以最好此处换个用户&#xff09; 2.2 修改相应的…
阅读更多...
2023年上海市浦东新区网络安全管理员决赛理论题样题

2023年上海市浦东新区网络安全管理员决赛理论题样题

目录 一、判断题 二、单选题 三、多选题 一、判断题 1.等保1.0至等保2.0从信息系统拓展为网络和信息系统。 正确 （1）保护对象改变 等保1.0保护的对象是信息系统，等保2.0增加为网络和信息系统，增加了云计算、大数据、工业控制系统、物联网、移动物联技术、网络基础…
阅读更多...
vite环境变量

vite环境变量

vite环境变量 import.meta.env对象中存储环vite的境变量 环境变量以VITE_ 为前缀 在不同环境下&#xff0c;自动读取不同的文件 一般命名 .env .env.development .env.test .env.production
阅读更多...
四格表fisher检验

四格表fisher检验

一、案例介绍 某医生用新旧两种药物治疗某病患者27人&#xff0c;治疗结果见下表&#xff0c;现在想知道两种两种药物的治疗效果有无差别&#xff1f; 二、问题分析 本案例的分析目的是探究两种治疗效果有无差异&#xff0c;总样本量为27<40&#xff0c;所以考虑使用四格表…
阅读更多...
(use “git restore ＜file＞...“ to discard changes in working directory)

(use “git restore ＜file＞...“ to discard changes in working directory)

阅读更多...
NB-IoT模块（BC系列—BC95）详解

NB-IoT模块（BC系列—BC95）详解

NB-IoT模块&#xff08;BC系列—BC95&#xff09; 0. NB-IoT概述技术原理特点和优势应用领域 1. 常用的NB-IoT模块2. BC系列—BC95技术规格功能特点 3. STM32使用BC95方法BC95的AT指令示例代码 0. NB-IoT概述 NB-IoT&#xff08;Narrowband Internet of Things&#xff09;是一…
阅读更多...
万字长文解析最常见的数据库恢复算法: ARIES

万字长文解析最常见的数据库恢复算法: ARIES

#万字长文解析最常见的数据库恢复算法: ARIES 首发地址&#xff1a; https://mp.weixin.qq.com/s/Kc13g8OHK1h_f7eMlnl4Aw Introduction 上图中为基于 WAL 的数据库的一种可能的架构情况。其中&#xff0c;In-Memory Data 为数据库数据在内存中的组织形式&#xff0c;可以是 B …
阅读更多...
Element-ui 实现多个日期时间发范围查询

Element-ui 实现多个日期时间发范围查询

1、前端 <el-form-item label"生产时间"> <el-date-picker v-model"dateProduct" style"width: 240px" value-format"yyyy-MM-dd" type"daterange" range-separator"-" start-placeholder"生产开始…
阅读更多...
（三）解析函数及其性质

（三）解析函数及其性质

本文主要内容如下&#xff1a; 1. 复变函数的导数与微分1.1. 复变函数可导、可微、解析与奇点的定义1.2. 复变函数可微的充要条件1.3. 关于复变函数可微性判定的其它形式1.4. 相关结论1.5. 解析函数的构造 2. 解析函数与调和函数2.1. 调和函数与共轭调和函数2.2. 解析函数与调和…
阅读更多...
cglib bean复制报错:module java.base does not “opens java.lang“ to unnamed module

cglib bean复制报错:module java.base does not “opens java.lang“ to unnamed module

在使用cglib bean复制功能时&#xff0c;报下面的错误 Caused by: net.sf.cglib.core.CodeGenerationException: java.lang.reflect.InaccessibleObjectException-->Unable to make protected final java.lang.Class java.lang.ClassLoader.defineClass(java.lang.String,b…
阅读更多...
牛客社区项目续

牛客社区项目续

统一日志记录 我们的这个项目在很多地方都需要记录日志&#xff0c;比如帖子模块、评论模块、消息模块等&#xff0c;而以前我们记录日志都是在某一个功能点中使用日志工厂&#xff0c;像下面这样&#xff1a; 项目中很多地方都需要记录日志&#xff0c;像这样一个地方一个地方…
阅读更多...
sumo的几种安装方法

sumo的几种安装方法

sumo的几种安装方法 sumo有很多中安装方法&#xff0c;根据你需要的任务来自己选择&#xff1a; 采用官网的latest version来进行安装 sudo add-apt-repository ppa:sumo/stable sudo apt-get update sudo apt-get install sumo sumo-tools sumo-doc想要安装源码来进行自己b…
阅读更多...
【Java可执行命令】（六）调试工具 jdb：深入解析应用程序调试工具jdb ~

【Java可执行命令】（六）调试工具 jdb：深入解析应用程序调试工具jdb ~

Java可执行命令详解之jdb 1️⃣ 概念2️⃣ 优势和缺点3️⃣ 使用3.1 语法格式3.1.1 参数&#xff1a;-sourcepath < path>3.1.2 指令&#xff1a;run [class [args]]3.1.3 指令&#xff1a;print < expr>3.1.4 指令&#xff1a;stop at< class>:< line>…
阅读更多...
如何利用Idea回滚代码以及Cherry-Pick部分代码

如何利用Idea回滚代码以及Cherry-Pick部分代码

引言 大家在版本迭代过程中&#xff0c;是否遇到过开发好的需求&#xff0c;都已经合并到Master分支等待发布后&#xff0c;临时通知不需要上线了的情况。这个时候一般会要求只上一部分紧急功能或者别的新功能&#xff0c;那么这个时候就需要用到Git的Reset以及Cherry-Pick功能…
阅读更多...
钉钉机器人用bitmap实现签到记录

钉钉机器人用bitmap实现签到记录

现在是周五晚上&#xff0c;下面是一个二进制数字&#xff0c;其中&#xff0c;有16位&#xff0c;最后一位下标是15&#xff0c;今天晚上是14&#xff0c;我签到成功了
阅读更多...
一定要收藏的30套可视化大屏制作模板！升职加薪不再是梦想！

一定要收藏的30套可视化大屏制作模板！升职加薪不再是梦想！

前几天和朋友吃饭聊天&#xff0c;他吐槽说老板让他做可视化大屏&#xff0c;但他不会敲代码根本做不出来&#xff0c;老板动动嘴巴子根本不考虑技术难度只想看到成果&#xff0c;他焦虑得都睡不着觉。我给他分享了一套可视化大屏模板&#xff0c;10分钟就制作完成了老板要求的…
阅读更多...
了解浏览器缓存

了解浏览器缓存

什么是HTTP缓存&#xff0c;如何工作的&#xff1f; 当我们打开一个页面时&#xff0c;会向服务端发起很多次请求&#xff0c;如下图打开百毒首页&#xff0c;发起了HTML、各种图片、JS、CSS等资源共101次请求。这里面很多资源并不会频繁变化&#xff0c;每次打开页面都重新请…
阅读更多...
利用Python构建宁德时代、比亚迪、隆基绿能股票时间序列预测模型

利用Python构建宁德时代、比亚迪、隆基绿能股票时间序列预测模型

存货 import tushare as ts # 导包 import numpy as np import matplotlib.pyplot as plt from scipy.signal import find_peaks from scipy.stats import norm import datetime import pandas as pd import seaborn as sns # pip install seaborn import matplotlib.patches …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023