小白入门 — 关于HTML的布局

最新推荐文章于 2022-01-12 22:14:11 发布

Here_ss

最新推荐文章于 2022-01-12 22:14:11 发布

阅读量215

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Here_ss/article/details/109588644

版权

每天优于别人并不高贵，优于自己才是高贵

文章目录

前言

学不积硅步，无以至千里，不积小流，无以成江海 ~

接下来我们来了解一下什么是HTML中的布局，小白入门！

首先什么是布局

所谓的布局, 就是 HTML 页面的结构。实现布局是要通过 HTML 元素和 CSS 样式结合。

布局特别想盖楼的时候的设计图纸。

布局的分类

目前比较流行的布局:

居中布局: 水平方向居中布局、垂直方向居中布局以及水平和垂直都居中的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居中布局</title>
    <style>
        .q {
            width: 1662px;
            height: 300px;
            background-color: blueviolet;
            vertical-align: middle;
            display: table-cell;
        }
        .q1 {
            width: 300px;
            height: 300px;
            background-color: burlywood;
            display: table;
            margin: 0 auto;
        }
        .a {
            width: 1000px;
            height: 600px;
            background-color: chartreuse;
            position: relative;
        }
        .a1 {
            width: 200px;
            height: 200px;
            background-color: coral;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="q">
        <div class="q1"></div>
    </div>
    <div class="a">
        <div class="a1"></div>
    </div>
</body>
</html>

- 多列布局: 两列布局和三列布局、等分布局和等高布局(圣杯布局和双飞翼布局)

全屏布局

从技术角度分化的话:

CSS3 新增的弹性(flex)盒子模型
CSS3 新增的网格(grid)布局

根据场景不同, 也可以这样划分:

响应式布局: 一个 HTML 既可以在 PC 电脑端浏览器打开, 也可以在移动端浏览器打开
移动端布局: 在手机端或平板电脑端浏览器打开

之前比较流行的布局:

圣杯布局(三行三列布局)
双飞翼布局(优化版的圣杯布局, 淘宝前端团队推出的)
瀑布流布局

两列布局

所谓的两列布局, 并不是简单将两个元素水平排列, 而是一列是定宽的, 另一列是自适应的。

其中一列是定宽: 将该元素的宽度设置为固定的宽度
其中一列是自适应: 除了定宽之外所有的宽度都为第二列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两列布局</title>
    <style>
        .q {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
        }
        .q1 {
            width: 200px;
            height: 300px;
            background-color: indianred;
            float: left;
        }
        .q2 {
            height: 300px;
            background-color: indigo;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <div class="q">
        <div class="q1"></div>
        <div class="q2"></div>
    </div>
</body>
</html>

三列布局

所谓的三列布局, 其中两列是定宽, 另一列是自适应。划分成以下两种情况:

定宽+定宽+自适应: 两个定宽的列是相邻的
定宽+自适应+定宽: 两个定宽的列不是相邻的(自适应这一列在中间)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三列布局</title>
    <style>
        .q {
            width: 800px;
            height: 300px;
            border: 1px solid #000;
            display: table;
            table-layout: fixed;
        }
        .q1,
        .q2,
        .q3 {
            display: table-cell;
        }
        .q2,
        .q3 {
            width: 200px;
            height: 300px;
        }
        .q2 {
            background-color: indianred;
        }
        .q3 {
            background-color: lightgrey;
        }
        .q1 {
            height: 300px;
            background-color: indigo;
        }
    </style>
</head>
<body>
    <div class="q">
        <div class="q1"></div>
        <div class="q2"></div>
        <div class="q3"></div>
    </div>
</body>
</html>

总结

HTML大大小小的布局有很多，比如每天用的网页，看的新闻都是一种布局，学好布局对以后的开发有很大的帮助~

Here_ss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白入门 — 关于HTML的布局

每天优于别人并不高贵，优于自己才是高贵文章目录前言首先什么是布局布局的分类两列布局三列布局总结前言学不积硅步，无以至千里，不积小流，无以成江海 ~接下来我们来了解一下什么是HTML中的布局，小白入门！首先什么是布局所谓的布局, 就是 HTML 页面的结构。实现布局是要通过 HTML 元素和 CSS 样式结合。布局特别想盖楼的时候的设计图纸。布局的分类目前比较流行的布局:居中布局: 水平方向居中布局、垂直方向居中布局以及水平和垂直都居中的布局<!DOCTYPE html.
复制链接

扫一扫