使用CSS实现一列布局

来源：互联网发布：2333软件登录不了编辑：程序博客网时间：2024/05/29 09:05

1、一列自适应布局

所谓自适应，就是布局大小随着窗口大小改变。自适应一列布局很容易实现。

HTML代码：

<!--一列布局--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>一列布局</title>    <link rel="stylesheet" type="text/css" href="main.css"></head><body>    <div class="div1">        hello world!    </div></body></html>

main.css

*{    margin: 0;    padding: 0;}/*清除格式*/.div1{    width: 80%;/*设置宽度为百分比形式即可实现自适应*/    height: 500px;    background: #837979;    margin: 50px auto;/*一列布局块元素水平居中,宽度小于浏览器窗口宽度时需要设置*/    text-align: center;/*块内文本水平居中*/}.div1 p{    padding: 5px 0;    font-size: 24px;    color: #357140;    /*line-height: 500px;/*当只有单行文本时，子元素line-height等于父元素height，设置垂直居中，若多行文本,需另外考虑*/}

结果如下，改变浏览器窗口大小，布局大小随之改变：
这里写图片描述

2、一列固定布局

在一列自适应布局的基础上，实现一列固定布局。只需将main.css中第6行宽度改为数值表达即可，如：

width: 800px;

结果如下，改变浏览器窗口大小，布局大小不变。
这里写图片描述

阅读全文

0 0