PSD文件转主题WordPress主题教程2

第八步、添加背景

好,现在开始添加背景图像了,这时我们就用到前面那些切割出的的图片了,因为城市背景是固定的,但是我们想要类似浮动的效果,该要怎么做呢,还记得第四步吗?让我们动手来做吧。

===============
body
{
background: #000000 url(‘./images/jpgs/bg-image.jpg’) fixed no-repeat bottom center;
margin: 0px;
padding: 0px;
text-align: center;
}

#header
{
background: url(‘./images/pngs/header-960×308.png’) no-repeat top left;
height: 308px;
width: 960px;
text-align: center;
}

#content
{
background: url(‘./images/pngs/bg-635×1.png’) repeat-y top left;
float: left;
text-align: left;
}

#sidebar
{
background: url(‘./images/pngs/bg-325×1.png’) repeat-y top left;
float: left;
padding: 0px 20px;
text-align: left;
width: 285px;
}

.bottom_sidebar
{
background: url(‘./images/pngs/bottom-325×90.png’) no-repeat bottom center;
float: right;
padding: 0px 0px 0px 15px;
height: 90px;
text-align: left;
width: 310px;
}

#footer
{
background: url(‘./images/pngs/footer-960×200.png’) no-repeat top left;
height: 200px;
text-align: left;
width: 960px;
}

======================================
最终在浏览器效果如下:

第九步、添加前景图片

添加LOGO,导航链接,评论背景,RSS图标,等等。


===================
<div id=”header”>
<div id=”headerimg”>
<a href=”#”><img alt=”Generation X” border=”0″ src=”./images/pngs/logo-480×135.png” /></a>

</div>
<div id=”top_nav”>
<ul>
<li><a href=”#”><img alt=”Home” border=”0″ src=”./images/pngs/home.png” /></a></li>
<li><a href=”#”><img alt=”About” border=”0″ src=”./images/pngs/about.png” /></a></li>

</ul>
</div>
</div>

.
.
.

<div class=”bottom_sidebar”> <a href=”#”><img alt=”0″ border=”0″ src=”./images/pngs/rss.png” /></a> </div>

.
.
.

<div class=”bottom”> <img alt=”” border=”0″ src=”./images/pngs/footer-115×51.png” /></div>
==============================
为每个图像添加应有的CSS属性

==================================
#headerimg
{
height: 185px;
margin: 0px;
padding: 55px 0px 0px 45px;
text-align: left;
}

#top_nav
{
height: 45px;
padding-left: 105px;
text-align: left;
}

#top_nav li a:hover
{
background: url(‘./images/pngs/hover.png’) no-repeat bottom center;
}

.bottom_sidebar
{
background: url(‘./images/pngs/bottom-325×90.png’) no-repeat bottom center;
float: right;
padding: 0px 0px 0px 15px;
height: 90px;
text-align: left;
width: 310px;
}

.post .postmetadata{ background: url(‘./images/pngs/bg-45×58.png’) no-repeat top left; float: right; height: 34px; padding: 12px 10px; width: 25px;}

#footer .column1
{
float: left;
font: normal 10px Arial;
padding: 0px 0px 0px 80px;
width: 300px;
}

.column1 .bottom
{
padding: 50px 0px 0px 40px;
}

===============================
在浏览器中的效果:

第十步、添加文本样式

我们越来越接近完成了,大家加油了,在这一步骤,给文本添加样式。这一步要注意的地方是,把文本样式添加在适合的地方,添加正确的padding 和margin的值。给例表添加CSS属性。
==============
#sidebar li {margin: 0px; padding: 0px 0px 0px 20px; }
===========================
COPY下面的代码

==============================
body
{
background: #000000 url(‘./images/jpgs/bg-image.jpg’) fixed no-repeat bottom center;
color: #333;
margin: 0px;
padding: 0px;
text-align: center;
}
h1, h2, h3, ul, li, p, form
{
margin: 0px;
padding: 0px
}
hr
{
display: none;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
.space
{
clear: both;
}
#page
{
margin: 0px auto;
padding: 0;
width: 960px;/*909*/
}
#header
{
background: url(‘./images/pngs/header-960×308.png’) no-repeat top left;
height: 308px;
width: 960px;/*909*/
text-align: center;
}
#headerimg
{
height: 185px;
margin: 0px;
padding: 55px 0px 0px 45px;
text-align: left;
}
#top_nav
{
height: 45px;
padding-left: 105px;
text-align: left;
}
#top_nav ul
{
list-style: none;
}

#top_nav li
{
display: inline;
}

#top_nav li a:hover
{
background: url(‘./images/pngs/hover.png’) no-repeat bottom center;
}
#top_sidebar
{
color: #fff;
font-weight: bold;
height: 10px;
padding-right: 155px;
text-align: right;
}
#content
{
background: url(‘./images/pngs/bg-635×1.png’) repeat-y top left;
float: left;
text-align: left;
}
.blogcontent, .widecolumn
{
float: left;
padding: 10px 0px;
width: 635px;
}
.blogcontent form
{
color: #fff;
padding: 10px 50px 0px 90px;
}

.blogcontent input
{
background-color: transparent;
border: 1px solid #214b73;
color: #fff;
}

.blogcontent #searchsubmit
{
background: #b1b1b1;
color: #214b73;
font-weight: bold;
padding: 2px;
}

.blogcontent h2
{
color: #fff;
font: bold 18px Georgia, Arial;
padding: 0px 50px 0px 90px;
}

.blogcontent small a
{
font-size: 18px;
padding: 0px 50px 0px 90px;
}
.post
{
padding: 0px 50px 0px 90px;
text-align: left;
}
.post h2
{
color: #fff;
padding: 0px;
}

.post .post_title
{
float: left;
width: 90%;
}

.post_title h2, a
{
color: #b31414;
font: normal 24px Georgia, Arial;
padding: 0px;
margin: 0px;
}

.post_title a
{
text-decoration: none;
}

.post_title a:hover
{
color: #fff;
}

.post_title small
{
color: #385673;
font: normal 12px Georgia, Arial;
}

.post_title small a
{
color: #385673;
font: normal 12px Georgia, Arial;
padding: 0px;
margin: 0px;
}

.post .postmetadata
{
background: url(‘./images/pngs/bg-45×58.png’) no-repeat top left;
float: right;
height: 34px;
padding: 12px 10px;
width: 25px;
}

.postmetadata a
{
color: #416fa3;
text-decoration: none;
}

.postmetadata span
{
color: #416fa3;
font: normal 24px Georgia, Arial;
padding-left:5px;
}
.entry
{
color: #c3c3c3;
font: normal 12px Arial;
padding: 20px 0px;
}
.entry a
{
color: #385673;
font: normal 12px Georgia, Arial;
padding: 0px;
margin: 0px;
}

.entry a:hover
{
color: #69c;
}

.entry blockquote
{
border: 2px dashed #042748;
padding: 8px;
}

.entry img
{
float: left;
padding: 0px 20px 0px 0px;
}

.entry ul
{
padding-left: 20px;
}

.entry li
{
list-style: url(‘./images/pngs/bull-list.png’);
}

.entry ol li
{
list-style: decimal;
}

.entry p
{
text-align: justify;
padding: 0px;
}

.entry span
{
color: #b31414;
}
#sidebar
{
background: url(‘./images/pngs/bg-325×1.png’) repeat-y top left;
float: left;
padding: 0px 20px;
text-align: left;
width: 285px;
}
#sidebar ul
{
list-style: none;
margin: 0px;
padding: 5px 0px;
}

#sidebar li
{
margin: 0px;
padding: 0px 0px 0px 20px;
}

#sidebar li h2
{
color: #fff;
font: normal 18px Rockwell, Georgia, Arial;
margin: 0px;
padding: 10px 0px;
}
#sidebar ul ul
{
list-style: none;
margin: 0px;
}

#sidebar ul ul li
{
margin: 0px;
padding: 0px 0px 0px 30px;
}

#sidebar ul ul li a
{
color: #69c;
font: normal 12px Arial;
text-decoration: none;
}

#sidebar ul ul li a:hover
{
color: #b31414;
}
.bottom_sidebar
{
background: url(‘./images/pngs/bottom-325×90.png’) no-repeat bottom center;
float: right;
padding: 0px 0px 0px 15px;
height: 90px;
text-align: left;
width: 310px;
}

#search
{
font: bold 12px Arial;
color: #fff;
padding: 0px 0px 15px 15px;
}
#search input
{
background-color: transparent;
border: 1px solid #214b73;
color: #fff;
}
#search #searchsubmit
{
background:#0B192C;
color: #FFFFFF;
font-weight: bold;
padding: 2px;
}
#footer
{
background: url(‘./images/pngs/footer-960×200.png’) no-repeat top left;
color: #fff;
height: 200px;
text-align: left;
width: 960px;
}
#footer .column1
{
float: left;
font: normal 10px Arial;
padding: 0px 0px 0px 80px;
width: 300px;
}

.column1 .bottom
{
padding: 50px 0px 0px 40px;
}

.column1 a
{
color: #fff;
font: normal 12px Arial;
text-decoration: none;
}

#footer .column2
{
float: left;
font: normal 12px Arial;
padding: 35px 0px 0px 0px;
width: 250px;
}

.column2 h2
{
color: #457db9;
font: normal 20px Rockwell;
}

.column2 ul
{
list-style: none;
}

.column2 a
{
color: #fff;
font: normal 12px Arial;
text-decoration: none;
}
===============================

做到这里一个个性的Wordpress模版就做好了。

Leave a comment

You must be logged in to post a comment.