[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

前言

接着上一章继续吹水，这篇是教你如何美化上一篇的内容。主题嘛，随便写写，只会教你一些简单的东西喔，并不会深入喔，但可以写一套主题喔，以下内容为了方便，均换成拼音代替。 :AC_斜眼:

现在该我们的css上场啦，打开它！还有index.php！

首先我们需要一个最外层的div来管理整个页面的主要布局，在<body>的下面与</body>的前面写<div class=”uz-buju”>与</div>。此时的内容应该为：

图片[1]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

到css文件下，我们写入下面的代码，为了方便看见布局，我们来给它加点颜色。并且把它居中过去，比较好看。

.uz-buju{
	background: #FFCCD6;
	width: 80%;
	margin: 0 auto;
}

上面这段css预览后的样子：

图片[2]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

首先这个本地屁眼作为我们的标题，当然是要够大了！设置下他的颜色、大小、位置。（你会发现蓝色比较丑，这里在css最上面写入）

a{ 
 text-decoration:none;
 color:#fff;
}

设置标题

.uz-h1{
	font-size: 70px;
	text-align: center;
        font-weight: bold;
}

你会发现顶部和周围都有空行，接下来设置在css内写

body{
	margin:0;
	padding:0;
}

图片[3]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

完成了背景色与字体颜色后，我们需要设置下文章标题的样式，将div加入到如图位置。

	<div class="uz-wenz">  </div>

图片[4]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

可能有的人喜欢用图片做背景的，这里也来加一下。直接拿body开刀就好，新建一个名为img的文件，用来专门放图片，然后设置它的各项background设置。

body{
	margin:0;
	padding:0;
	background: url(img/bj.jpg);
	background-repeat:no-repeat; 
	background-size:cover;
	background-attachment:fixed;
}

修改下.uz-buju的css，加入下面的代码

	border-radius:20px 20px 20px 20px;
	margin-top: 20px;

此时我们的博客页面已经变成这样了，而且访问速度那叫一个快 :AC_斜眼:

图片[5]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

接下来加入新的div标签并且把uz-wenz修改为如下，再加入新的标签uz-wenz-text，然后到css文件去编辑它。

	<div class="uz-wenz">
		<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>
		<div class="uz-wenz-text"><?php the_content(); ?>
	</div>

这里的uz-wenz与text都需要进行修改（复制覆盖吧。）

.uz-wenz{
	font-weight: bold;
	font-size: 40px;
	background:#00BEEE;
	width: 100%;
	border-radius:20px 20px 0px 0px;
}

.uz-wenz-text{
	font-weight: bold;
	font-size: 20px;
	background: #88E7FF;
}

此时的博客首页：

图片[6]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

结束

本次的文章先说到这里了，为了以后的继续编写，先把首页的布局进行了一定设置。在看了两篇文章后，你已经掌握了WordPress博客主题的制作了吗？是不是很简单呀。轻轻松松撸出一个自己的博客首页！

此时的CSS文件与index

图片[7]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客图片[8]-[教程]月宅教你写WordPress主题-第二章:美化-月宅酱的博客

其他

在填完坑后，放出该教程的所有源码，届时你将得到一个博客源码。

文章版权归作者所有，未经允许请勿转载。

THE END

网络干货
# WordPress主题教程