DIV-CSS布局

DIV-CSS布局
- DIV-CSS布局

DIV-CSS布局

在这里插入图片描述

DOCTYPE html>
<html>

<head>
    <title>Documenttitle>
    <style type="text/css">
        * {
            /* 外边距4个方向全为0 */
            margin: 0px;
            /* 内边距4个方向全为0*/
            padding: 0px;
        }
        
        a {
            /* 链接默认没有下划线*/
            text-decoration: none;
        }
        
        ul {
            /* 列表默认没有项目符合*/
            list-style: none;
        }
        
        header,
        section,
        footer {
            /* 头 中 尾 默认CSS样式*/
            /* 宽度1000px*/
            width: 1000px;
            /* 居中*/
            margin: 0 auto;
            /* 背景色 粉红色*/
            background-color: pink;
        }
        
        header,
        footer {
            /* 头 尾 给一个80px高度*/
            height: 80px;
        }
        
        section {
            /* 中 上下给20px页边距 矩阵 */
            margin: 20px auto;
            /* 清除浮动，露出底部区域*/
            overflow: hidden;
        }
        
        section>div {
            /* 因为section中左、右两个div是横向排列，所以给一个左浮动*/
            float: left;
            /* 给一个浅灰色背景色*/
            background-color: #ccc;
            /* 预先给一个高度，一会儿还要删掉*/
            /* height: 300px; */
        }
        
        .left {
            /* 中 左边div给700px，因为它稍宽一些*/
            width: 680px;
            /* 给右侧一个边距*/
            margin-right: 20px;
        }
        
        .left>div {
            /* 给left下边的每个div设置200px高度*/
            height: 200px;
            /* 给left下边的每个div设置下边距20px*/
            /* margin-bottom: 20px; */
            /* 背景色*/
            background-color: yellow;
        }
        
        .left>div:nth-child(-n+2) {
            /* 只对.left_one和.left_two进行CSS定义方式2*/
            margin-bottom: 20px;
        }
        
        .left_one>div {
            background-color: yellowgreen;
            height: 100%;
            float: left;
        }
        
        .left_one_1 {
            width: 180px;
        }
        
        .left_one_2 {
            width: 480px;
            margin-left: 20px;
        }
        
        .right {
            /* 中 右边div给300px,因为它稍为窄一些 */
            width: 300px;
        }
        
        .right>div {
            /* 给right下边的每个div设置200px高度 */
            height: 200px;
            background-color: yellow;
        }
        
        .right>div:nth-child(-n+3) {
            /*只对.right下的前3个div设置下边距*/
            margin-bottom: 20px;
        }
    style>
head>

<body>
    <header>
        头部区域
    header>
    <section>
        <div class="left">
            <div class="left_one">
                <div class="left_one_1">div>
                <div class="left_one_2">div>
            div>
            <div class="left_two">div>
            <div class="left_three">div>
        div>
        <div class="right">
            <div class="right_one">div>
            <div class="right_two">div>
            <div class="right_three">div>
            <div class="right_four">div>
        div>
    section>
    <footer>
        底部区域
    footer>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

参考：

https://www.bilibili.com/video/BV11741177cJ?spm_id_from=333.880.my_history.page.click

相关阅读:
网络字节序和主机字节序
React技术栈 --》plugin与JSX语法使用 ## Day2
网络原理之TCP_IP_1
Scrapy 框架之 Item Pipeline 的使用
【计算机网络】互联网公司的网络架构和业务场景
从业一年，我是如何涨薪13K+?
Android中的RxJava入门及常用操作符
RALB负载均衡算法的应用
【uniapp】解决h5在ios safari浏览器tabBar抖动问题
多线程调用外部接口

原文地址：https://blog.csdn.net/baiziyuandyufei/article/details/127609915