CSS分页、多列和用户界面

最新推荐文章于 2022-10-19 17:11:52 发布

_南明_离火_

最新推荐文章于 2022-10-19 17:11:52 发布

阅读量317

点赞数 1

分类专栏： CSS学习笔记文章标签： css ui 前端

本文链接：https://blog.csdn.net/weixin_67340472/article/details/125570677

版权

CSS学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS样式无法显示请访问链接：

链接入口

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

效果如下：

« 1 2 3 4 5 6 »

同时可以使用:hover伪类元素为元素添加悬停效果。

        a:hover{
            background-color: gray;
            color:chartreuse;
        }

        a:active,a.active{
            background-color: black;
            color:aqua;
        }

也可以这样使用选择器:

.pagination a:hover:not(.active) {background-color: gray;color:chartreuse}

这样就选择了类pagination的子元素中不是处于类active下的a标签并为其设置悬停样式。

圆角

使用属性border-radius设置即可：

过渡

  a {
  transition: 0.4s;
}

边框

如果需要为元素设置边框，添加相应的边框属性即可：

a{
    border: 1px outset lightblue;
}

圆角边框

可以只为第一个和最后一个元素的四个角设置边框，也可以都设置边框就像上边的例子一样。

ps：可以使用:first-child 和 :last-child选择第一个和最后一元素

留白

可以通过margin属性为a元素之间留出空隙，通过设置上下外边距为0，左右外边距自定义，灵活改变。

分页尺寸

通过设置font-size的属性值，可以改变a标签的大小。也可以设置内边距。

分页居中

在其容器的容器中使用text-align:center;属性可以设置居中。

可以根据以上设置另一种导航栏的方式。

CSS多列

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

`column-count`

column-count属性规定元素被划分的列数，可以用来创建多列。

看下面的例子就将div中的文本分为了三列：

摸鱼儿
宋⋅ 辛弃疾
更能消、几番风雨，匆匆春又归去。惜春长怕花开早，何况落红无数。春且住，见说道、天涯芳草无归路。怨春不语。算只有殷勤、画檐蛛网，尽日惹飞絮。长门事，准拟佳期又误。蛾眉曾有人妬，千金纵买相如赋，脉脉此情谁诉？君莫舞，君不见、玉环飞燕皆尘土！闲愁最苦，休去倚危栏，斜阳正在，烟柳断肠处。

值	描述	测试
number	元素内容将被划分的最佳列数。	测试
auto	由其他属性决定列数，比如 “column-width”。	测试

`column-gap`

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

eg：

div{
    column-gap:100px;
}

值	描述	测试
length	把列间的间隔设置为指定的长度。	测试
normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。	测试

`column-rule-style`

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

div{
    column-rule-style:solid;
}

值	描述	测试
none	定义没有规则。	测试
hidden	定义隐藏规则。	测试
dotted	定义点状规则。	测试
dashed	定义虚线规则。	测试
solid	定义实线规则。	测试
double	定义双线规则。	测试
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。	测试
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。	测试
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。	测试
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。	测试

`column-rule-width`

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

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

值	描述	测试
thin	定义纤细规则。	测试
medium	定义中等规则。	测试
thick	定义宽厚规则。	测试
length	规定规则的宽度。	测试

`column-rule-color`

color-rule-color属性规定列之间规定的颜色。

div{
    column-rule-color:cyan;
}

`column-rule`

column-rule属性是对以上几个属性的简写。

和边框简写属性border一样：

div{
    column-rule:2px inset cyan;
}

`column-span`

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

div.h{
    column-span:all;
}

摸鱼儿

宋⋅ 辛弃疾

更能消、几番风雨，匆匆春又归去。惜春长怕花开早，何况落红无数。春且住，见说道、天涯芳草无归路。怨春不语。算只有殷勤、画檐蛛网，尽日惹飞絮。长门事，准拟佳期又误。蛾眉曾有人妬，千金纵买相如赋，脉脉此情谁诉？君莫舞，君不见、玉环飞燕皆尘土！闲愁最苦，休去倚危栏，斜阳正在，烟柳断肠处。

值	描述	测试
1	元素应横跨一列。	测试
all	元素应横跨所有列。	测试

`column-width`

column-width属性指定列宽度。

div{
    column-count:auto;
    column-width:100px;
}

摸鱼儿

宋⋅ 辛弃疾

值	描述	测试
auto	由浏览器决定列宽。	测试
length	规定列的宽度。	测试

`column-fill`

column-fill属性规定如何对属性进行填充：

div.a1{
    column-fill:auto;
}
div.a2{
    column-fill:balance;
}

值	描述
balance	对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto	按顺序对列进行填充，列长度会各有不同。

`columns`

columns属性是对column-width和属性column-count的简写。

先是count后是width，可以只是单独的一个值。

div.a1{
    columns:2;
}
div.a2{
    columns:2em;
}
div.a3{
    columns:3 100px;
}
div.a4{
    columns:auto 15em;
}

a1:

摸鱼儿

宋⋅ 辛弃疾

a2:

摸鱼儿

宋⋅ 辛弃疾

a3:

摸鱼儿

宋⋅ 辛弃疾

a4:

摸鱼儿

宋⋅ 辛弃疾

用户界面

resize
outline-offset

`resize`

resize属性规定元素是否应该（如何）被用户调整大小。

下面的示例允许用户调整宽度：

div {
  resize: horizontal;
  overflow: auto;
}

摸鱼儿

宋⋅ 辛弃疾

下面的示例允许用户调整高度：

div {
  resize: vertical;
  overflow: auto;
}

摸鱼儿

宋⋅ 辛弃疾

下面的示例允许用户调整高度和宽度：

div {
  resize: both;
  overflow: auto;
}

摸鱼儿

宋⋅ 辛弃疾

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

禁用 `<textarea>`可调大小

textarea{
    resize:none;
}

<textarea>标签默认可以调整大小，可以使用上面的方法禁用这种默认设置。

默认可调大小禁用可调大小

`outline-offset`

outline-offset属性设置轮廓与元素边缘边框之间的空间。

**注意：**轮廓与边框不同！与边框不同，轮廓线是在元素边框之外绘制的，并且可能与其他内容重叠。同时，轮廓也不是元素尺寸的一部分：元素的总宽度和高度不受轮廓线宽度的影响。

div.a1{
    margin:20px;
    border:1px outset cyan;
    outline:2px inset chartreuse;
}
div.a2{
    margin:20px;
    border:10px outset cyan;
    outline:10px inset chartreuse;
    outline-offset:15px;
}