CSS学习笔记（二十）CSS object-fit 属性,按钮，分页，多列

最新推荐文章于 2024-04-18 10:40:40 发布

〔晴【天】º〕

最新推荐文章于 2024-04-18 10:40:40 发布

阅读量464

点赞数 1

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/117218070

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS object-fit 属性

CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。

CSS object-fit 属性

CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。

这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。
一个300x300 像素的图片，如果设置成了 200x300 像素，图片就会被压缩。

图像被压缩以适合 200x300 像素的容器，并且原始宽高比被破坏了。
如果我们使用 object-fit: cover;，它会剪切图像的侧面，保留长宽比，并填充空间
实例

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

CSS object-fit 属性的所有值

object-fit 属性可接受如下值：

fill - 默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain - 缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover - 调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none - 不对替换的内容调整大小。
scale-down - 调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

CSS 按钮

基本按钮样式

实例

.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

可悬停按钮

当鼠标移动到按钮上方时，使用 :hover 选择器可更改按钮的样式。

提示：请使用 transition-duration 属性来确定“悬停”效果的速度：

实例

.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}
...

禁用的按钮

请使用 opacity 属性为按钮添加透明度（创建“禁用”外观）。

提示：您还可以添加带有 “not-allowed” 值的 cursor 属性，当您将鼠标悬停在按钮上时，该属性会显示 “no parking sign”（禁停标志）：

实例

.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

按钮分组

删除外边距并向每个按钮添加 float:left，来创建按钮组：

实例

.button {
  float: left;
}

垂直按钮组

使用 display:block 取代 float:left 将按钮上下分组，而不是并排：

实例

.button {
  display: block;
}

CSS 分页

简单的分页

如果网站上有很多页面，那么您可能希望在每张页面上添加某种分页功能：
实例

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
</style>
</head>
<body>

<h1>简单分页</h1>

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

</body>
</html>

活动的可悬停分页

用 .active 类突出显示当前页面，并在鼠标移到它们上方时使用 :hover 选择器更改每个页面链接的颜色：

实例

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
  display: inline-block;
}

.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<h1>活动的可悬停分页</h1>

<p>请把鼠标移动到数字上：</p>

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a class="active" href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">»</a>
</div>

</body>
</html>

圆角的活动可悬停分页

如果您需要圆角的 “active” 和 “hover” 按钮，请添加 border-radius 属性：

实例

.pagination a {
  border-radius: 5px;
}

.pagination a.active {
  border-radius: 5px;
}

链接之间的空间

提示：如果不想组合页面链接，请添加 margin 属性：
实例

.pagination a {
  margin: 0 4px; /* 上下外边距为 0，可灵活修改 */
}

分页尺寸

请使用 font-size 属性更改分页的大小：

实例

.pagination a {
  font-size: 22px;
}

居中的分页

如需居中分页，请使用设置了 text-align:center 的容器元素（如

）包围它：

实例

.center {
  text-align: center;
}

面包屑

在这里插入图片描述
分页的另一种形式是所谓的“面包屑”（breadcrumbs）：

实例

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";
}

CSS 多列

CSS 多列布局

CSS 多列布局允许我们轻松定义多列文本 - 就像报纸那样：

CSS 多列属性

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS 创建多列

column-count 属性规定元素应被划分的列数。

下面的例子将 <div> 元素中的文本分为 3 列：

实例

div {
  column-count: 3;
}

CSS 指定列之间的间隙

column-gap 属性规定列之间的间隔。

下面的例子指定列之间的间距为 40 像素：

实例

div {
  column-gap: 40px;
}

CSS 列规则

column-rule-style 属性规定列之间的规则样式：

实例

div {
  column-rule-style: solid;
}

column-rule-width 属性规定列之间的规则宽度：

实例

div {
  column-rule-width: 1px;
}

column-rule-color 属性规定列之间的规则的颜色：

实例

div {
  column-rule-color: lightblue;
}

column-rule-color 属性规定列之间的规则的颜色：

实例

div {
  column-rule-color: lightblue;
}

column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。

下例设置了列之间的规则的宽度、样式和颜色：

实例

div {
  column-rule: 1px solid lightblue;
}

指定元素应该横跨多少列

column-span 属性规定元素应跨越多少列。

下例规定了<h2> 元素应跨所有列：

实例

h2 {
  column-span: all;
}

指定列宽度

column-width 属性为列指定建议的最佳宽度。

下例规定了列的建议最佳宽度应为 100px：

实例

div {
  column-width: 100px;
}

CSS 多列属性

在这里插入图片描述

〔晴【天】º〕

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（二十）CSS object-fit 属性,按钮，分页，多列

CSS object-fit 属性CSS object-fit 属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。CSS object-fit 属性CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。一个300x300 像素的图片，如果设置成了 200x300 像素，图片就会被压缩。
复制链接

扫一扫