网站运营
位置：首页>> 网站运营>> 手把手教你做主题 WordPress皮肤教程(二)（5）

手把手教你做主题 WordPress皮肤教程(二)（5）

　来源：asp之家　发布时间：2010-03-22 18:27:00　

标签：主题设计,皮肤制作,wordpress,设计教程


Step8--添加背景

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

以下为引用的内容：

===============
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-960x308.png') no-repeat top left;
   height: 308px;
   width: 960px;
   text-align: center;
   }

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

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

.bottom_sidebar
   {
   background: url('./images/pngs/bottom-325x90.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-960x200.png') no-repeat top left;
   height: 200px;
   text-align: left;
   width: 960px;
   }

======================================


最终在浏览器效果如下：

Step9--添加前景图片

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



第一页 上一页 3 4
5
6 7 下一页
0
投稿

猜你喜欢

手机版 网站运营 asp之家 www.aspxhome.com