網頁中CSS的細節處理大集合

時間  2021-01-29
標籤 javascript css html java node chrome 瀏覽器 框架 dom 編輯器 欄目 HTML 简体版
原文   原文鏈接

1、當文字與圖片在一行，須要將文字與圖片底對齊，須要這樣寫：javascript

<li>記住密碼<img src="" align="bottom" style="margin-bottom:-4px"/></li>css

2、當文字與圖片在一行，須要將文字與圖片居中對齊，須要這樣寫：html

<li>記住密碼<img src="static/img/xyx.jpg" align="middle"/></li>java

3、更改IE「查看源代碼」菜單打開的編輯器node

  1. 打開註冊表編輯器,在開始-運行中輸入regeditchrome

  2. 找到如下位置： HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修改默認的數據爲"D:"Program Files"EmEditor"EmEditor.exe"瀏覽器

  3. 切換到IE中查看源代碼就能夠看到效果了。框架

  4. 若是View Source Editor"Editor Name項沒有,能夠本身新建。dom

4、自動最大化窗口，在 <body> 與 </body> 之間加入：編輯器

<SCRIPT language="javascript">
setTimeout('top.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
</script>

5、window.opener 實際上就是用window.open打開的窗體的父窗體。

好比在父窗體parentForm裏面 經過 window.open("subForm.html"),那麼在subform.html中 window.opener

就表明parentForm,能夠經過這種方式設置父窗體的值或者調用js方法。

1,window.opener.test(); ---調用父窗體中的test()方法；

2,若是window.opener存在,設置parentForm中stockBox的值。

if (window.opener && !window.opener.closed)

{

window.opener.document.parentForm.stockBox.value = symbol;

}

6、刷新頁面的方法

Javascript刷新頁面的方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href


自動刷新頁面的方法:
1.頁面自動刷新：把<meta http-equiv="refresh" content="20">加入<head>區域中

2.頁面自動跳轉：把<meta http-equiv="refresh" content="20;url=http://www.wyxg.com">加入<head>區域中

3.js自動刷新頁面
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

4.JS刷新框架

a)刷新包含該框架的頁面用
<script language=JavaScript>
parent.location.reload();
</script>

b)子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
(　或　<a href="javascript:opener.location.reload()">刷新</a> )

c)刷新另外一個框架的頁面
<script language=JavaScript>
parent.另外一FrameID.location.reload();
</script>

7、用過CSS hack應該知道，用下劃線命名是一種hack，如使用「_style」這樣的命名，可讓IE外的大部分瀏覽器忽略這個樣式的定義，因此使用「_」作爲命名時的分隔符是不規範的。在作CSS檢查時會出現錯誤提示。

8、IE條件註釋寫法

<!--[if !IE]>除IE外均可識別<![endif]-->
<!--[if IE]> 全部的IE可識別 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0能夠識別 <![endif]-->

9、CSS HACK 寫法

第一種：
.div {
background:orange;
*background:green !important;
*blue;
}
第二種：
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三種：
#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }



細節2………………………………………………………………………………

1、IE6及如下不識別a 標籤外的:hover僞類，在火狐，IE7裏能正確達到效果，解決辦法：
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li onMouseOver="this.className='s1'" onMouseOut="this.className='s2'"></li>

2、爲元素設置hasLayout

不少IE6（或IE7）的問題能夠用設置hasLayout值的方法來解決，最簡單的給元素設置hasLayout值的方法是給加上CSS 的height或width(固然，zoom也能夠用，但這不是CSS的一部分)。好比設置爲height:1%。若是父元素沒有設置高度，那麼元素的物理高度並不會改變，可是，已經具有hasLayout屬性。

3、IE6下字符重複出現

確保浮動元素設置了 display:inline;

在浮動元素中使用 margin-right:-3px;

4、樣式優先級

1，內聯樣式 [1.0.0.0]
2，ID選擇器 [0.1.0.0]
3，類，屬性，僞類 選擇器 [0.0.1.0]
4，元素標籤，僞元素 選擇器 [0.0.0.1]

5、一個元素垂直居中的css寫法

#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;

height:100px;
margin-left:-100px;
margin-top:-52px;
}

6、zoom : normal | number
設置或檢索對象的縮放比例。設置或更改一個已被呈遞的對象的此屬性值將致使環繞對象的內容從新流動。雖然此屬性不可繼承，可是它會影響對象的全部子對象( children )。

7、圖片跟文字並排時, 要實現圖片文字垂直居中:

1> 將line-height:設置成圖片的高度,或者圖片父元素的高度.
2> 再將圖片的CSS設置vertical-align:middle;

8、li 元素中包含 a img 元素的時候，IE6下出現空白

解決方法 一

使 li 浮動，並設置 img 爲塊級元素

解決方法 二

設置 ul 的 font-size:0;

解決方法 三

設置 img 的 vertical-align: bottom;

解決方法 四

設置 img 的 margin-bottom: -5px;

細節3………………………………………………………………………………

1、被點擊訪問過的超連接樣式不在具備hover和active

解決方法：改變CSS屬性的排列順序: L-V-H-A

2、FF下連續長字段不能自動換行

解決方法：word-wrap:break-word;overflow:hidden;

3、FF下父容器高度不能自適應

解決辦法：清除子元素的浮動

4、IE下圖片下方產生空隙

解決辦法：定義img 爲display:block，或vertical-align爲top/bottom/middle/text-bottom

定義父容器的字體大小爲零，font-size:0

5、IE6下浮動元素和它相鄰的非浮動元素之間有3px空隙

解決辦法：相鄰的非浮動元素也設置浮動；

浮動元素相對IE6定義_margin-right:-3px;

6、LI內容超長後以省略號顯示

解決辦法： white-space:nowrap;(文本不換行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

7、文本不能垂直居中

解決辦法：行高和容器高度相等line-height=height；

8、文本輸入框和相鄰的文本不能對齊

解決辦法：設置文本輸入框vertical-align:middle;

9、IE設置滾動條樣式

解決辦法：

body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}

10、IE6沒法定義高度爲1px的容器

解決辦法：overflow:hidden

zoom:0.8

line-height:1px

細節4………………………………………………………………………………

1、讓層顯示在flash之上

解決辦法：給FLASH設置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

2、使一個層垂直居中瀏覽器中

解決辦法：使用百分比絕對定位，與外補丁負值的方法。

position:absolute;
top:50%;
left:50%;
margin:-100px auto auto -100px;
width:200px;
height:200px;

3、加入收藏夾

解決辦法：<script type="text/javascript">
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,"");
else if( window.opera && window.print ){
var mbm = document.create_r_rElement_x('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
</script>
<a href="bookmark()">加入收藏夾< /a>
細節5………………………………………………………………………………
1. 常見新聞列表的寫法：
<ul class="list">
<li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新聞標題01</a></li>
<li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新聞標題02</a></li>
<li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新聞標題03</a></li>
<li><span>2006年6月6日 </span><a href="http://www.52css.com/#">新聞標題04</a></li>
</ul>
2. IE實現頁面背景漸變（FF及chrome不支持）
從上到下：
body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}
左上至右下：
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue;}
從左至右
body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}
從上到下
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"
3. a hover的樣式實現多種效果，能夠靈活運用
#outer a { border:1px solid #069;}
#outer a:hover {border:1px dashed #c00;}
4. border:none;與border:0區別
理論上的性能差別:
border:0;把border設爲「0」像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。border:none;把border設爲「none」即沒有，瀏覽器解析「none」時將不做出渲染動做，即不會消耗內存值。
兼容性差別：
兼容性差別只針對瀏覽器IE六、IE7與標籤button、input而言，在win、win七、vista 的XP主題下均會出現此狀況。當border爲「none」時彷佛對IE6/7無效邊框依然存在,當border爲「0」時，感受比「none」更有效，全部瀏覽器都一致把邊框隱藏，
如何讓border:none;實現全兼容？只須要在同一選擇符上添加背景屬性便可
5.css實現多列等高佈局,正內邊距與負外邊距
給每一個須要實現等高的列應用樣式： .e{padding-bottom:32767px;margin-bottom:-32767px;}

6. position:relative;特殊用法？？？？
* {margin:0;padding:0;font:normal 12px/25px "宋體";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;url(***.gif ) center center no-repeat;}
a:hover {color:#000;url(***.gif ) 0 0 no-repeat;width:86px;position:relative;}


細節6………………………………………………………………………………


1。innerText：從起始位置到結束位置的內容，不包含標籤
innerHTML
outerHTML:包含innerHTML和標籤
<div id="test"><span>test1</span>test2</div>
test.innerText:test1 test2
test. innerHTML: <span>test1</span>test2
test. outerHTML: <div id="test"><span>test1</span>test2</div>
2。Number（）：任何包含非數字字符的字符串作參數時，結果爲NaN
parseInt():從左到右儘量多低把字符串轉化爲數字，直到遇到一個非數字時中止
isNaN():參數不是一個數字時，返回true;

3。a=23.50abc
typeof(a)=String
parseFloat(a)=23.5
parseInt(a)=23
Number(a)=NaN

4。JS變量名包含數字字母美圓符下劃線，不能以數字開頭

5。getElementsByTagName_r()須要等文檔加載完畢後才能獲取到

6。nodeType：共12種，1表示元素節點，3表示文本節點
nodeName：表示節點名稱，若是是文本節點，則表示#text
nodeValue：表示節點的值
eg: 獲取tagname爲li的節點if(obj.nodeName.toLowerCase()=='li'){}
改變P的文本內容  document.getElementsByTagName_r('p')[0].firstchild.nodeValue=''

7。父節點到子節點
childNodes：元素全部第一層子節點列表，不包括向下更深層次的子節點
obj.firstChild=obj.childNodes[0]
obj.lastChild=obj.childNodes[obj. childNodes.length-1 ]
hasChildNodes() 判斷元素是否有子節點，返回布爾值

7。子節點到父節點
var parentElm=myLinkItem.parentNode;
while(parentElm,className!=‘syna’&&parentElm!='document.body')
parentElm= parentElm. parentNode

8。修改元素屬性
1）以對象屬性的方式獲取或設置
var mainImage=document.getElementByIdx_x('nav').getElementsByTagName['img'][0];
mainImage.src='';
mainImage.alt='';
2)用getAttribute()和setAttribute()方法


細節7………………………………………………………………………………

1。將數字轉化爲擁有X位小數位的形式
function roundTo(base,precision)
{ var m=Math.pow(10,precision);
var a=Math.round(base*m)/m;
return a;
}
var n=3.942487;
roundTo(n,3)=3.942
roundTo(n,0)=3
2。建立受約束的隨機數
function randomBetween(min,max)
{ return min+Math.floor(Math.random()*(max-min+1))}
3。數字轉換爲字符串
var a=10;
a=String(a);/a=a.toString();
4。對url的編碼
var a="http://www.google.com/directoryname/?p=e";
var b=escape(a);
var c=(b);
5。改變文檔內元素的類型
p--->div
首先建立一個div元素，而後複製p的子節點到div中，最後再用div 替換p
6。一個函數須要多少參數
function add(n1,n2){}
return num=add.length;
7。一個函數傳入了多少參數
function add(n1,n2){
return arguments.length;}

細節8………………………………………………………………………………

1). display:inline-block;顧名思義，就是在內聯狀況下的塊狀，能夠設定高度寬度。

.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}

2).清理浮動

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.clearfix {zoom:1;}

3).在地址欄添加自定義圖標

首先，咱們須要預先製做一個圖標文件，大小爲16*16像素。文件擴展名爲ico，而後上傳到相應目錄中。在HTML源文件「<head></head>」之間添加以下代碼：<Link Rel=」ICON NAME」 href=」http://圖片的地址（注意與剛纔的目錄對應）」>，固然若是用戶使用IE5或以上版本瀏覽時，就更簡單了，只需將圖片上傳到網站根目錄下，便可自動識別！

4).在IE6中設置display:block的空容器一個較小高度時，如<p style=」height:1px;」></p>，會發現其高度不能小於某個值。解決方案：設置overflow:hidden。

5).文字用省略號截斷

div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程