CSS3 分页、框大小、弹性盒子

news2024/12/26 3:35:35

一、CSS3分页：

网站有很多个页面，需要使用分页来为每个页面做导航。示例：

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

</style>

点击及鼠标悬停分页样式：

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

圆角分页样式：

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    border-radius: 5px;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

    border-radius: 5px;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

带鼠标悬停过渡效果的分页样式：

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

带边框的分页样式：

<style>

ul.pagination {

    display: inline-block;

    padding: 0;

    margin: 0;

}

ul.pagination li {display: inline;}

ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

    transition: background-color .3s;

    border: 1px solid #ddd;

}

ul.pagination li a.active {

    background-color: #4CAF50;

    color: white;

    border: 1px solid #4CAF50;

}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}

</style>

面包屑导航：

<style>

ul.breadcrumb {

    padding: 8px 16px;

    list-style: none;

    background-color: #eee;

}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {

    padding: 8px;

    color: black;

    content: "/\00a0";

}

ul.breadcrumb li a {color: green;}

</style>

二、CSS3框大小：

CSS3 box-sizing属性可以设置width和height属性中包含padding（内边距）和border（边框）。示例：

<style>

.div1 {

    width: 300px;

    height: 100px;

    border: 1px solid blue;

    box-sizing: border-box;

}

.div2 {

    width: 300px;

    height: 100px;    

    padding: 50px;

    border: 1px solid red;

    box-sizing: border-box;

}

</style>

三、CSS3弹性盒子：

       弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒子（flex box）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素就拥有恰当的行为的布局方式。引入弹性盒子布局模型的目的是提供一种更加有效的方来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器（flex container）和弹性子元素（flex item）组成。弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包含一个或多个弹性子元素。示例：

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    height: 100px;

    margin: 10px;

}

</style>

flex-direction属性指定了弹性子元素在父容器中的位置。语法：

flex-direction: row | row-reverse | column | column-reverse

flex-direction的值有：row：横向从左到右排列（左对齐），默认的排列方式；row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面；column：纵向排列；column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。示例：

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row-reverse;

    flex-direction: row-reverse;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    height: 100px;

    margin: 10px;

}

</style>

     内容对齐justify-content属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐。justify-content的语法：justify-content: flex-start | flex-end | center | space-between | space-around。各个值解析：flex-start（弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放）；flex-end（弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放）；center（弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）；space-between（弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等）；space-around（弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px））。

        align-items属性设置或检索弹性盒子子元素在侧轴（纵轴）方向上的对齐方式。align-items语法：align-items: flex-start | flex-end | center | baseline | stretch。各个值解析:flex-start（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界）；flex-end（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界）；center（弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度））；baseline（如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐）；stretch（如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制）。示例：

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: baseline;

    align-items: baseline;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    margin: 10px;

}

</style>

flex-wrap属性用于指定弹性盒子的子元素换行方式。语法：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;各个值解析:nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器；wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行；wrap-reverse -反转 wrap 排列。示例：

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap-reverse;

    flex-wrap: wrap-reverse;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}

.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    height: 100px;

    margin: 10px;

}

</style>

align-content属性用于修改flex-wrap属性的行为，设置各个行的对齐。语法：align-content: flex-start | flex-end | center | space-between | space-around | stretch。各个值解析:stretch - 默认。各行将会伸展以占用剩余的空间；flex-start - 各行向弹性盒容器的起始位置堆叠；flex-end - 各行向弹性盒容器的结束位置堆叠；center -各行向弹性盒容器的中间位置堆叠；space-between -各行在弹性盒容器中平均分布；space-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。示例：

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-align-content: center;

    align-content: center;

    width: 300px;

    height: 300px;

    background-color: lightgrey;

}

.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    height: 100px;

    margin: 10px;

}

</style>

弹性子元素属性：order；margin；align-self；flex。

align-self属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。语法：align-self: auto | flex-start | flex-end | center | baseline | stretch各个值解析:auto（如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'）；flex-start（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界）；flex-end（弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界）；center（弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度））；baseline（如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐）；stretch（如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制）。示例：

<style>

.flex-container {

    display: -webkit-flex;

    display: flex;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

.flex-item {

    background-color: cornflowerblue;

    width: 60px;

    min-height: 100px;

    margin: 10px;

}

.item1 {

    -webkit-align-self: flex-start;

    align-self: flex-start;

}

.item2 {

    -webkit-align-self: flex-end;

    align-self: flex-end;

}

.item3 {

    -webkit-align-self: center;

    align-self: center;

}

.item4 {

    -webkit-align-self: baseline;

    align-self: baseline;

}

.item5 {

    -webkit-align-self: stretch;

    align-self: stretch;

}

</style>

flex属性用于指定弹性子元素如何分配空间。语法：flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]。各个值解析:auto: 计算值为 1 1 auto；initial: 计算值为 0 1 auto；none：计算值为 0 0 auto；inherit：从父元素继承；[ flex-grow ]：定义弹性盒子元素的扩展比率；[ flex-shrink ]：定义弹性盒子元素的收缩比率；[ flex-basis ]：定义弹性盒子元素的默认基准值

CSS3弹性盒子属性：

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

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

相关文章

网络安全-黑客技术-小白学习

网络安全-黑客技术-小白学习

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…
阅读更多...
虚幻5 删除C盘缓存及修改缓存路径

虚幻5 删除C盘缓存及修改缓存路径

一.修改C盘缓存 C盘缓存路径为&#xff1a; C:\Users\xx(这里是你的用户名)\AppData\Local\UnrealEngine\Common\DerivedDataCache 注意&#xff0c;如果没有AppData文件夹&#xff0c;请依次点击查看-勾选显示隐藏的项目&#xff0c;即可 可删除里面的所有文件即可 二.修改…
阅读更多...
华为eNSP实验-QinQ基本实验

华为eNSP实验-QinQ基本实验

1.拓扑图如下 PC1的设置如下&#xff1a; 在未配置VLAN之前&#xff0c;PC1可以ping通PC3&#xff0c;PC2可以ping通PC4&#xff08;因为同一网段&#xff09; 2.SW1和SW4配置VLAN <Huawei>system-view [Huawei]undo info-center enable //关闭提示信息 [Huawei]sysn…
阅读更多...
在Node.js中，什么是事件发射器（EventEmitter）？

在Node.js中，什么是事件发射器（EventEmitter）？

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…
阅读更多...
HALSTM32通用定时器+EXTI实现单击/双击/长按功能

HALSTM32通用定时器+EXTI实现单击/双击/长按功能

HALSTM32通用定时器EXTI实现单击/双击/长按功能 ✨在使用USB功率计的时候&#xff0c;发现上面的一个按键实现多画面功能切换&#xff0c;于是探索了一下是如何实现的&#xff0c;将其实现的基本思路以及综合网上收集的相关实现方法&#xff0c;粗陋的整理了一下&#xff0c;将…
阅读更多...
MIT6.5830 Lab1-GoDB实验记录（六）

MIT6.5830 Lab1-GoDB实验记录（六）

MIT6.5830 Lab1-GoDB实验记录&#xff08;六&#xff09; – WhiteNights Site 标签&#xff1a;Golang 赛博坐牢之旅第一章第六节&#xff1a;接着上一节&#xff0c;补全heap_page剩下的函数。 开始坐牢 删除tuple 这个看起来…难度还没那么高&#xff0c;写一下试试吧。那…
阅读更多...
一个易用的消息订阅发布系统-Pubsub.js

一个易用的消息订阅发布系统-Pubsub.js

本文作者系360奇舞团前端开发工程师 简介 随着软件架构越来越复杂&#xff0c;如何有效地解决各个模块之间的通信问题变得尤为重要。一种常见的解决方案就是采用消息订阅发布机制。在这种模式下&#xff0c;每个模块只需要关注自己要发送或接收的消息&#xff0c;而不必关心其他…
阅读更多...
Clickhouse表引擎

Clickhouse表引擎

前言&#xff1a; 有关Clickhouse的前置知识详见&#xff1a; 1.ClickHouse的安装启动_clickhouse后台启动_THE WHY的博客-CSDN博客 2.ClickHouse目录结构_clickhouse 目录结构-CSDN博客 Cickhouse创建表时必须指定表引擎 表引擎&#xff08;即表的类型&#xff09;决定了&…
阅读更多...
SpringBoot 使用EasyExcel 导出Excel报表（单元格合并）

SpringBoot 使用EasyExcel 导出Excel报表（单元格合并）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、导入依赖二、代码1. 导出简单的Excel2. 代码控制导出报表的格式 总结 前言 SpringBoot 使用Alibaba提供的EasyExcel导出Excel报表。 本文中涉及的业务逻辑…
阅读更多...
C/C++内存管理——“C++”

C/C++内存管理——“C++”

各位CSDN的uu们你们好呀&#xff0c;好久没有更新小雅兰的C专栏啦&#xff0c;下面&#xff0c;小雅兰继续开始更新C专栏的内容&#xff01;&#xff01;&#xff01;今天&#xff0c;小雅兰的内容是C和C的内存管理&#xff0c;下面&#xff0c;让我们进入C的世界吧&#xff01…
阅读更多...
【Nginx40】Nginx学习：动静分离与日志分割

【Nginx40】Nginx学习：动静分离与日志分割

Nginx学习&#xff1a;动静分离与日志分割 放轻松放轻松&#xff0c;最后两篇文章学习的内容是比较轻松的。首先&#xff0c;我们来看看 Nginx 动静分离的概念&#xff0c;然后再看看怎么为 Nginx 做日志分割。内容都很简单&#xff0c;完全不需要有任何的压力。 动静分离 动静…
阅读更多...
FPGA高端项目：图像缩放+GTX+UDP架构，高速接口以太网视频传输，提供2套工程源码加QT上位机源码和技术支持

FPGA高端项目：图像缩放+GTX+UDP架构，高速接口以太网视频传输，提供2套工程源码加QT上位机源码和技术支持

目录 1、前言免责声明本项目特点 2、相关方案推荐我这里已有的 GT 高速接口解决方案我这里已有的以太网方案我这里已有的图像处理方案 3、设计思路框架设计框图视频源选择IT6802解码芯片配置及采集动态彩条跨时钟FIFO图像缩放模块详解设计框图代码框图2种插值算法的整合与选择 …
阅读更多...
SSL证书申请安全审核失败?

SSL证书申请安全审核失败?

随着HTTPS普及&#xff0c;申请安装使用SSL证书成为了我们的必备项。但这个SSL证书申请过程中&#xff0c;遇到问题也是不少。今天我们来浅了解一下SSL证书为什么会出现安全审核失败&#xff1f; SSL证书申请会出现安全审核失败的情况可能是以下原因&#xff1a; 域名验证不通…
阅读更多...
docker-compose安装es以及ik分词同义词插件

docker-compose安装es以及ik分词同义词插件

目录 1 前言 2 集成利器Docker 2.1 Docker环境安装 2.1.1 环境检查 2.1.2 在线安装 2.1.3 离线安装 2.2 Docker-Compose的安装 2.2.1 概念简介 2.2.2 安装步骤 2.2.2.1 二进制文件安装 2.2.2.2 离线安装 2.2.2.3 yum安装 3 一键安装ES及Kibana 3.1 yml文件的编写…
阅读更多...
多组学整合，快速定位关键代谢通路，解析分子机制

多组学整合，快速定位关键代谢通路，解析分子机制

生物学是一种复杂的学科&#xff0c;往往单一组学无法探究想要了解的生物学问题&#xff0c;这时就要运用到多组学联合分析。近年来&#xff0c;多组学研究的不断发展和持续火热&#xff0c;越来越多的研究者开始将微生物组学和代谢组学联合起来。16s全长扩增子测序可提供细菌构…
阅读更多...
JAVA集合学习和源码分析

JAVA集合学习和源码分析

一、结构 List和Set继承了Collection接口&#xff0c;Collection继承了Iterable Object类是所有类的根类&#xff0c;包括集合类&#xff0c;集合类中的元素通常是对象&#xff0c;继承了Object类中的一些基本方法&#xff0c;例如toString()、equals()、hashCode()。 Collect…
阅读更多...
Mysql数据备份 —Navicat

Mysql数据备份 —Navicat

一 Navicat 对于表的备份 根据自己的需求来选择 可以直接备份数据表 操作简单明了 二 Navicat 对于库的备份 对于数据库 直接通过转储SQL文件 保存结构和数据 需要新创建数据库 字符集和编码格式要对应 否则容易乱码 运行刚才生成的文件即可
阅读更多...
【Git】GUI图形化界面的使用SSH协议IDEA集成Git

【Git】GUI图形化界面的使用SSH协议IDEA集成Git

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Git的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一. GUI图形化界面的使用 1.使用Gui​ 2.常…
阅读更多...
Linux - 基础IO（Linux 当中的文件，文件系统调用接口，文件描述符）- 上篇

Linux - 基础IO（Linux 当中的文件，文件系统调用接口，文件描述符）- 上篇

前言 首先&#xff0c;关于文件我们最先要理解的是&#xff0c;文件不仅仅存储的是数据&#xff0c;一个文件包括 内容 数据。内容好理解&#xff0c;就是我们先要这文件存储哪一些数据&#xff0c;这些数据就是文件的内容。 但是&#xff0c;在计算机当中&#xff0c;有两种…
阅读更多...
【Maven教程】（十）：使用 Hudson 进行持续集成—— 从Hudson的安装到任务创建 ~

【Maven教程】（十）：使用 Hudson 进行持续集成—— 从Hudson的安装到任务创建 ~

Maven 使用 Hudson 进行持续集成 1️⃣ 持续集成的作用、过程和优势2️⃣ Hudson 简介与安装3️⃣ 准备 Subversion 仓库4️⃣ Hudson 的基本系统设置5️⃣ 创建 Hudson 任务5.1 Hudson 任务的基本配置5.2 Hudson 任务的源码仓库配置5.3 Hudson 任务的构建触发配置5.4 Hudson …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023