JavaScript CSS Style属性对照表
文章来源：http://www.phplamp.org/2008/10/jsavscript-js-css-style/
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：
JavaScript代码
<script type="text/javascript">
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="phplamp.gif" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript中style后面的属性应该是什么？
JavaScript CSS Style属性对照表
盒子标签和属性对照
CSS语法 (不区分大小写)JavaScr ......
JavaScript CSS Style属性对照表
文章来源：http://www.phplamp.org/2008/10/jsavscript-js-css-style/
为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的Css属性。比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：
JavaScript代码
<script type="text/javascript">
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="phplamp.gif" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript中style后面的属性应该是什么？
JavaScript CSS Style属性对照表
盒子标签和属性对照
CSS语法 (不区分大小写)JavaScr ......
1. 将网页或元素居中
HTML：
<div class="wrap">
</div><!-- end wrap -->
CSS：
.wrap { width:960px; margin:0 auto;}
2.Sticky Footer (让页脚永远停靠在页面底部，而不是根据绝对位置)
HTML：
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
CSS：
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
......
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的
工具，但也能检查出拼写错误。
3. 确定错误发生的位置
假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。这是MacIE的闻名的bug，倘若不
知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float ......
<style>
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#FFFFFF;
margin:10px;
}
#box1 {
border:1px solid #cccccc; padding:2px; width:80%; height:100px;
margin:0 auto;
}
#box2 {
height:100%;overflow: auto;
}
</style>
<div id="box1">
<div id="box2">滚动条出来拉<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
& ......
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px;
height:80px; z-index:100;}
#div1 .div2
{
float:left; width:40px; height:40px; position:relative;
}
#div1 .div2 a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; position:relative;}
#div1 .div2 a img {width:100%; height:100%; border:0;}
#div1 .div2 a:hover {position:absolute; left:-20px; top:-20px; width:80px;
height:80px; z-index:100;}
</style>
<ul id="enlarge">
<li><a href="#one"><img src="http://www.dzwindows.com/images12_1 ......
转:写的不错,对于网页开发有指导意义
在《欲练 CSS ，必先宫 IE》和《你有 <table /> 强迫症吗？》这两篇文章中，看到有不少评论用到div+CSS布局这个说法，用来和table布局比较。实际上div不是用来布局的，div只是用来表示一个其它元素都无法准确表达语意的一个块区，只有CSS是用于布局的，所以根本就不存在div+CSS布局这回事。反过来，table布局的时候经常依赖于CSS定义一个单元格的布局属性，所以可以说是table+CSS布局。也就是说，我们讨论的两种主流布局方法应该是纯CSS布局和table+CSS布局，如果你觉得你在用的是div+CSS布局，那么有可能你也有强迫症了。
接下来我们说说如何进行纯CSS布局，因为CSS布局依赖于XHTML，所以我们先要说说如何书写一个CSS无关的XHTML。其实书写CSS无关的XHTML并不难，虽然你不能再好像书写table布局代码那样集中精力于最重的视觉效果上，但其难度也不过是中学生写作文那样。
中学生写作文如何写呢？首先看看题目，然后想想整篇文章分为哪几个大的段落，每个大的段落说些什么，能够把你要说的东西说清楚。对于XHTML来说，这相当于用div把文档切割为几大块。这时候你不要想着这些div将构建一个怎样的DOM啊、CSS如何选择DOM中元� ......
最新文章 : css