您现在的位置:首页 >> 前端 >> 内容

html/css笔记

时间:2015/10/20 9:55:33 点击:

  核心提示:根据不同浏览器使用不同的css文件!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w3.org/TR/x...
根据不同浏览器使用不同的css文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="css/IE6.css"/>

<title>无标题文档</title>

<script type="text/javascript" language="javascript">

    function setCss(){        //根据浏览器来选择CSS  

        if (!window.XMLHttpRequest) {  

           setActiveStyleSheet("IE6.css"); //IE6  

        }else if(window.ActiveXObject){  

            setActiveStyleSheet("IE7.css"); //IE7, 以及IE7+ 

        } else {  

           setActiveStyleSheet("other.css"); //Mozilla FireFox、Safari, etc.          }  

     

            

    }

    function setActiveStyleSheet(filename){  

        var path = document.getElementsByTagName("link")[0].href;  

        document.getElementsByTagName("link")[0].href="css/"+filename;

        alert("css/"+filename);   

    } 

    window.onload=setCss;</script>

</head>

 

<body>

    asdasdasd<br />

</body>

</html>

_________________________________________________________________________________

网页中的上标和下标实现

方法一:

 

HTML里的sup和sub分别是上标和下标,语义清晰。但是在某些浏览器中有问题。

 

例如:

 

H<sup>2</sup>O

H<sub>2</sub>O

 

方法二:

 

使用表格布局来实现:

 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>网页上标、下标的实现方法</TITLE> </HEAD> <BODY>

 

<p align="left">   <table border="1" width="102" height="38" cellpadding="0" bordercolor="#FFFFFF">     <tr>       <td width="18" height="38" rowspan="2"><b><font size="7"><i>H</i></b></td>       <td width="25" height="10"></td>       <td width="28" height="38" rowspan="2"><b><i><font size="7">O</i></b></td>     </tr>     <tr>       <td width="25" height="38"><b><i><font size="5">2</i></b></td>     </tr>   </table> </p> </BODY> </HTML>

 

-------------------------------------------------------------------------------------------

clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系

style.height 包括 元素的滚动条,不包括边框

clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeight

offsetHeight 包括元素的滚动条和边框,只有在没有元素的滚动条和边框的情况下,offsetHeight==style.height==clientHeight

scrollHeight offsetHeight+scrollTop,只有在没有元素的滚动条和边框和滚动时的情况下,offsetHeight==style.height==clientHeight==,offsetHeight==style.height==scrollHeight

 公式是:

 style.height=clientHeight+滚动条宽度;

 offsetHeight=style.height+borderTop+borderBottom;

 scrollHeight=offsetHeight+scrollTop;

 

同理: clientWidth,offsetWidthstyle.width,scrollWidth

演示时营造不同的环境测试(改变eyejs元素的样式)

<p id="eyejs" style="border: solid 10px red;width:100px;height:100px;overflow:scroll;">

<p style="height:200px;"></p>

</p>

<input type="button" onclick="alert(document.getElementById('eyejs').clientHeight)" value="点击clientHeight" />

<input type="button" onclick="alert(document.getElementById('eyejs').style.height)" value="点击style.height" />

<input type="button" onclick="alert(document.getElementById('eyejs').offsetHeight)" value="点击offsetHeight" />

<input type="button" onclick="alert(document.getElementById('eyejs').scrollHeight)" value="点击scrollHeight" />

 

Tags:HT TM ML LC 
作者:网络 来源:不详