前端必知：32.多列布局

小姚学前端

已于 2023-07-29 19:18:54 修改

阅读量747

点赞数 7

分类专栏： HTHL+CSS 文章标签：前端

于 2023-07-29 19:07:03 首次发布

本文链接：https://blog.csdn.net/qq_52799985/article/details/131997430

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一.什么是多列布局

css3中最新给出的多列布局方案，他是css块元素布局的一个新的扩展。多列布局是一种网页布局方式，可以将内容分为多个列进行展示。在多列布局中，内容可以按照一定的规则被分割为多个列，并在水平方向上进行排列。

二.多列布局的优势

提高页面的可读性和可视性：多列布局可以使页面呈现出更多的内容，提供更多的信息展示空间，同时减少用户的滚动需求，使页面更易于阅读和浏览。

增加布局的灵活性和适应性：多列布局可以根据不同的屏幕尺寸和设备自动适应，使页面在不同的环境下具有较好的显示效果。它可以根据可用空间自动调整列宽、换行和列数等布局属性。

提供更多的设计可能性：多列布局可以实现丰富多样的设计效果，如报纸、杂志风格的布局、平铺图片和文本的网格布局等，给页面带来更多的创意和吸引力。

三.多列布局的适用场景

新闻和内容聚合网站：多列布局非常适合展示大量的新闻、文章和其他内容。通过将内容分割为多个列，用户可以更轻松地浏览和阅读各个主题的新闻和文章。

博客和文章列表：博客和文章列表需要显示多篇文章的摘要或标题。多列布局可以使得更多的文章能够同时展示在页面上，使得用户可以快速浏览和选择感兴趣的内容。

产品展示和目录：在线商店或产品展示网站通常需要展示大量的产品。通过使用多列布局，可以将产品以网格或列表的形式进行排列，提供更多的产品展示空间，增加产品的曝光度和销售机会。

响应式设计：多列布局可以根据不同屏幕尺寸和设备自动适应。在响应式设计中，可以使用媒体查询和多列布局来创建不同的布局方案，使得页面在不同设备上都能够展现出最佳的显示效果。

图片和照片墙：多列布局可以用于创建图片和照片墙，将大量的图片以网格形式进行展示。这种布局方式可以实现美观的图片展示效果，并提供更好的用户体验。

杂志和报纸式布局：多列布局可以模拟传统杂志和报纸的版面布局，将内容按照专栏、栏目或文章进行分栏排版。这种布局方式适用于展示复杂的图文混排内容和专题报道。

四.多列布局的使用

设置列宽

colum-width:具体值/auto

具体值是直接设置元素的宽度

auto 是根据页面宽度，自定义列宽

设置列数

column-count:num

num 是具体的正整数，范围是[1-10]

行列合写

以上两个属性合写

colums:width count;

设置列的间距

column-gap: normal 或者具体的数值

normal 是默认值，他的大小是 1em

设置两列之间的边框

column-rule 具体设置规则和css中的border一致

设置标题跨列

column-span

只有两个值

1. none表示不跨列

2.all 表示跨所有列

相关代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 强制浏览器在访问该网页是时候使用edge引擎,如果是谷歌浏览器则使用最新版本 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
     <!-- 如果浏览器是双核浏览器 优先使用wedkit 内核渲染 -->
    <meta name="renderer" content="webkit">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css多列布局</title>
   <style>
    *{
        margin: 0;
        padding: 0;
    }
    .cont{
        width: 600px;
        /* height: 400px; */
        background: #ff0;
        border: 1px #f00 solid;
        margin:  40px auto;

        overflow: auto;
        /* 分列的宽度 */
        column-width: 200px;
        /* 分列的列数 */
        column-count: 3;
        /* 合写 */
        columns: 180px 3;
        /* 设置列的间距 */
        column-gap: 10px;

        column-rule: 10px rgb(0, 17, 255) dashed
    }
    .cont h2{
        text-align: center;
        /* 设置标题跨列 */
          column-span: all;
          line-height: 50px;
    }
   </style>
</head>
<body>
    <!-- 
        css3中最新给出的多列布局方案，他是css块元素布局的一个新的扩展
        

        设置列宽
           colum-width:具体值/auto
           具体值是直接设置元素的宽度
           auto 是 根据页面宽度，自定义列宽
        设置列数
           column-count:num
           num 是具体的正整数，范围是[1-10]
        以上两个属性合写
           colums:width count;
        设置列的间距
            column-gap: normal 或者具体的数值
            normal 是默认值，他的大小是 1em

        设置两列之间的边框
            column-rule 具体设置规则和css中的border一致

        设置标题跨列
             column-span
             只有两个值
             1. none表示不跨列
             2.all 表示跨所有列
     -->
    <div class="cont">
        <h2>小姚学前端</h2>
        1.提示操作：
        鼠标手势可以向用户提供操作提示，告诉用户在特定元素上执行鼠标操作时会发生什么。例如，在链接上悬停时，设置鼠标手势为手形，表示链接可以点击。这样用户可以更清楚地了解可交互元素的功能，提高了用户的可用性和易用性。
        
        2.表示链接类型：
        通过修改鼠标手势，可以向用户暗示链接的类型。例如，当鼠标悬停在图片上时，将鼠标手势改为放大镜图标，表示该图片可点击并查看大图。这种方式可以让用户快速识别可交互元素的类型，增强整体界面的可读性和可点击性。
        
        3.强调交互元素：
        将鼠标手势与特定的交互元素配合使用可以增强用户对该元素的注意力。例如，在悬停在按钮上时，将鼠标手势设置为手形，让用户更容易发现该按钮并点击它。这有助于提高用户的操作意愿和效率。
        
        4.创造特殊效果：
        通过自定义鼠标手势样式，可以为网页创造出独特的风格和效果。例如，将鼠标手势修改为自定义的图标、动画或特殊形状，可以使用户的导航体验更加个性化和丰富。
        
        总的来说，鼠标手势在网页设计中起着重要的作用，通过改变光标的样式和形状，可以向用户传达关于交互元素的信息，提高用户体验和界面的可用性，同时也为页面添加了一些创意和特殊效果。
        ————————————————
        版权声明：本文为CSDN博主「小姚学前端」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
        原文链接
        1.提示操作：
        鼠标手势可以向用户提供操作提示，告诉用户在特定元素上执行鼠标操作时会发生什么。例如，在链接上悬停时，设置鼠标手势为手形，表示链接可以点击。这样用户可以更清楚地了解可交互元素的功能，提高了用户的可用性和易用性。
        
        2.表示链接类型：
        通过修改鼠标手势，可以向用户暗示链接的类型。例如，当鼠标悬停在图片上时，将鼠标手势改为放大镜图标，表示该图片可点击并查看大图。这种方式可以让用户快速识别可交互元素的类型，增强整体界面的可读性和可点击性。
        
    </div>
</body>
</html>

运行截图

小姚学前端

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知：32.多列布局

css3中最新给出的多列布局方案，他是css块元素布局的一个新的扩展。多列布局是一种网页布局方式，可以将内容分为多个列进行展示。在多列布局中，内容可以按照一定的规则被分割为多个列，并在水平方向上进行排列。
复制链接

扫一扫