CSS上下两栏全屏布局是一种经典的网页布局,适用于各种网站。下面我们来介绍一下如何实现这种布局。首先,我们需要在HTML中添加两个标签,一个用于放置上方的内容,一个用于放置下方的内容。代码如下:&am
CSS上下两栏全屏布局是一种经典的网页布局,适用于各种网站。下面我们来介绍一下如何实现这种布局。
首先,我们需要在HTML中添加两个标签,一个用于放置上方的内容,一个用于放置下方的内容。代码如下:
<div class="top"> <p>这里是上方的内容</p> </div> <div class="bottom"> <p>这里是下方的内容</p> </div>
接下来,我们需要在CSS中设置上下两个标签的样式。首先,设置整个页面的高度为100%:
html, body { height: 100%; }
然后,设置上下两个标签的高度为50%,使它们占据整个页面:
.top, .bottom { height: 50%; }
接着,为了让上下两个标签分别位于页面的上下部分,我们需要设置它们的position属性为absolute,并分别设置它们的top和bottom值为0:
.top { position: absolute; top: 0; } .bottom { position: absolute; bottom: 0; }
最后,为了让两个标签之间没有空隙,我们需要设置它们的margin为0:
.top, .bottom { margin: 0; }
现在,我们已经成功实现了CSS上下两栏全屏布局。完整的代码如下:
<!DOCTYPE html> <html> <head> <title>CSS上下两栏全屏布局</title> <style> html, body { height: 100%; } .top, .bottom { height: 50%; margin: 0; } .top { position: absolute; top: 0; } .bottom { position: absolute; bottom: 0; } </style> </head> <body> <div class="top"> <p>这里是上方的内容</p> </div> <div class="bottom"> <p>这里是下方的内容</p> </div> </body> </html>
上面的代码可以直接复制粘贴到HTML文件中进行尝试,实现了上下两栏全屏布局。
粉丝
0
关注
0
收藏
0