html文字自适应屏幕居中显示,DIV+CSS经典布局[宽度自适应][自动屏幕居中]的实现...
-->
分析:
最外层的wrapper把所有内容都嵌套在里边,整体相对定位。max min已经很好的控制了最窄最宽值,但对IE没有作用。如果没有其他布局的穿插,这一层其实写在body内就可以,少一层嵌套。
#wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}
wrapper 下级的 outer header footer
其中header绝对定位,footer 相对定位;outer分别对左右有130px的外边距,这是兼容非IE的关键。
#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}
#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}
#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}
outer 下级的 clearheader outerwrap right clearer
clearheader 用做填补header的空白,clearer 是一个常用的填充hack用法。
outerwrap 宽为什么是99%,而不是100%?
因为他的上层outer有边框,100%宽再加2个边框象素就会撑大,FF有明显效果。
right 的处理很经典,IE下解析为定位,FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。
#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; float:right; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}
outerwrap 内的 centrecontent left clearer 思路与上面类似。
指定IE5.0及版本以上浏览器有效
使用expression方法实现对IE5.0及以上版本的宽度条件控制,实现自动调整宽度并居中。宽度我都固定了数值,因为如果在这里使用auto,会在调整窗口大小过程中发生div内容无法显示的问题。
body {
width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );
}
#wrapper {
width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );
}
这个例子融合了很多DIV+CSS的经典用法和定义,同时很传统和实用。
html文字自适应屏幕居中显示,DIV+CSS经典布局[宽度自适应][自动屏幕居中]的实现...相关推荐
- div css经典布局实例,div+css布局实例:常用图文混排(一)--腾讯图文 - 蜗爱CSS
Example Source Code body{ /*公共样式*/ margin:0; padding:0 0 12px 0; font-size:12px; ...
- 使用css代码实现div居中显示 div水平居中显示
使用css代码实现div居中显示 div水平居中显示 属性 居中显示 属性 需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为**margin:0 auto: ...
- html div自动居中显示,div居中与div内容居中
div css结构时,常见到div 居中与div形式居中,即div本身水准居中与div内的形式居中机关. 而形式居中又分为垂直居中与水准居中,这里CSS5将逐个让人人驾御这几个居中机关手段. 关于di ...
- DIV+CSS网页布局(新手必备)
文章目录 一:网页布局的目的 二:如何布局 (1):确定"版心" (2):分析模块 三:页面元素的定位机制 (1)流式布局 (2)浮动-float (3)绝对定位(position ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
- web前端 --- CSS(04) -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- [html] 使用div+css进行布局有什么好处?
[html] 使用div+css进行布局有什么好处? 我记得刚学的是时候,说最一开始用的是table去实现布局的.HTML语义标签还是挺多的,就是div打发好啊 个人简介 我是歌谣,欢迎和大家一起交流 ...
- html css网页布局实例简单,Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)...
网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
- Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响 我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
最新文章
- STL nth_element
- Linux快速工作使用指令经验(持续更新)
- 本地yum仓库以及网络版yum的私有仓库详细的安装配置
- 避开这2个误区,测试目标 KPI 不再难设
- 网站攻击软件_佳能遭严重勒索软件攻击,10TB的数据被窃取,大量服务宕机
- 在内存中动态生成缩略图
- Python实现分析pdf或者Word形式简历,并且保存到Excel中
- HttpServletRequest 需要导入xx包?
- python项目开发实例-有趣的十个Python实战项目,让你瞬间爱上Python!
- 从 Netflix 到 Alibaba,Spring Cloud 更好了吗?
- oncreate 测量尺寸
- 利用python爬取租房信息_Python实战:爬取租房信息
- 基于python的消息轰炸
- 力扣887题-鸡蛋掉落
- excel双击后公式计算机,#电脑上的excel表格里的数字为什么要双击才能展开#excel文本双击后变数字...
- 垃圾短信分类java_有了这个神器,快速告别垃圾短信邮件
- 大一作业:c语言,用static变量编写一个函数fac(int n),此函数连续调用n次,可以依次返回1至n的阶乘值。最后用main调用fac函数输出1-5的阶乘。
- easyui的datagrid可编辑框小功能实例
- Android剥洋葱式解析JSON数据
- 平面解析几何----圆锥曲线1/AF+1/BF=2/ep的三种证法
热门文章
- libcap-ng库旨在使具有posix功能的编程比传统的libcap库容易得多
- 《深入浅出DPDK》读书笔记(七):PCIe与包处理I/O
- Linux下实现多线程异步管道
- 生成ltx文件命令_利用二次开发工具批量生成PCDMIS程序
- 回归分析beta值的标准_读懂回归分析-SPSS为例(无广告)
- java垃圾回收GC(学习笔记)
- ARMedia问题记录
- linux搭建虚拟化平台报告,CentOS 7中搭建KVM虚拟化平台的方法步骤
- hashtable允许重复吗_在单位缴职工医保,老家有居民医保,能同时报销吗?相关部门这样回应...
- Win10 应用程序新的图标流出,微软正在为其改头换面