关于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>

JS刷新框架:

a)刷新包含该框架的页面用


1

2

3

<script
language=JavaScript>

   parent.location.reload();

</script>

b)子窗口刷新父窗口


1

2

3

<script
language=JavaScript>

    self.opener.location.reload();

</script>


1

<a href="javascript:opener.location.reload()">刷新</a>

c)刷新另一个框架的页面


1

2

3

<script language=JavaScript>

   parent.另一FrameID.location.reload();

</script>

七、用过CSS hack应该知道,用下划线命名是一种hack,如使用“_style”这样的命名,可以让IE外的大部分浏览器忽略这个样式的定义,所以使用“_”做为命名时的分隔符是不规范的。在做CSS检查时会出现错误提示。前端UI分享

八、IE条件注释写法

<!–[if !IE]>除IE外都可识别<![endif]–>

<!–[if IE]> 所有的IE可识别 <![endif]–>

<!–[if IE 5.0]> 只有IE5.0可以识别 <![endif]–>

九、CSS HACK 写法


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

/*第一种:*/

.div
{

background:orange;

*background:green !important;

*background:blue;

}

/*第二种:*/

.div
{

margin:10px;

*margin:15px;

_margin:15px;

}

/*第三种:*/

#div
color#333;
}

*+html
#div { 
color#999;
}

*
html #div { 
color#666;
}

时间: 2024-10-08 19:42:29

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

主题:关于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细节集合(三)

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

让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 细节收集

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

相关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)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代.而后代选