常用布局-白红宇

常用布局

阅读量：5335 次

发布时间：2019-06-15

本文共 1452 字，大约阅读时间需要 4 分钟。

1、页面结构——常见文章列表布局：标题+发布日期　　

　　<ul>

　　　　<li>这里是文章列表标题，我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li>

　　　　<li>这里是文章列表标题2，我是奇葩的IE浏览器<span style="float:right">2015-07-17</span></li>

　　</ul>

假设你按照以上布局，那么恭喜你，在IE67下发布日期会掉到下一行去

　　解决方案，按如下布局：　

　　<ul>

　　　　<li><span style="float:right">2015-07-17</span>这里是文章列表标题，我是奇葩的IE浏览器</li>

　　　　<li><span style="float:right">2015-07-17</span>这里是文章列表标题2，我是奇葩的IE浏览器</li>

　　</ul>

或　

　　<ul>

　　　　<li><span style="float:left">这里是文章列表标题，我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li>

　　　　<li><span style="float:left">这里是文章列表标题2，我是奇葩的IE浏览器</span><span style="float:right">2015-07-17</span></li>

　　</ul>

2、水平居中、垂直居中

　　（1）块级元素

　　　　　　1）利用定位及负边距

　　　　　　　　div { width:500px; height:500px; position:relative; }

　　　　　　　　p { width:200px; height:200px; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px; }

　　　　　　2）用margin：0 auto

　　　　　　　　p { margin:150px auto 0; }

　　（2）图片

　　　　　　1）利用定位及负边距

　　　　　　2）margin-top和margin-left去定位

　　　　　　3）水平：text-align:center（IE67不认）；垂直：父级—设置line-height、img设置vertical-align:middle（这个测试不成功）　　

　　（3）文字内容

　　　　div,p {text-align:center;font:14px/30px "宋体"};

3、页面结构——标题+列表

　　自定义列表dl　　

　　　　<dl>

　　　　　　<dt>放个标题啥的</dt>

　　　　</dl>

　　　　对比：

　　　　　　<div>

　　　　　　　　<ul>

　　　　　 </div>

转载于:https://www.cnblogs.com/YYvam1288/p/4977875.html

你可能感兴趣的文章