这是我参与「4月日新计划更文活动」的第2天。
昨天我自己写了一个基础版的table布局的网页，并且在网页上能跑起来，很开心啊。
所以我今天打算把这个网页变得好看一点。
其实现在的网页更多的是会用div进行布局，而不是用以前的table布局了。
所以我今天打算使用div的布局方式来改造一下这个网页，让这个网页看上去更加的美观大方，并且利于seo搜索优化。
说干就干。
今天这个文章分成三个部分分享。
1、确定网页的基本骨架
2、使用css进行页面的优化
3、设置关键字，seo搜索引擎优化
1、确定网页的基本骨架
我刚刚搜索了我最爱的淘宝网和携程网，总结了一下这类网站的常规布局是怎样的，我先把照片截图贴出来给大家看一下。
总结一下，这一类网站都分成头部、主体和尾部三部分。
那我也打算学习借鉴这种布局方式。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的新页面</title>
</head>
<body>
<div class="header">头部</div>
<div class="container">我是主体内容</div>
<div class="footer">尾部</div>
</body>
</html>
接着就给这个骨架增加css样式。
使用css进行页面的优化
我根据216种安全色的网站，找到了一些比较符合我们审美的颜色，给我的网页增加好看的颜色。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>我的新页面</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 20px;
color: #fff;
background: #003333;
}
.container {
width: 100%;
height: 400px;
line-height: 400px;
text-align: center;
font-size: 24px;
color: #fff;
background: #003300;
}
.footer {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 24px;
color: #fff;
background: #000033;
}
</style>
<body>
<div class="header">头部</div>
<div class="container">我是主体内容</div>
<div class="footer">尾部</div>
</body>
</html>
页面效果如下：
设置关键字，seo搜索引擎优化
最后我们给网页增加meta标签，并且在meta标签中设置关键字，让搜索引擎能根据关键字找到我们的网页。
<meta name="keywords" contect="web前端 | 技术文章" />
<meta name="description" contect="写web前端技术文章的地方" />
<meta name="author" contect="写前端的小北" />
这样搜索引擎就能更快的找到这个网页了。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
