站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
CSS之疑难解答
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==检查HTML和CSS代码</STRONG>== 我们需要在源代码中检查网页布局是否出错,源代码就是页面的“后台”。 在页面的“后台”中,原先在互联网窗口上看到的漂亮布局全部化作了成段的、夹杂着奇怪的外文引用的代码。这和汽车引擎盖下的情况有些类似,我们知道引擎盖下的各种机械装置联合起来就能发动汽车,但页面后的这些代码究竟是拿来做什么的呢? <STRONG>查看HTML代码</STRONG> 在web浏览器中打开页面,在浏览器的“查看”顶级菜单中选择“页面源代码”。之后会弹出另一个浏览器窗口或记事本(操作系统自带的一个小程序),或者其它类似程序,其中的内容就是组成页面的HTML文档。 <STRONG>查看CSS代码</STRONG> 要查看CSS代码,可以使用CSS实际地址,也可以在HTML文档中查找以下内容: <PRE><link rel="style sheet" type="text/css" href="wordpress/wp-content/themes/default/style.css"> </PRE> 这个链接就是装载附加CSS样式表的链接。要查看CSS,可以双击文件名,或在浏览器中输入文件的详细链接: <PRE>http://www.yoursite.com/wordpress/wp-content/themes/default/style.css </PRE> 在WordPress中,PHP被用来生成HTML页面。PHP代码不仅复杂,也容易让人迷惑。可以在已生成的页面(如日志样例)中查看HTML代码。如果想修改HTML结构和CSS引用,需要先修改相应的PHP文件。[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html WordPress主题的使用]中介绍了怎样查看主题模板并找出与当前页面相匹配的模板。 下文中的解决方法主要是利用CSS来改变页面布局。要了解如何修改主题,请参考[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91.html 主题开发]。 <STRONG>查看CSS代码</STRONG> 打开[[HTML]]和CSS的后台之后,我们就要开始像夏洛克·福尔摩斯一样做侦察了。首先,要明白自己需要查找的信息,以及在什么位置上能找到解决问题的基本元素。 HTML页面中包括所有结构代码,这些代码竖起了页面的网格框架。可以把HTML页面看作是一个到处标有注释的地图,这里的注释就是CSS文件中所找到的说明的指示器。 在文档中掠过一长串<link rel='archives'... 之类的内容,直到看到<body>标签。<body>下是页面布局的主体部分,<body>之后的每段代码对页面的结构和布局都相当重要。 继续滑动鼠标,在文档中查找识别ID和CLASS(类)语句。假设我们找到的是以下内容: < 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"> 以上代码看起来可能让人有些难以理解,但可以帮我们区分文章内容的各个版块。 代码以一个名为“page”的DIV标签开始,设定了整个页面的外观。在CSS文件中查找#page,可以看到与页面样式相关的外观样式表。“page”之后是header DIV,header规定了网站名称的标题字体(H1),这一特别样式来源于[http://codex.wordpress.org/Using_Themes Kubrick主题],该主题的页头部分含有一个由headerimg DIV设定的图片。header之后是一个名为“description”的CLASS引用的DIV标签,description是对网站的简单描述。在CSS文件的.description部分能找到description区域的样式表。 接下来的两个标签(</div>) 关闭了header标签。在这之后是“content”的DIV ID,同时还有一个名为<EM>"widecolumn"</EM>的类,<EM>"widecolumn"</EM>之后是另一个post类。 <EM>"content"</EM>和<EM>"widecolumn"</EM>设定了包围日志的容器的整体样式。 这是一个父子关系的实例。在接下来的部分中我们会发现,这里正是CSS样式问题的主要发源地之一。 <STRONG>CSS父子关系</STRONG> 网页设计的最大难题之一就是弄清问题产生的位置以及问题所受影响。这被称作[[CSS]]的“父子关系”。众所周知,父母做事时总会从内心为孩子考虑,为孩子做最好的打算,但孩子却往往会感到恐惧,最后造成父子间的紧张关系。了解这一点对解决问题会产生一定帮助。 曾经有一个WordPress用户在论坛上抱怨说,她希望自己页面上的header部分的宽度能与页面宽度相同,正文部分在页面居中显示,页面左右各留出大片空白,但她在header版块的空白部分上试验了很久,也没有找出解决办法,于是到论坛上寻求帮助。 <PRE><div id="page"> <div id="header">Header Title</div> <div id="content"> <div class="post">Post babble here...</div></PRE> 这里空白部分的CSS属性是: # 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; } 从这位用户的代码中可以判断出,更改header的空白部分不起作用的原因在于,空白部分首先受到了page空白部分的影响。这就是CSS父子关系造成的影响。引发问题的“父亲”page指示“孩子”header进行某个操作,而header希望达到的却是另一种效果。 如果更改page左右两侧空白,header的空白问题也就解决了。但新的问题又出现了。page继续发挥自己的影响,content部分的宽度也达到了页面宽度。这时又需要更改content左右两侧的空白,恢复原有宽度。要是页面上所有元素都和谐共处,新的空白部分可以是: # 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; }
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)