简易个人网站的搭建--页面布局(二)

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

目录

  • 前言
  • 一、宝塔面板创建网站
  • 二、页面布局
        • html代码
        • CSS代码
  • 总结

前言

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

一、宝塔面板创建网站

上一篇文章我们把搭建网站的基础准备工作已经做好了,现在开始添加站点。
登录宝塔面板,点击网站。
简易个人网站的搭建--页面布局(二)_第1张图片
添加站点,输入自己域名,点击提交。
简易个人网站的搭建--页面布局(二)_第2张图片
创建成功后如下图。简易个人网站的搭建--页面布局(二)_第3张图片
点击根目录中的index.html进行修改。
简易个人网站的搭建--页面布局(二)_第4张图片

二、页面布局

页面布局的基础知识可以参考下面这篇文章
CSS页面布局及排版
我的网站将整个页面分成了若干个小块,为了方便观看识别,用不同的颜色将其填充。结果图如下简易个人网站的搭建--页面布局(二)_第5张图片

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代码


总结

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

你可能感兴趣的:(个人网站的搭建,前端,css,html)