手把手教你做主题 WordPress皮肤教程(二)(4)
来源:asp之家 发布时间:2010-03-22 18:27:00
Step7--内容和定位
新建一个CSS文件,首先要给每一个容器(DIV)做定位,这可能是一个比较难的工作,其实认真做就会感觉也很简单,你只要确定它们的高度;宽度和浮动。
现在要给每一个容器定义CSS属性,首先要明确类名和ID名,还要把相同的属性的字符都找出来。请认真的检查第五步里的HTML文件中的类名。别外说一点,在这里可以用明亮的背景颜色来显示出每个容器的空间。(等到最后一步,可以把这些背景删掉)而背景的图片的尺寸可以从第四步中量出。
以下为引用的内容:
=======================
body
{
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;
}
#header
{
background:#CCCCCC;
height: 308px;
width: 960px;
text-align: center;
}
#headerimg
{
margin: 0px;
text-align: left;
}
#top_nav
{
background-color:#0066CC;
height: 45px;
padding-left: 105px;
text-align: left;
}
#top_nav ul
{
list-style: none;
}
#top_nav li
{
display: inline;
}
#top_nav li a:hover
{
}
#content
{
background: #009933;
float: left;
text-align: left;
}
.blogcontent
{
float: left;
padding: 10px 0px;
width: 635px;
}
.post
{
text-align: left;
}
.post h2
{
padding: 0px;
}
.post .post_title
{
float: left;
width: 90%;
}
.post_title h2, a
{
padding: 0px;
margin: 0px;
}
.post_title a
{
text-decoration: none;
}
.post_title a:hover
{
}
.post_title small
{
}
.post_title small a
{
padding: 0px;
margin: 0px;
}
.post .postmetadata
{
float: right;
height: 34px;
padding: 12px 5px;
width: 35px;
}
.postmetadata a
{
text-decoration: none;
}
.postmetadata span
{
padding-left:5px;
}
.entry
{
}
.entry a
{
padding: 0px;
margin: 0px;
}
.entry a:hover
{
}
.entry blockquote
{
border: 2px dashed #042748;
}
.entry img
{
float: left;
}
.entry ul
{
}
.entry li
{
}
.entry ol li
{
list-style: decimal;
}
.entry p
{
text-align: justify;
padding: 0px;
}
.entry span
{
}
#sidebar
{
background-color:#6666CC;
float: left;
padding: 0px 20px;
text-align: left;
width: 285px;
}
#sidebar ul
{
list-style: none;
margin: 0px;
}
#sidebar li
{
margin: 0px;
}
#sidebar li h2
{
margin: 0px;
}
#sidebar ul ul
{
list-style: none;
margin: 0px;
}
#sidebar ul ul li
{
margin: 0px;
}
#sidebar ul ul li a
{
}
#sidebar ul ul li a:hover
{
}
.bottom_sidebar
{
background-color:#006666;
float: right;
height: 90px;
width: 310px;
}
#search
{ }
#search input
{
}
#search #searchsubmit
{
background: #b1b1b1;
}
#footer
{
background:#999966;
height: 200px;
text-align: left;
width: 960px;/*909*/
}
#footer .column1
{
background:#FF3333;
float: left;
width: 300px;
}
.column1 .bottom
{
}
.column1 a
{
text-decoration: none;
}
#footer .column2
{
background-color:#006699;
float: left;
width: 250px;
}
.column2 h2
{
}
.column2 ul
{
list-style: none;
}
.column2 a
{
text-decoration: none;
}
================================
编好代码后在你的浏览器中测试效果,在此之前加上必要的图片,最终效果如下:
猜你喜欢
- Google日前推出了网站趋势(Google Trends For Websites)服务。这一新工具使用户能看到所有 网站的流量数据,并将
- 你的网站是不是常常被黑,或者一不注意就成了黑客的“肉鸡”?对于Web网站服务器来说,如果不进行安全设置,很容易被黑客“盯上”,随时都有被入侵
- 首先大家要认清楚一个概念,使用FTP是从http代理出去,还是由socks代理或firewall上打开一个口转发。从http代理出去的FTP
- 下面是根据各种网络赚钱模式归纳整理的,怎么也赚不了钱的网络赚钱方法,还望站长和希望通过互联网赚钱的朋友多加注意。(1)多层次营销(MLM)多
- Internet正以空前的速度深入千家万户,不少公司或个人在网络上建立起主页和站点。公司通过网站发布产品信息、提供服务、寻求商业契机;而个人
- 今天我们来说说服务器基础知识方面的几个问题,也是困惑初涉服务器领域众“菜鸟”们的几个常见问题:1 双
- 总共搜集了4款,大家可以根据需要下载!第一款为可直接复制文件的版本。附件:mstsc5.1.rar (312.7 KB)第二款为2
- 北京时间10月14日消息,美国知名IT杂志《eWeek》网络版今天刊文称,即使是最忠实的谷歌“粉丝”
- 在十年前,有人看到了Internet网的未来前景,几经波折历经万苦,创立了而今有名的阿里巴巴、百度、雅虎..等知名网站,详看今天的互联网已&
- 搜索引擎是不断地在发展,所以规律也在不停地变化,需要随时跟踪搜索引擎的新动态。这里整理了200个搜索引擎算法的相关因素,好东西啊!1. 关键
- 今天在检查博客附件的时候发现有以前上传的一个注册表导入脚本reg文件丢了,重新上传的时候居然报错了。仔细看了才发现是之前安装的Waterma
- Windows系统在长时间地工作之后,往往会不可避免地出现无法启动或者运行出错的故障,面对这些故障我们是选择将就使用,还是选择重新安装系统?
- 打开: js/upload.js找到: alert(sel.text);删除该代码
- 链接策略是做好SEO需要考虑的重要问题,今天看了Matt Cutts早些在3月份写的一篇文章,叫做:每个网页有多少的导出链接合适?按照Goo
- Discuz!7.0中,大大增强了论坛防灌水功能。相信很多站长都感受过论坛被疯狂灌水的烦恼,其实,只要巧妙地利用好 Discuz! 后台的各
- 在使用Windows NT 4.0时,IIS就已经成为流行的Web服务器平台。IIS4.0是作为OptionPack4的一部分发行的,需要进
- 加入google directory以后的网址将受到Google的特别有待,所以历来SEO都特别看重这类的链接。而大家知道GOOGLE DI
- Discuz! 7.1版本进一步完善和创新社区论坛系统的功能,用户采用在Discuz! 7.1搭建的社区论坛中可以注册一个帐号,登录浏览更多
- 首先,解释下什么是资源的永久重定向,通俗简单理解下,当你在浏览器中输入sina.com.cn(新浪首页)的时候,网址是不是变成 www.si
- 结合工作经验,在这里笔者给企业网管员提供一些保障企业网络安全的建议,帮助他们用以抵御网络入侵、恶意软件和垃圾邮件。定义用户完成相关任务的恰当