小滴课堂首页布局

html在网页中的作用：定义页面结构，定义有什么

css在网页中的作用：修饰页面结构和样式

1.html编写

分为头部、中间内容、底部；中间内容又包含版心

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <div class="header">
       
    </div>
    <div class="main">
        <div class="content">
            
        </div>
    </div>
    <div class="footer">

    </div>
</body>

2.css编写

固定头部高度

固定底部高度

中间部分包含版心，版心设置宽度和最小高度

reset.css重置所有元素都为border-box

1
box-sizing: border-box;

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.header {
    height: 60px;
    background-color: red;
}
.main {
    background-color: blue;
}
.content {
    width: 1200px;
    margin: auto;
    background-color: green;
    min-height: 600px;
}
.footer {
    height: 144px;
    background-color: yellow;
}
前端
#前端 #css #html
小滴课堂首页布局
http://hanqichuan.com/2021/04/21/前端/小滴课堂首页布局/
作者
韩启川
发布于
2021年4月21日
许可协议