当前位置： > 网页制作 > HTML/Xhtml > 文章内容

实现lightBox时的样式与行为分离减少JS(2)

http://www.itjxue.com 2015-08-05 23:01 来源:未知 点击次数:

2. 单行居中，多行居左的方法（看demo吧，表述能力有限）：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>单行居中，多行居左</title> <style type="text/css"> * { margin:0; padding:0; } .outer { margin-top:20px; text-align:center;} .inner { display:inline-block; *display:inline; zoom:1; text-align:left;} </style> </head> <body> <div class="outer"> <div class="inner">内容很少时</div> </div> <div class="outer"> <div class="inner"> <p>内容成段时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时时</p> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3. 使用inline-block实现未知高度垂直居中的方法（看图和demo吧，表述能力有限）：

图示：

代码演示：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>未知高度垂直居中的方法</title> <style type="text/css"> * { margin:0; padding:0;} html,body { height:100%; overflow:hidden; text-align:center; font-size:0; } .maxHeight { display:inline-block; *display:inline; *zoom:1; height:100%; width:10px; vertical-align:middle; background:#00b4ff; margin-left:-10px;} .lightBox { display:inline-block; *display:inline; *zoom:1; width:300px; border:2px solid #f60; font-size:12px; background:#fff; position:relative; vertical-align:middle;} </style> </head> <body> <div class="lightBox"> <br /><br /><br /><br /><br /> </div> <div class="maxHeight"></div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

存在的两个细节性问题：

大家可以看到完整demo中并未出现font-size:0;，而在垂直居中法中却出现了。
因为font-size:0在完整demo中，将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效，原因不详，这一点大家可以作情处理。
maxHeight这东西只能放在lightBoxContent的后面，因为在opera9.6中会出现bug，囧。

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：邮件HTML的一些经验总结

下一篇：H标记要在网页制作中合理使用

实现lightBox时的样式与行为分离减少JS(2)

(责任编辑：IT教学网)

相关HTML/Xhtml文章

阅读排行

专题教程

推荐HTML/Xhtml文章

最新更新HTML/Xhtml