弹性布局,实现页面结构

1.思路

有三个板块,第一个是导航栏,第二个是中间内容,第三个是页脚,中间内容有左侧边栏,内容区域和右侧边栏

1.设定内外边距为0

2.设置导航栏样式

宽度,高度,颜色,背景颜色,文本居中对齐,字体大小,行高

3.设置中间的样式

宽度,高度,背景颜色,弹性布局,主轴居中,侧轴居中

设计左侧边栏,内容区域和右侧边栏:宽度,高度,颜色,背景颜色,文本居中对齐,字体大小,行高

4.设置页脚样式

宽度,高度,颜色,背景颜色,文本居中对齐,字体大小,行高

2.代码




    
    
    
    基于弹性布局,实现页面结构


    
    
    
左侧边栏
内容区域
右侧边栏

3.页面

弹性布局,实现页面结构_第1张图片

 

你可能感兴趣的:(html,css,前端)