HTML,CSS,JS知识点集_html和css知识点

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

<link id="link1" href="css2.css" rel="stylesheet">

οnclick="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.οnlοad=function()        //载入页面

{

var oBtn=document.getElementById('btn');         //获取id=btn的元素

var oUl=document.getElementById('ul1');           //获取id=的ul1元素

 

oBtn.οnclick=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.οnclick=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.οnlοad=function()

{

var oBtn=document.getElementsByTagName('input');  //获得一组标签元素

var i=0;   //初始化

for(i=0;i<oBtn.length;i++)     //循环 组的个数次

{

oBtn[i].οnclick=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;