Archive for 'Css'
今天碰到一个CSS问题
有背景图片的高度是350-400像素的，但是有些网页的内容也许没有400的高度
现在问题是
如果页面的内容div的高度小于等于400等于px的话，按400像素显示
如果页面的内容div的高度大于400高度，则自适应高度。
———————————————–
因为以前没碰到过，一时无从下手。群里一问
果然有大师级的人物给支招：
#view {height:auto !important
heigh:400px;
min-height:400px;}
第一句用important的Jhack限定了IE7及FF下的高度自适应
而第三句明确了在自适应前提下，最小高度是400px;
第二句则针对IE6—-IE6下内容高度增加,div随之撑开。无需定义。。。。
===========================================
最大高度的问题 原理差不多
只是代码如下
height:auto !important;
height:500px;
max-height:500px;
overflow:hidden;
解释
1、IE6不识别max-height:500px和height:auto !important这两句，超过500px（也就是我们所希望的最大高度）后的内容将自动以藏；
2、IE7及其他标准浏览器全部识别，所以有期望的效果。
但仍然存在一个问题：在没有任何内容的时候，IE6里还是会有500px的高度。因为IE6对!important的解释存在bug，这时IE6只认height:500px，而不认height:auto !important，所以在IE6里自然就出现500px的高度。
区别IE6与FF：
background:orange;*background:blue;
区别IE6与IE7：
background:green !important;background:blue;
区别IE7与FF：
background:orange; *background:green;
区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;
注：
IE都能识别*;标准浏览器(如FF)不能识别*；
FF不能识别*，但能识别!important;
(FF是特例。它是优先识别!important看到!important，就停止了)
IE6对什么都识别或者可以说都不识别,他只认识最后面的.
——————————
IE6下
P{color:red!important;color:yellow;}显示yellow
——————————————————————————–
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。(推荐)
于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。
Tagged with Css兼容, Css研究.
通过 CSS transform (firefox文档, safari文档)属性. 无所不能的css也开始玩起3D效果了。在配合 CSS transitions(文档) 我们还可以对3D样式进行动画表现。
请看下面例子
3D方块演示
支持的浏览器: Safari 3.2+, Google Chrome, Firefox 3.5+
3D方块动画演示，不含任何脚本
支持的浏览器: Safari 4+, Google Chrome
本文来源:
http://www.fofronline.com/2009-04/3d-cube-using-css-transformations/
大型门户站基础css样式命名和应用原则
1. CSS属性应用原则。
原则1：首页DIV最小块级单位须设置高度；子页可能添加资料的DIV块不应设置高度;
原则2：css样式继承关系必须控制在三层以内；
原则3： 对于浮动所产生的IE6BUG,在全局样式里面应定义.clear{clear:both;height;0px; overflow: hidden;}
原则 4：所有页面文件的编码格式统一为：UTF-8;
2. CSS命名规范。
全局样式 base.css 指所有页面通用的样式，或者公共块的样式;
首页样式 index.css
频道页面样式 channel.css
详细页面样式 detail.css
如果有特殊单独页面样式，可另取样式命。
3. 页面框架结构保留字。
页面容器：＃wrap 页面头部：#header
页面中心内容：#maincontent 页面底部：#footer
横向方位容器1：main，side 横向方位容器2：leftframe，midframe，rightframe
横向分段容器：section，field，column 盒子内容属性：contentbg
盒子上方属性：topbg 盒子下方属性：bottombg
盒子左边属性：leftbg 盒子右边属性：rightbg
4. 导航保留字。
导航：nav 主导航：mainnav
子导航：subnav 顶导航：topnav
边导航：sidebar 左导航：leftsidebar
右导航：rightsidebar 菜单：menu
子菜单：submenu 下拉菜单：dropmenu
快速菜单：quickmenu
5. 功能保留字。
列表：list 标题：title
摘要：intro 内容：text
按扭：btn 搜索：search
登陆：login 注册：regsiter
提示信息：msg 小技巧：tips
图标: icon 滚动：scroll
6. 根目录文件夹命名存放方式。
例如：
总网站文件存放于F盘web下；
Web下 应该包含
images 存放所有网站直接插入的图片；
imagestemp 存放所有网站直接插入，但后期一定被程序替换的图片。
imagesad 存放网站所有的广告图片；
style images 存放公共或单独页面样式所涉及的样式图片；
存放公共样式表或单独页面样式表；
include 存放网站所有的包含页面；
js 存放网站所有的JS效果文件
XXXX
频道页文件夹 style 存放所有频道页面所涉及到的样式图片和样式表；
存放所有该频道下的子页面；
7. 注释。
页面和样式表里面 容易混淆，或比较重要的样式，框架样式 都应写注释
页面内注释格式为
————————–为开始
————————–为结束
样式表内注释格式为：
/*XXXX 样式开始*/
/*XXXX 样式结束*/
最近评论