站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:CSS Troubleshooting
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
=== 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:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)