For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /note/css/page-layout.md.

页面布局技巧

1、元素上下垂直水平居中

水平垂直居中.png

相关代码：

HTML
<div class="demo1">
    <div class="cont"></div>
</div>
CSS
.demo1 {
    height: 300px;
    background-color: lightblue;
    /* 布局方式 */
    display: flex;
}

.demo1 > .cont {
    width: 100px;
    height: 100px;
    background-color: lightseagreen;
    /* 主要代码 */
    margin: auto;
}

2、导航条元素居右

导航条居右.png

实现代码：

HTML
<div class="demo2">
    <li>首页</li>
    <li>动态</li>
    <li>话题</li>
    <li>活动</li>
    <!-- 登录&注册居右 -->
    <li>登录 &nbsp; 注册</li>
</div>
CSS
.demo2 {
    list-style: none;
    background-color: lightseagreen;
    color: white;
    padding: 1em 0.5em;
    /* 布局方式 */
    display: flex;
}

.demo2 > li {
    padding: 0 0.5rem;
}

.demo2 > li:last-child {
    /* 主要实现代码 */
    margin-left: auto;
}

3、Loading 渐变动画效果

loading渐变.mp4

实现代码：

HTML
<body>
    <p class="loading">Loading...</p>
</body>
CSS
body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    text-align: center;
    background: #655;
    color: white;
}

.loading {
    margin: auto;
}

.loading:before {
    content: "";
    display: block;
    width: 4em;
    height: 4em;
    margin: 0 auto 1em;
    border: 1.5em solid;
    color: yellowgreen;
    box-sizing: border-box;
    animation:
        1s spin,
        0.7s radius,
        1.1s color,
        1.3s width;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes radius {
    50% {
        border-radius: 50%;
    }
}

@keyframes color {
    33% {
        color: orange;
    }

    66% {
        color: deeppink;
    }
}

@keyframes width {
    50% {
        border-width: 0.4em;
    }
}

4、Grid 栅格布局

gird布局.png

实现代码：

HTML
<div class="wrapper">
    <div style="background: red;">1</div>
    <div style="background: green;">2</div>
    <div style="background: blue;">3</div>
    <div style="background: darkturquoise;">4</div>
    <div style="background: orangered;">5</div>
    <div style="background: orchid;">6</div>
</div>
CSS
.wrapper {
    width: 310px;
    height: 205px;
    border: 2px solid black;
    margin: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    /* grid栅格布局 */
    display: grid;
    /* 列宽：每个值对应一列 */
    grid-template-columns: 100px 100px 100px;
    /* 行高：每个值对应当前行的行高 */
    grid-template-rows: 100px 100px;
    /* 列与列之间的间隔宽度 */
    grid-column-gap: 5px;
    /* 行与行之间的间隔宽度 */
    grid-row-gap: 5px;
}

5、Grid 九宫格布局

gird2布局.png

实现代码：

HTML
<!-- display:grid;栅格布局 -->
<div id="wapBox">
    <img src="http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg" />
    <img src="http://pic27.nipic.com/20130302/8121700_084511016000_2.jpg" />
    <img src="http://pic32.nipic.com/20130817/13059650_160858753102_2.jpg" />
    <img
        src="http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg"
    />
    <img src="http://pic29.nipic.com/20130508/2501606_175156230000_2.jpg" />
    <img src="http://pic1.win4000.com/wallpaper/b/55597435bb036.jpg" />
    <img src="http://img8.zol.com.cn/bbs/upload/23768/23767485.jpg" />
    <img src="http://pic27.nipic.com/20130220/8303153_123543678106_2.jpg" />
    <img src="http://pic22.nipic.com/20120801/2277142_100202030000_2.jpg" />
</div>
CSS
#wapBox {
    border: 5px solid orangered;
    width: 310px;
    /* height: 205px; */
    margin: 100px;
    color: #fff;
    text-align: center;
    line-height: 100px;
    font-size: 40px;
    /* grid栅格布局 */
    display: grid;
    /* 列宽：每个值对应一列 */
    grid-template-columns: 100px 100px 100px;
    /* 行高：每个值对应当前行的行高 */
    grid-template-rows: 100px 100px;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
}

#wapBox img {
    width: 100px;
    height: 100px;
    display: block;
}