用CSS-DIV-UL-LI布局列表页实例

·  阅读 297

摘要:最简单的列表页是表格,其实使用DIV+CSS布局更简单,也更灵活,本文给出一个布局的小例子,读者可以根据需要在实际项目中调整。

1. 先来看下效果

  • 分行展示
  • 列表页内容需要居中,两侧需要留白。
  • 隔行需要有线条隔开,视觉更容易对齐每行的标题与操作。
  • 标题靠左,操作靠右

列表页样式.png

2. 要点CSS

2.1 分行使用HTML列表标签ul-li实现

<ul>
    <li>
     标题标题标题标题标题标题标题标题标题标题1
    </li>
    <li>
     标题标题标题标题标题标题标题标题标题标题1
    </li>
</ul>
复制代码

2.2 列表页内容需要居中,两侧需要留白。

使用Margin左右留出百分之十的空白

 margin: 0 10%;
复制代码

2.3 隔行需要有线条隔开,视觉更容易对齐每行的标题与操作

使用边框渲染每个列表行的分割线

 border-bottom: 1px solid #eee;
复制代码

2.4 标题靠左,操作靠右

使用DIV的float让操作区漂移到右边

float: right;
复制代码

2.5 使用Bootstrap调整列表的上下间距

用到的bootstrapCSS解释,py-3 ,p代表padding内边距,y取义为坐标xy轴代表垂直的意思。py-3就是:垂直方向内边距3等大小,py-4就是4等,依次类推。

bootstrap的作用是把常用的CSS根据使用场景的效果起名(比如大边距,小边距,警示颜色等等),你只关心想要什么效果,而不用去考虑不同配色的语义与字号边距大小的细节。

如下是py-3的bootstrap源码,自己写也是一样的(个人非常喜欢bootstrap的命名,非常简洁,但背后都有含义)。

.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
复制代码

3.全部源码

可以建立一个html文件,拷贝进去,使用浏览器打开就可以看到效果。

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <style>

        #mainDiv {
            /*左右留出百分之十的空白*/
            margin: 0 10%;
            /*内边距根据自己喜好设置,如果整体有边框,比较有用*/
            padding: 2% 2% 2% 2%;
            /*子Div使用Float后会撑开父Div*/
            overflow: hidden;
        }

        /*渲染每个列表行的分割线,底部画条线,不要样式*/
        .repo-list-item {
            border-bottom: 1px solid #eee;
            list-style: none;
            position: relative;
        }

        /*操作链接区域,漂浮到右边,字体用灰色弱化视觉效果,字号小一些,弱化自己,突出标题*/
        .entry-header {
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
            color: #a8a8a7;
            font-size: 0.8em;
            font-style: italic;
            float: right;
        }

        /*操作链接字体等同设置,覆盖链接设置,强制弱化*/
        .entry-header a {
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
            color: #6a737d;
            margin: 0 2px;
        }

    </style>
</head>
<body>

<main id="mainDiv">
    <div id="articleVue">
        <ul style="padding: 0px">
            <li class="repo-list-item py-3">
                <div class="entry-header">
                    <a href='#'>编辑</a>
                    <a href='#'>组织</a>
                    (2021年11月08日)
                </div>
                <a href='#'>标题标题标题标题标题标题标题标题标题标题1</a>
            </li>
            <li class="repo-list-item py-3">
                <div class="entry-header">
                    <a href='#'>编辑</a>
                    <a href='#'>组织</a>
                    (2021年11月08日)
                </div>
                <a href='#'>标题标题标题标题标题标题标题标题标题标题1</a>
            </li>
            <li class="repo-list-item py-3">
                <div class="entry-header">
                    <a href='#'>编辑</a>
                    <a href='#'>组织</a>
                    (2021年11月08日)
                </div>
                <a href='#'>标题标题标题标题标题标题标题标题标题标题1</a>
            </li>
        </ul>
    </div>
</main>
</body>
</html>

复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改