- 一,DIV+CSS配合使用
首先举一个例子来介绍下如何使用div+css来做控制页面布局,简单了解下就好了,这些毕竟不是我们做的事情。
<html> <head> <title>css的综合使用: DIV+CSS</title> <style type="text/css"> #head { height: 15%; background-color: blue; padding: 5px; } #body { height: 75%; background-color: gray; } #left { 15%; height: 100%; background-color: red; float: left; } #main { 85%; height: 100%; background-color: green; float: right; } #foot { height: 10%; background-color: orange; padding: 5px; } </style> </head> <body style="text-align: center;"> <div id="head">上面</div> <div id="body"> <div id="left">左边</div> <div id="main">右边</div> </div> <div id="foot">下面</div> </body> </html>
- 二,如何在脚本中修改css样式,就2个步骤
2,修改目标元素的css样式,常用的方式有两种:
修改内联css属性值,比如:obj.style.属性名=属性值
修改html元素的class属性,比如:obj.className=class选择器
值得注意的是:脚本中的css属性名与页面中的静态css属性名并不完全相同。
脚本中的css属性名是去掉原静态css属性中的(-),并将第一个单词的首字母小写,后面每个单词的首字母大写。比如静态css属性名为background-color,对应脚本中的属性名为backgroundColor。如果原来的静态css属性中不包含(-),则脚本中的css属性名和原来静态css属性名相同。