1、.box{ width:200px;height:200px;background:red;}
onmouseover="document.getElementById('div1').className='box';" //不能用class，要用className 这行代码表示鼠标移入id='div1'的class='box'
2、onclick="alert('a');" //点击弹出一个a
<link id="link1" href="css2.css" rel="stylesheet">
onclick="document.getElementById('link1').href='css1.css';" //链接的地址变化 动态变化
3、id的优先级大于class
4、
<script type="text/javascript">
function to()
{
var oDiv=document.getElementById('div1'); //变量 ‘绰号’
document.getElementById('div1').style.width='100px';
oDiv.style.width='100px'; //变量显得简单
var oDiv1=oDiv.style;
oDiv1.width='100px'; //更加简单
}
5、
widonw.onload=function() //载入页面
{
var oBtn=document.getElementById('btn'); //获取id=btn的元素
var oUl=document.getElementById('ul1'); //获取id=的ul1元素
oBtn.onclick=function() //点击按钮将发生什么事件呢？
{
if(oUl.style.display=='block') //如果ul1是块级元素，点击则消失
{
oUl.style.display='none';
}
else
oUl.style.display='block'; ////如果ul1不是块级元素，点击则出现
};
};
6、实现全选的功能
<p id="btn">全选</p>
<input type="checkbox"><br>
var oBtn=document.getElementById('btn');
var oInput=document.getElementsByTagName('input');
var i=0;
oBtn.onclick=function()
{
for(i=0;i<oInput.length;i++) //有多少个复选框就选上多少
{
oInput[i].checked=true;
}
};
7、
<input type="button" value="yao">
<input type="button" value="xiyao">
<input type="button" value="yaoxiyao">
window.onload=function()
{
var oBtn=document.getElementsByTagName('input'); //获得一组标签元素
var i=0; //初始化
for(i=0;i<oBtn.length;i++) //循环 组的个数次
{
oBtn[i].onclick=function() //每一次按钮的点击事件函数
{
alert(this.value); //this表示当前发生事件的那个元素
};
}
}；
8、
注释方便用户理解代码，而且易于网页的维护。
html注释格式：<!--注释内容-->
css,js等多行注释格式：/*注释内容*/
css,js等单行注释格式：//注释内容
<link href="css/100du.css" rel="stylesheet" />
<!--引入css文件-->
<link href="img/100du.ico" rel="shortcut icon" />
<!--引入ico图片-->
<script src="js/jquery-1.11.0.min.js"></script>
<!--引入jquery-->
9、
.clear{zoom:1;}
表示缩放比例，zoom本身就是属性
zoom：1就是和原来一样大小
10、
<!--两行p，占两行-->
<p>yao</p>
<p>yaoxiyao</p>
<!--行内元素 在一行划分成几个区域 -->
<span>yao</span>
<span>yaoxiyao</span>
11、
一、浮动元素自动变块级元素
首先说说块级元素和行内元素区别，简单的来说，块级元素独占一行，可以设置宽高以及边距，行内元素不会独占一行，设置宽高行距等不会起效。常见的块级元素有：h1~h6、p、div、ul、table，常见的行内元素有：span、a、input、select等
<div style="height: 200px; width: 200px;">
<span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;
border: solid 1px red; background-color: Olive;">浮动元素span</span>
</div>
<div style="height: 200px; width: 200px;">
<span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;
background-color: Olive;">浮动元素span</span>
</div>
二、浮动元素后的非浮动元素问题
浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在浮动元素“之下”显示。
<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">
<div style=" width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray;
margin: 10px 0 0 10px;">
浮动DIV</div>
<div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;">
跟在浮动元素后边的DIV</div>
<span style="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;">
跟在浮动元素后边的span</span>
</div>
<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">
<div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray;
margin: 10px 0 0 10px;">
浮动DIV</div>
<div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;">
跟在浮动元素后边的DIV</div>
<span style="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;">
跟在浮动元素后边的span</span>
</div>
IE6下的情况更加诡异：
12、 clear：both
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>
13、渐变
<div id="div1"></div>
<style>
#div1 {
width: 200px;
height: 200px;
border: 1px solid #333;
background:-webkit-linear-gradient(top, red, yellow);
background:-moz-linear-gradient(top, red, yellow); 火狐下
background:-ms-linear-gradient(top, red, yellow); IE
background:linear-gradient(top, red, yellow); 其他
IE789都不支持
}
</style>
14、边框的四个角的弧度
border-radius: 0 0 6px 6px; 顺时针
15、
给图片加圆角：
<div class="section_ad"><a href="#"><img src="img/ad.gif"></a></div>
border-radius: 10px;
overflow: hidden; 圆角外域的部分隐藏
16、
左右子页面浮动
父页面清浮动
17、样式简化
#header,
#nav,
.content {
width: 960px;
margin: 0 auto;
}
#search,
.section,
.side_section,
.side_ad,
#footer {
border: 1px solid #dbdbdb;
border-radius: 6px;
}
18、这个东西这么写：
.options .nav {
height: 34px;
position: relative;
}
.options .nav li {
width: 172px;
height: 33px;
border: 1px solid #dbdbdb;
/*上面这两句颠倒位置效果不一样*/
border-radius: 6px 6px 0 0; /*上右有圆角，下左没有*/
}
.options .nav .active {
width: 172px;
height: 34px;
border-bottom: none;
background: #fff; /*背景用白色遮住，如下图，将左边那条下边框遮掉*/
}
.options .con {
width: 348px;
height: 80px;
border: 1px solid #dbdbdb;
border-radius: 0 0 6px 6px; /*上右没有圆角，下左有*/ /*所以整个会有*/
}
不用整体写一个
border: 1px solid #dbdbdb;
border-radius: 6px;
19、
还可以用这种方法：
.options {
width: 350px;
height: 420px;
position: relative;
}
.options .nav {
height: 34px;
position: relative;
z-index:2; /*层级高，优先级高*/
}
.options .nav li {
width: 172px;
height: 33px;
border: 1px solid #dbdbdb;
/*上面这两句颠倒位置效果不一样*/
border-radius: 6px 6px 0 0;
}
.options .nav .active {
width: 172px;
height: 34px;
border-bottom: none;
background: #fff;
}
.options .con {
width: 348px;
height: 80px;
border: 1px solid #dbdbdb;
border-radius: 0 0 6px 6px;
position:absoute;
top:34px;
left:0;
z-index:1;
}
20、一旦给元素加上absolute或float就相当于给元素加上了display:block;