简易个人网站的搭建--页面布局（二）
前言
在搭建网站之前，我们需要考虑几个问题。 首先，我们需要定位网站的用途，这个网站将用来干什么，将用来展示一些什么东西等等。 其次，我们就需要对网站的页面进行布局分块。这样会使页面更加整洁大方。
一、宝塔面板创建网站
二、页面布局
页面布局的基础知识可以参考下面这篇文章 我的网站将整个页面分成了若干个小块，为了方便观看识别，用不同的颜色将其填充。结果图如下
html代码
<body> <div class="box"> <div class="page-header">上</div> <div class="page-main"> <div class="page-main-left">中左</div> <div class="page-main-center"> <div class="page-main-center-header">中中上</div> <div class="page-main-center-footer">中中下</div> </div> <div class="page-main-right"> <div class="page-main-right-header">中右上</div> <div class="page-main-right-center">中右中</div> <div class="page-main-right-footer">中右下</div> </div> </div> <div class="page-footer">下</div> </div> </body>
CSS代码
<style>
body{
background-color: white;
margin: 0;
padding: 0;
}
.box{
margin: 0 auto;
}
.page-header{
height: 65px;
background-color:ghostwhite;
}
.page-footer{
height: 60px;
background-color:ghostwhite;
}
.page-main{
height: 700px;
background-color: indianred;
position: relative;
}
.page-main-left{
position: absolute;
width: 240px;
height: 700px;
left: 0;
top: 0;
background-color: greenyellow;
}
.page-main-center{
height: 700px;
margin: 0 260px 0 250px;
background-color:white;
}
.page-main-center-header{
background-color: white;
height: 670px;
}
.page-main-center-footer{
background-color: red;
height: 30px;
}
.page-main-right{
height: 700px;
width: 250px;
position: absolute;
right: 0;
top: 0;
background-color:ghostwhite ;
}
.page-main-right-header{
height: 80px;
background-color: royalblue;
}
.page-main-right-center{
margin-top: 20px;
background-color: rosybrown;
height: 285px;
}
.page-main-right-footer{
background-color: aquamarine;
height: 285px;
margin-top: 20px;
}
.page-footer{
height: 60px;
background-color:burlywood;
}
</style>
总结
这篇文章介绍了网页的布局代码，将网页进行了简单的分块，从而方便后期添加元素。若大家对文章有不懂的地方可以在评论区中提出，我将进行解答。
