主题:关于CSS细节集合(一)

一、当文字与图片在一行,需要将文字与图片底对齐,需要这样写:


1

<li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li>

二、当文字与图片在一行,需要将文字与图片居中对齐,需要这样写:


1

<li>记住密码<img src="static/img/xyx.jpg" align="middle"/></li>

三、更改IE“查看源代码”菜单打开的编辑器

  1. 打开注册表编辑器,在开始-运行中输入regedit前端UI分享
  2. 找到以下位置: HKEY_LOCAL_MACHINE”SOFTWARE”Microsoft”Internet Explorer”View SourceEditor”Editor Name”修改默认的数据为”D:”Program Files”EmEditor”EmEditor.exe”

切换到IE中查看源代码就可以看到效果了。
如果View Source Editor”Editor Name项没有,可以自己新建。

四、自动最大化窗口,在 <body> 与 </body> 之间加入:


1

2

3

4

<SCRIPT language="javascript">

setTimeout(‘top.moveTo(0,0)‘,5000);

setTimeout(‘top.resizeTo(screen.availWidth,screen.availHeight)‘,5000);

</script>

五、window.opener 实际上就是用window.open打开的窗体的父窗体。

比如在父窗体parentForm里面 通过 window.open(“subForm.html”),那么在subform.html中 window.opener
就代表parentForm,可以通过这种方式设置父窗体的值或者调用js方法。

  1. window.opener.test(); —调用父窗体中的test()方法;
  2. 如果window.opener存在,设置parentForm中stockBox的值。 前端UI分享

1

2

3

4

if (window.opener && !window.opener.closed)

    {

       window.opener.document.parentForm.stockBox.value = symbol;

    }

六、刷新页面的方法

Javascript刷新页面的方法:

  1. history.go(0)
  2. location.reload()
  3. location=location
  4. location.assign(location)
  5. document.execCommand(‘Refresh’)
  6. window.navigate(location)
  7. location.replace(location)
  8. document.URL=location.href

自动刷新页面的方法:

  1. 页面自动刷新:把<meta http-equiv=”refresh” content=”20″>加入<head>区域中
  2. 页面自动跳转:把<meta http-equiv=”refresh” content=”20;url=http://www.wyxg.com”>加入<head>区域中 前端UI分享
  3. js自动刷新页面:

1

2

3

4

5

6

7

<script language="JavaScript">

function myrefresh()

{

       window.location.reload();

}

setTimeout(‘myrefresh()‘,1000); //指定1秒刷新一次

</script>

一、IE6及以下不识别a 标签外的:hover伪类,在火狐,IE7里能正确达到效果,解决办法:

.代码  

  1. #show li.s1{ border:1px solid #ff9900; background:#454242;}
  2. #show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}

二、为元素设置hasLayout

很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决,最简单的给元素设置hasLayout值的方法是给加上CSS 的height或width(当然,zoom也可以用,但这不是CSS的一部分)。比如设置为height:1%。如果父元素没有设置高度,那么元素的物理高度并不会改变,但是,已经具备hasLayout属性。

三、IE6下字符重复出现

确保浮动元素设置了 display:inline;

在浮动元素中使用 margin-right:-3px;前端UI分享

四、样式优先级

1,内联样式 [1.0.0.0]
2,ID选择器 [0.1.0.0]
3,类,属性,伪类 选择器 [0.0.1.0]
4,元素标签,伪元素 选择器 [0.0.0.1]

五、一个元素垂直居中的css写法

.代码  

  1. #exm{
  2. position:absolute;
  3. left:50%;
  4. top:50%;
  5. z-index:1;
  6. width:200px;
  7. height:100px;
  8. margin-left:-100px;
  9. margin-top:-52px;
  10. }

六、zoom : normal | number

设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。虽然此属性不可继承,但是它会影响对象的所有子对象( children )。前端UI分享

七、图片跟文字并排时, 要实现图片文字垂直居中:

  1. 将line-height:设置成图片的高度,或者图片父元素的高度.
  2. 再将图片的CSS设置vertical-align:middle;

八、li 元素中包含 a img 元素的时候,IE6下出现空白

解决方法 一:

使 li 浮动,并设置 img 为块级元素

解决方法 二:

设置 ul 的 font-size:0;

解决方法 三:

设置 img 的 vertical-align: bottom;

解决方法 四:

设置 img 的 margin-bottom: -5px;

九、被点击访问过的超链接样式不在具有hover和active

解决方法:改变CSS属性的排列顺序: L-V-H-A

十、FF下连续长字段不能自动换行

解决方法:

.代码  

  1. div{word-wrap:break-word;overflow:hidden;}

十一、FF下父容器高度不能自适应

解决办法:清除子元素的浮动

十二、IE下图片下方产生空隙

解决办法:

  • 定义img 为display:block,或vertical-align为top/bottom/middle/text-bottom
  • 定义父容器的字体大小为零,font-size:0

十三、IE6下浮动元素和它相邻的非浮动元素之间有3px空隙

解决办法:

  • 相邻的非浮动元素也设置浮动;
  • 浮动元素相对IE6定义_margin-right:-3px;

十四、LI内容超长后以省略号显示

解决办法: white-space:nowrap;(文本不换行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

十五、文本不能垂直居中

解决办法:行高和容器高度相等line-height=height;

十六、文本输入框和相邻的文本不能对齐

解决办法:设置文本输入框vertical-align:middle;前端UI分享

十七、IE设置滚动条样式

解决办法:

.代码  

  1. body{
  2. scrollbar-face-color:#f6f6f6;
  3. scrollbar-highlight-color:#fff;
  4. scrollbar-shadow-color:#eeeeee;
  5. scrollbar-3dlight-color:#eeeeee;
  6. scrollbar-arrow-color:#000;
  7. scrollbar-track-color:#fff;
  8. scrollbar-darkshadow-color:#fff;
  9. }

十八、IE6无法定义高度为1px的容器

解决办法:

.代码  

  1. div{
  2. overflow:hidden;
  3. zoom:0.8;
  4. line-height:1px;
  5. }

一、让层显示在flash之上

解决办法:给FLASH设置透明<param name=”wmode” value=”transparent” />或者<param name=”wmode” value=”opaque” />

二、使一个层垂直居中浏览器中

解决办法:使用百分比绝对定位,与外补丁负值的方法。

.代码

  1. {position:absolute;
  2. top:50%;
  3. left:50%;
  4. margin:-100px auto auto -100px;
  5. width:200px;
  6. height:200px;
  7. }

三、加入收藏夹前端框架分享

解决办法:

.代码

  1. <script type="text/javascript">
  2. // <![CDATA[
  3. function bookmark(){
  4. var title=document.title
  5. var url=document.location.href
  6. if (window.sidebar) window.sidebar.addPanel(title, url,"");
  7. else if( window.opera && window.print ){
  8. var mbm = document.create_r_rElement_x(‘a‘);
  9. mbm.setAttribute(‘rel‘,‘sidebar‘);
  10. mbm.setAttribute(‘href‘,url);
  11. mbm.setAttribute(‘title‘,title);
  12. mbm.click();}
  13. else if( document.all ) window.external.AddFavorite( url, title);
  14. }
  15. // ]]>
  16. </script>

.代码

  1. <a href="javascript:bookmark()">加入收藏夹</a>

四、IE实现页面背景渐变(FF及chrome不支持)

从上到下:

.代码

  1. body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}

左上至右下:

.代码

  1. body{
  2. filte: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX=100,startY=50,finishY=100); skyblue;
  3. }

从左至右:

.代码

  1. body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}

从上到下:

.代码

  1. style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

五、border:none;与border:0区别

理论上的性能差异:

前端框架分享

border:0;把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。border:none;把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

兼容性差异:

兼容性差异只针对浏览器IE6、IE7与标签button、input而言,在win、win7、vista 的XP主题下均会出现此情况。

当border为“none”时似乎对IE6/7无效边框依然存在,当border为“0”时,感觉比“none”更有效,所有浏览器都一致把边框隐藏,如何让border:none;实现全兼容?只需要在同一选择符上添加背景属性即可

六、css实现多列等高布局,正内边距与负外边距

给每个需要实现等高的列应用样式:

.代码

  1. .e{padding-bottom:32767px;margin-bottom:-32767px;}

七、display:inline-block;顾名思义,就是在内联情况下的块状,可以设定高度宽度。前端框架分享

.代码

  1. .element-class {
  2. display: -moz-inline-stack; //Firefox only code
  3. display: inline-block; //some standard browsers
  4. zoom: 1; //IE only
  5. *display: inline; //Only IE know this code (CSS Hack)
  6. }

八、清理浮动

.代码

  1. .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
  2. .clearfix {zoom:1;}

九、文字用省略号截断

.代码

  1. div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
时间: 2024-10-19 19:17:17

主题:关于CSS细节集合(一)的相关文章

关于CSS细节集合(三)

一.让层显示在flash之上 解决办法:给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" /> 二.使一个层垂直居中浏览器中 解决办法:使用百分比绝对定位,与外补丁负值的方法. .代码 {position:absolute; top:50%; left:50%; margin:

关于CSS细节集合(一)

一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: 1 <li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li> 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: 1 <li>记住密码<img src="static/img/xyx.jpg" align="mi

关于CSS细节集合(二)

一.IE6及以下不识别a 标签外的:hover伪类,在火狐,IE7里能正确达到效果,解决办法: .代码   #show li.s1{ border:1px solid #ff9900; background:#454242;} #show li.s2{ border:1px solid #D9D8D8; background:#312E2E;} 二.为元素设置hasLayout 很多IE6(或IE7)的问题可以用设置hasLayout值的方法来解决,最简单的给元素设置hasLayout值的方法是

css 细节收集

细节1……………………………………………………………………………… 一.当文字与图片在一行,需要将文字与图片底对齐,需要这样写: <li>记住密码<img src="" align="bottom" style="margin-bottom:-4px"/></li> 二.当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: <li>记住密码<img src="static/im

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

相关css 细节处理 neat.css

人性化的细节处理 例如: textarea 默认只能垂直拖动,防止宽度改变破坏布局. textarea { resize: vertical; } 汉字字号小于 12px 不易阅读,为 <small> 元素设置默认值为 12px. small { font-size: 85.7%; /* 12/14=0.8571428571 */ } label 元素默认光标设为「手型」,暗示此处可点击. label { cursor: pointer; } 考虑移动设备 通常 iPhone 横屏时默认会放大

css细节(实习第一天)

1.在head标签中引入css文件 <link href="style.css"rel="stylesheet" type="text/css" /> 2.语法:<label for="控件id名称"> 注意:标签的 for属性中的值应当与相关控件的 id属性值一定要相同. checkbox中多选,radio单选. 3.CSS样式优先级:内联式>嵌入式>外部式 内联式:<spansty

css细节决定薪水一:尖角处理

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂.我查看了各大互联网公司的网站,包括腾讯.百度.新浪.天猫.去哪网, 腾讯: 百度: 去哪网: 天猫: 其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌. 优点:形状随意: 缺点:不方便维护: 下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码: <div clas

CSS细节

1.子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素. .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li(水果.蔬菜)加入红色实线边框. 2.包含选择器,即加入空格,用于选择指定标签元素下的后辈元素.如右侧代码编辑器中的代码: .first span{color:red;} 请注意这个选择器与子选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选