HTML,CSS,JS知识点集

1、.box{ width:200px;height:200px;background:red;}

οnmοuseοver="document.getElementById('div1').className='box';"  //不能用class，要用className     这行代码表示鼠标移入id='div1'的class='box'

 

2、οnclick="alert('a');" //点击弹出一个a

οnclick="document.getElementById('link1').href='css1.css';"      //链接的地址变化 动态变化

 

3、id的优先级大于class

 

4、

 

9、

.clear{zoom:1;}

表示缩放比例，zoom本身就是属性

zoom：1就是和原来一样大小

 

10、

yao

yaoxiyao

yao

yaoxiyao

 

11、

一、浮动元素自动变块级元素 

首先说说块级元素和行内元素区别，简单的来说，块级元素独占一行，可以设置宽高以及边距，行内元素不会独占一行，设置宽高行距等不会起效。常见的块级元素有：h1~h6、p、div、ul、table，常见的行内元素有：span、a、input、select等

 

浮动元素span 

 

 

浮动元素span 

 

 

二、浮动元素后的非浮动元素问题 

浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，若是非浮动块级元素跟在浮动元素后边且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在浮动元素“之下”显示。

 

浮动DIV

跟在浮动元素后边的DIV

跟在浮动元素后边的span

 

 

浮动DIV

跟在浮动元素后边的DIV

跟在浮动元素后边的span

 

IE6下的情况更加诡异：

 

 

 

12、 clear：both

 

TEST DIV

 

 

 

 

 

 

13、渐变

 

 

 

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;