站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:CSS Troubleshooting
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==检查你的 HTML和 CSS== 为了要决定网页设计上哪些元素是合适的,哪些是不合适的,你需要返回到原始资料。这意味着你要深入地观看。 网页的美好外观,你在网络浏览器上看到的漂亮的布局下面,是一连串的编码,编码上有奇怪的听起来怪异的references。窄看一眼,这些编码就如汽车的引擎盖下面的东西。你知道正是引擎盖下面的东西,使得汽车能够开起来,但是那些乱起八糟的编码到底是什么呢? '''查看 HTML''' ;深层次地查看网页,确定网页能够被网页浏览器浏览,从你的网页浏览器的顶端菜单上,点击查看 > 原始资料或者网页原始资料。另一个网页会弹出,在你的另一个浏览器窗口的内部或者在称作Notepad的操作系统的程序内部,或者其它操作系统程序内部。这是你的HTML网页,这个网页支持了你的网页的结构。 ;这个链接会载入到你附加的CSS样式表上。要查看CSS,双击文件名或者在你的网络浏览器文件上输入特别的链接,如: 在WordPress中,PHP是用来真正地产生HTML网页的,通常是复杂的,使人感到疑惑的编码。要查看HTML,请先查看一个网页,例如一篇文章样本。要更改HTML结构和CSS references,你需要更改适当的PHP文件。[[WordPress:Using Themes|关于使用主题的Codex 网页]]有更多的信息,关于怎样查看你的主题模板,找出哪个模板与你的网页上的哪个部分相联系。 这里所列的解决问题的办法,描述了怎样更改CSS来影响网页的布局。要真正地改变主题,请查看[[WordPress:Theme Development|主题发展]]。 ===深入查看 CSS=== 你一旦深入,查看到了HTML和CSS,就要开始玩侦查的游戏了。开始,你要知道你在查看什么,以及可以在哪儿找到基本的元素,帮助你找到问题所在。 HTML网页拥有所有的结构编码,能够为你的站点所处的"位置"建立网格。将HTML网页看做是一张地图,地图上写满了注释。这些注释事实上是指示器,指向CSS文件中的一些方向。 向下滚动,浏览过许多<tt><link rel='archives'...</tt>信息,直到你看到了<tt><body></tt>。这个的下面就是网页布局的"主体"。在这个部分中,每一点信息对于网页的结构和设计,都至关重要。 继续向下滚动,查看识别的ID和 '''CLASS'''声明。例如,你可能会看到: <pre><div id="page"> <div id="header"> <h1>My WordPress Site</h1> <div id="headerimg"> </div> <div class="description">by Me and Only Me</div> </div> <div id="content" class="widecolumn"> <div class="post"></pre> 看起来,这个可能让人感到疑惑,但是这基本上设置了你的内容所在的部分。 它以一个称为"网页",设置了整个网页的外观的模块开始。如果你在CSS文件中查找 <tt>#网页</tt>选择器,你会看到相关的外观样式。 这个样式在<i>标头</i>部分的后面,标题部分包含有一个标题 (<tt>H1</tt>) 和你的站点的标题。这个特殊的布局是以默认的 [[WordPress:Using Themes| WordPress 1.5称作Kubrick的主题]]为基础的,这个主题的标头部分包含有一个图像,这个图像由 <i>"headerimg"</i> 部分设置。然后是一个带有 '''CLASS''' reference的部分,称为 <i>"description"</i> ,在这个部分中,你拥有一个子标题或者站点的描述。再一次地,查看你的CSS,找到<tt>.description</tt> 了解这个部分是如何设计的。 接着的两个标签关闭了<i>header</i> (<tt></div></tt>),然后是<i>"content"</i>部分ID,也有一个'''CLASS''',称为<i>"widecolumn"</i>,紧跟着另一个'''CLASS''',称为<i>"post"</i>。<i>"content"</i> 和 <i>"widecolumn"</i>布局了特有你的r <i>"post"</i>那个部分。 这是一个母/子关系的例子。同样,就如你在下一个部分中所见到的那样,这是开始产生CSS布局问题的主要部分之一。 === CSS 母子关系=== 设计网页最大的问题之一是要了解问题是在哪里产生的,以及谁能够解决问题。这称为CSS的"母/子关系"。众所周知,父母的内心通常知道孩子们最真实的想法,孩子们通常惧怕父母们的这种想法,也会为此苦恼,因此,了解这样关系,会帮助你解决这个问题。 一个WordPress用户在论坛上发表一个问题,她想要自己的网页上的<tt>header</tt>在网页上完全地扩展,同时内容要出现在网页的中间,左边和右边都有非常大的空间。她一直尝试处理<tt>header</tt>周围的空白,但是一直没有效果,因此向我们求助。 <pre><div id="page"> <div id="header">Header Title</div> <div id="content"> <div class="post">Post babble here...</div></pre> 这个例子中,CSS页面空白的属性是: <pre>#page { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 20px; margin-bottom: 5px; margin-left:20px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; }</pre> 仔细观察这个编码,会发现更改<tt>header</tt>上的页面空白,不起作用,因为标头页面空白本来是由<tt>page</tt>空白控制的。这里正显示了母/子关系。母<tt>page</tt>告诉子<tt>header</tt>做什么,但是子header想要做其它的事情。 如果我们更改了<tt>page</tt>左边和右边的空白,便解决了<tt>header</tt>的问题,但是我们又由此产生了另一个问题。母<tt>page</tt>的影响继续存在,现在所有的内容都扩展在整个网页上。要更改<tt>content</tt>左边和右边的空白,这样又有很宽的页面空白了。要使得整个页面看起来合适,新的页面空白看起来像: <pre>#page { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; } #header { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px;} #content { margin-top:5px; margin-right: 100px; margin-bottom: 5px; margin-left:100px; } .post { margin-top:5px; margin-right: 5px; margin-bottom: 5px; margin-left:5px; }</pre>
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)