梦入琼楼寒有月,行过石树冻无烟

CSS 布局

头部布局

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
<style>
/*头部*/
.header {
background-color: aliceblue;
padding: 80px;
text-align: center;
}

/*布局*/
.layout {
float: left;
width: 40%;
}
</style>
<body>
<div class="header">
<div class="layout">
<h1>No.1</h1>
<p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早,我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息? </p>
</div>

<div class="layout">
<h1>No.2</h1>
<p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早,我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息? </p>
</div>

<div class="layout">
<h1>No.3</h1>
<p>两月中原消息断,不应京国亦无闻。庙堂如未弃黎庶,日日诏书清垢氛。</p>
</div>
</div>
</body>

文字布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
/*布局*/
.layout {
float: left;
width: 40%;
}
</style>
<body>
<div class="layout">
<h1>No.1</h1>
<p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早,我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息? </p>
</div>

<div class="layout">
<h1>No.2</h1>
<p>冬天常常驶过一个农庄马丶冷落的铅丝网树丶干涸的河床今早,我忽然觉得有一些异样嫩柳在丝丝飘忽牡马在频频昂仰马丶树和我之间互传着什么消息? </p>
</div>

<div class="layout">
<h1>No.3</h1>
<p>两月中原消息断,不应京国亦无闻。庙堂如未弃黎庶,日日诏书清垢氛。</p>
</div>
</body>

底部布局

1
<p style="position:absolute;bottom:0">Hello,world!</p>
ID DE FA
padding 填充大小 padding
color 背景颜色 background
align 居中 text
left 文字居左 float
width 宽度 width
absolute 绝对位置 position
bottom 底部位置 bottom
⬅️ Go back