常用布局
2015-11-19 15:46
344 查看
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>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
对比:
<div>
<div class="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</div>
<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>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>
对比:
<div>
<div class="title"></div>
<ul>
<li></li>
<li></li>
<li></li>
</div>
相关文章推荐
- python 通过urllib 访问api接口
- test
- ISBN 号码
- 关于Dr.com上网客户端常见问题合集
- 2015-11-04-Android手动缓存js,css和浏览器默认缓存的优劣势对比.md
- 网格形变算法(Linear rotation-invariant coordinates和As-Rigid-As-Possible)
- 使用Hibernate SQLQuery(转)
- Eclipse用法和技巧九:自动添加try/catch块2
- json2 (json对象转换, 解决中文乱码问题)
- sicily 1047. Super Snooker
- [转]OSGI简介
- Java拾遗
- POJ 3702 距离排序
- Android ViewPager使用方法+ViewPager循环滑动
- WinForm版软件快速开发工具平台,生成B/S软件项目
- MFC SendMessage之间通过COPYDATA进行传输字符串
- LeetCode 22:Generate Parentheses
- matlab primer
- 《0day安全》学习笔记1——PE文件
- jsp中利用MySQL实现分页技术