简易个人网站的搭建--页面布局（二）_简易网站

作者：代码优化者 | 2024-02-05 20:52:31

踩

简易网站

简易个人网站的搭建–基础准备工作（一）
简易个人网站的搭建–页面布局（二）

前言

在搭建网站之前，我们需要考虑几个问题。
首先，我们需要定位网站的用途，这个网站将用来干什么，将用来展示一些什么东西等等。
其次，我们就需要对网站的页面进行布局分块。这样会使页面更加整洁大方。

一、宝塔面板创建网站

上一篇文章我们把搭建网站的基础准备工作已经做好了，现在开始添加站点。
登录宝塔面板，点击网站。
在这里插入图片描述
添加站点，输入自己域名，点击提交。
请添加图片描述
创建成功后如下图。
点击根目录中的index.html进行修改。

二、页面布局

页面布局的基础知识可以参考下面这篇文章
CSS页面布局及排版
我的网站将整个页面分成了若干个小块，为了方便观看识别，用不同的颜色将其填充。结果图如下在这里插入图片描述

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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>
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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

总结

这篇文章介绍了网页的布局代码，将网页进行了简单的分块，从而方便后期添加元素。若大家对文章有不懂的地方可以在评论区中提出，我将进行解答。

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】