網(wǎng)頁(yè)設(shè)計(jì)中HTML代碼、CSS代碼和javascript的技巧和細(xì)節(jié)
發(fā)布時(shí)間：2012-06-09 09:28:00 作者：佚名 
我要評(píng)論
我要評(píng)論本文總結(jié)了網(wǎng)頁(yè)設(shè)計(jì)中的HTML技巧,CSS技巧和JAVASCRIPT技巧
細(xì)節(jié)1………………………………………………………………………………
一、當(dāng)文字與圖片在一行，需要將文字與圖片底對(duì)齊，需要這樣寫(xiě)：
<li>記住密碼<img src="" align="bottom" style="margin-bottom:-4px"/></li>
二、當(dāng)文字與圖片在一行，需要將文字與圖片居中對(duì)齊，需要這樣寫(xiě)：
<li>記住密碼<img src="static/img/xyx.jpg" align="middle"/></li>
三、更改IE“查看源代碼”菜單打開(kāi)的編輯器
打開(kāi)注冊(cè)表編輯器,在開(kāi)始-運(yùn)行中輸入regedit
找到以下位置： HKEY_LOCAL_MACHINE"SOFTWARE"Microsoft"Internet Explorer"View SourceEditor"Editor Name"修改默認(rèn)的數(shù)據(jù)為"D:"Program Files"EmEditor"EmEditor.exe"
切換到IE中查看源代碼就可以看到效果了。
如果View Source Editor"Editor Name項(xiàng)沒(méi)有,可以自己新建。
四、自動(dòng)最大化窗口，在 <body> 與 </body> 之間加入：
復(fù)制代碼
代碼如下:<SCRIPT language="javascript">
setTimeout('top.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
</script>
五、window.opener 實(shí)際上就是用window.open打開(kāi)的窗體的父窗體。
比如在父窗體parentForm里面 通過(guò) window.open("subForm.html"),那么在subform.html中 window.opener
就代表parentForm,可以通過(guò)這種方式設(shè)置父窗體的值或者調(diào)用js方法。
1,window.opener.test(); ---調(diào)用父窗體中的test()方法；
2,如果window.opener存在,設(shè)置parentForm中stockBox的值。
復(fù)制代碼
代碼如下:if (window.opener && !window.opener.closed)
{
window.opener.document.parentForm.stockBox.value = symbol;
}
六、刷新頁(yè)面的方法
Javascript刷新頁(yè)面的方法：
復(fù)制代碼
代碼如下: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
自動(dòng)刷新頁(yè)面的方法:
1.頁(yè)面自動(dòng)刷新：把<meta http-equiv="refresh" content="20">加入<head>區(qū)域中
2.頁(yè)面自動(dòng)跳轉(zhuǎn)：把<meta http-equiv="refresh" content="20;url=http://www.webjx.com">加入<head>區(qū)域中
3.js自動(dòng)刷新頁(yè)面
復(fù)制代碼
代碼如下:<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
4.JS刷新框架
a)刷新包含該框架的頁(yè)面用
<script language=JavaScript>
parent.location.reload();
</script>
b)子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a> )
c)刷新另一個(gè)框架的頁(yè)面
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
七、用過(guò)CSS hack應(yīng)該知道，用下劃線命名是一種hack，如使用“_style”這樣的命名，可以讓IE外的大部分瀏覽器忽略這個(gè)樣式的定義，所以使用“_”做為命名時(shí)的分隔符是不規(guī)范的。在做CSS檢查時(shí)會(huì)出現(xiàn)錯(cuò)誤提示。
八、IE條件注釋寫(xiě)法
復(fù)制代碼
代碼如下:<!--[if !IE]>除IE外都可識(shí)別<![endif]-->
<!--[if IE]> 所有的IE可識(shí)別 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以識(shí)別 <![endif]-->
九、CSS HACK 寫(xiě)法
第一種：
復(fù)制代碼
代碼如下:.div {
background:orange;
*background:green !important;
*background:blue;
}
第二種：
復(fù)制代碼
代碼如下:.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三種：
復(fù)制代碼
代碼如下:#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }
細(xì)節(jié)2………………………………………………………………………………
一、IE6及以下不識(shí)別a 標(biāo)簽外的:hover偽類(lèi)，在火狐，IE7里能正確達(dá)到效果，解決辦法：
復(fù)制代碼
代碼如下:#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
<li></li>
二、為元素設(shè)置hasLayout
很多IE6（或IE7）的問(wèn)題可以用設(shè)置hasLayout值的方法來(lái)解決，最簡(jiǎn)單的給元素設(shè)置hasLayout值的方法是給加上CSS 的height或width(當(dāng)然，zoom也可以用，但這不是CSS的一部分)。比如設(shè)置為height:1%。如果父元素沒(méi)有設(shè)置高度，那么元素的物理高度并不會(huì)改變，但是，已經(jīng)具備hasLayout屬性。
三、IE6下字符重復(fù)出現(xiàn)
確保浮動(dòng)元素設(shè)置了 display:inline;
在浮動(dòng)元素中使用 margin-right:-3px;
四、樣式優(yōu)先級(jí)
1，內(nèi)聯(lián)樣式 [1.0.0.0]
2，ID選擇器 [0.1.0.0]
3，類(lèi)，屬性，偽類(lèi) 選擇器 [0.0.1.0]
4，元素標(biāo)簽，偽元素 選擇器 [0.0.0.1]
五、一個(gè)元素垂直居中的css寫(xiě)法
復(fù)制代碼
代碼如下:#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}
六、zoom : normal | number
設(shè)置或檢索對(duì)象的縮放比例。設(shè)置或更改一個(gè)已被呈遞的對(duì)象的此屬性值將導(dǎo)致環(huán)繞對(duì)象的內(nèi)容重新流動(dòng)。雖然此屬性不可繼承，但是它會(huì)影響對(duì)象的所有子對(duì)象( children )。
七、圖片跟文字并排時(shí), 要實(shí)現(xiàn)圖片文字垂直居中:
1> 將line-height:設(shè)置成圖片的高度,或者圖片父元素的高度.
2> 再將圖片的CSS設(shè)置vertical-align:middle;
八、li 元素中包含 a img 元素的時(shí)候，IE6下出現(xiàn)空白
解決方法 一
使 li 浮動(dòng)，并設(shè)置 img 為塊級(jí)元素
解決方法 二
設(shè)置 ul 的 font-size:0;
解決方法 三
設(shè)置 img 的 vertical-align: bottom;
解決方法 四
設(shè)置 img 的 margin-bottom: -5px;
細(xì)節(jié)3………………………………………………………………………………
一、被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active
解決方法：改變CSS屬性的排列順序: L-V-H-A
二、FF下連續(xù)長(zhǎng)字段不能自動(dòng)換行
解決方法：word-wrap:break-word;overflow:hidden;
三、FF下父容器高度不能自適應(yīng)
解決辦法：清除子元素的浮動(dòng)
四、IE下圖片下方產(chǎn)生空隙
解決辦法：定義img 為display:block，或vertical-align為top/bottom/middle/text-bottom
定義父容器的字體大小為零，font-size:0
五、IE6下浮動(dòng)元素和它相鄰的非浮動(dòng)元素之間有3px空隙
解決辦法：相鄰的非浮動(dòng)元素也設(shè)置浮動(dòng)；
浮動(dòng)元素相對(duì)IE6定義_margin-right:-3px;
六、LI內(nèi)容超長(zhǎng)后以省略號(hào)顯示
解決辦法： white-space:nowrap;(文本不換行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
七、文本不能垂直居中
解決辦法：行高和容器高度相等line-height=height；
八、文本輸入框和相鄰的文本不能對(duì)齊
解決辦法：設(shè)置文本輸入框vertical-align:middle;
九、IE設(shè)置滾動(dòng)條樣式
解決辦法：
復(fù)制代碼
代碼如下: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;
}
十、IE6無(wú)法定義高度為1px的容器
解決辦法：overflow:hidden
zoom:0.8
line-height:1px
細(xì)節(jié)4………………………………………………………………………………
一、讓層顯示在flash之上
解決辦法：給FLASH設(shè)置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
二、使一個(gè)層垂直居中瀏覽器中
解決辦法：使用百分比絕對(duì)定位，與外補(bǔ)丁負(fù)值的方法。
復(fù)制代碼
代碼如下:position:absolute;
top:50%;
left:50%;
margin:-100px auto auto -100px;
width:200px;
height:200px;
三、加入收藏夾
解決辦法：<script type="text/javascript">
復(fù)制代碼
代碼如下:// <![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="javascript:bookmark()">加入收藏夾</a>
細(xì)節(jié)5………………………………………………………………………………
1.常見(jiàn)新聞列表的寫(xiě)法：
復(fù)制代碼
代碼如下:<ul class="list">
<li><span>2006年6月6日 </span><a href="http://dhdzp.com/#">新聞標(biāo)題01</a></li>
<li><span>2006年6月6日 </span><a href="http://dhdzp.com/#">新聞標(biāo)題02</a></li>
<li><span>2006年6月6日 </span><a href="http://dhdzp.com/#">新聞標(biāo)題03</a></li>
<li><span>2006年6月6日 </span><a href="http://dhdzp.com/#">新聞標(biāo)題04</a></li>
</ul>
2.IE實(shí)現(xiàn)頁(yè)面背景漸變（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的樣式實(shí)現(xiàn)多種效果，可以靈活運(yùn)用
#outer a { border:1px solid #069;}
#outer a:hover {border:1px dashed #c00;}
4.border:none;與border:0區(qū)別
理論上的性能差異:
border:0;把border設(shè)為“0”像素雖然在頁(yè)面上看不見(jiàn)，但按border默認(rèn)值理解，瀏覽器依然對(duì)border-width/border-color進(jìn)行了渲染，即已經(jīng)占用了內(nèi)存值。border:none;把border設(shè)為“none”即沒(méi)有，瀏覽器解析“none”時(shí)將不作出渲染動(dòng)作，即不會(huì)消耗內(nèi)存值。
兼容性差異：
兼容性差異只針對(duì)瀏覽器IE6、IE7與標(biāo)簽button、input而言，在win、win7、vista 的XP主題下均會(huì)出現(xiàn)此情況。當(dāng)border為“none”時(shí)似乎對(duì)IE6/7無(wú)效邊框依然存在,當(dāng)border為“0”時(shí)，感覺(jué)比“none”更有效，所有瀏覽器都一致把邊框隱藏，
如何讓border:none;實(shí)現(xiàn)全兼容？只需要在同一選擇符上添加背景屬性即可
5.css實(shí)現(xiàn)多列等高布局,正內(nèi)邊距與負(fù)外邊距
給每個(gè)需要實(shí)現(xiàn)等高的列應(yīng)用樣式：.e{padding-bottom:32767px;margin-bottom:-32767px;}
6.position:relative;特殊用法？？？？
復(fù)制代碼
代碼如下:* {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;background:url(***.gif) center center no-repeat;}
a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}
細(xì)節(jié)6………………………………………………………………………………
1。innerText：從起始位置到結(jié)束位置的內(nèi)容，不包含標(biāo)簽 innerHTML
復(fù)制代碼
代碼如下:outerHTML:包含 innerHTML和標(biāo)簽
<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（）：任何包含非數(shù)字字符的字符串做參數(shù)時(shí)，結(jié)果為NaN
parseInt():從左到右盡可能多低把字符串轉(zhuǎn)化為數(shù)字，直到遇到一個(gè)非數(shù)字時(shí)停止
isNaN():參數(shù)不是一個(gè)數(shù)字時(shí)，返回true;
3。a=23.50abc
復(fù)制代碼
代碼如下:typeof(a)=String
parseFloat(a)=23.5
parseInt(a)=23
Number(a)=NaN
4。JS變量名包含數(shù)字字母美元符下劃線，不能以數(shù)字開(kāi)頭
5。getElementsByTagName_r()需要等文檔加載完畢后才能獲取到
6。nodeType：共12種，1表示元素節(jié)點(diǎn)，3表示文本節(jié)點(diǎn)
nodeName：表示節(jié)點(diǎn)名稱(chēng)，如果是文本節(jié)點(diǎn)，則表示#text
nodeValue：表示節(jié)點(diǎn)的值
eg: 獲取tagname為li的節(jié)點(diǎn)if(obj.nodeName.toLowerCase()=='li'){}
改變P的文本內(nèi)容 document.getElementsByTagName_r('p')[0].firstchild.nodeValue=''
7。父節(jié)點(diǎn)到子節(jié)點(diǎn)
childNodes：元素所有第一層子節(jié)點(diǎn)列表，不包括向下更深層次的子節(jié)點(diǎn)
obj.firstChild=obj.childNodes[0]
obj.lastChild=obj.childNodes[obj.childNodes.length-1]
hasChildNodes() 判斷元素是否有子節(jié)點(diǎn)，返回布爾值
8。子節(jié)點(diǎn)到父節(jié)點(diǎn)
var parentElm=myLinkItem.parentNode;
while(parentElm,className!=‘syna’&&parentElm!='document.body')
parentElm=parentElm.parentNode
9。修改元素屬性
1）以對(duì)象屬性的方式獲取或設(shè)置
復(fù)制代碼
代碼如下:var mainImage=document.getElementByIdx_x('nav').getElementsByTagName['img'][0];
mainImage.src='';
mainImage.alt='';
2)用getAttribute()和setAttribute()方法
細(xì)節(jié)7………………………………………………………………………………
1。將數(shù)字轉(zhuǎn)化為擁有X位小數(shù)位的形式function roundTo(base,precision)
復(fù)制代碼
代碼如下:{ 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。創(chuàng)建受約束的隨機(jī)數(shù)
復(fù)制代碼
代碼如下:function randomBetween(min,max)
{ return min+Math.floor(Math.random()*(max-min+1))}
3。數(shù)字轉(zhuǎn)換為字符串
復(fù)制代碼
代碼如下:var a=10;
a=String(a);/a=a.toString();
4。對(duì)url的編碼
復(fù)制代碼
代碼如下:var a="http://www.google.com/directoryname/?p=e";
var b=escape(a);
var c=(b);
5。改變文檔內(nèi)元素的類(lèi)型
p--->div
首先創(chuàng)建一個(gè)div元素，然后復(fù)制p的子節(jié)點(diǎn)到div中，最后再用div 替換p
6。一個(gè)函數(shù)需要多少參數(shù)
復(fù)制代碼
代碼如下:function add(n1,n2){}
return num=add.length;
7。一個(gè)函數(shù)傳入了多少參數(shù)
復(fù)制代碼
代碼如下:function add(n1,n2){
return arguments.length;}
細(xì)節(jié)8………………………………………………………………………………
1). display:inline-block;顧名思義，就是在內(nèi)聯(lián)情況下的塊狀，可以設(shè)定高度寬度。
復(fù)制代碼
代碼如下:.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).清理浮動(dòng)
復(fù)制代碼
代碼如下:.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix {zoom:1;}
3).在地址欄添加自定義圖標(biāo)
首先，我們需要預(yù)先制作一個(gè)圖標(biāo)文件，大小為16*16像素。文件擴(kuò)展名為ico，然后上傳到相應(yīng)目錄中。在HTML源文件“<head></head>”之間添加如下代碼：<Link Rel=”ICON NAME” href=”http://圖片的地址（注意與剛才的目錄對(duì)應(yīng)）”>，當(dāng)然如果用戶使用IE5或以上版本瀏覽時(shí)，就更簡(jiǎn)單了，只需將圖片上傳到網(wǎng)站根目錄下，即可自動(dòng)識(shí)別！
4). 在IE6中設(shè)置display:block的空容器一個(gè)較小高度時(shí)，如<p style=”height:1px;”></p>，會(huì)發(fā)現(xiàn)其高度不能小于某個(gè)值。
解決方案：設(shè)置overflow:hidden。
5).文字用省略號(hào)截?cái)?
復(fù)制代碼
代碼如下:div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
相關(guān)文章
AudioContext 實(shí)現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實(shí)現(xiàn)音頻可視化，要實(shí)現(xiàn)音頻可視化得先實(shí)現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面詳細(xì)內(nèi)容2022-02-23
這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流，文章內(nèi)容圍繞主題展相關(guān)資料，需要的小伙伴可以參考一下，希望對(duì)你有所幫助2022-02-23- 這是我通過(guò)網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范，用于鞏固對(duì)html，css頁(yè)面重構(gòu)時(shí)的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開(kāi)發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開(kāi)發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開(kāi)發(fā)協(xié)作，提高代碼質(zhì)量和打造開(kāi)發(fā)基石的編碼風(fēng)格規(guī)范，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道，當(dāng)一個(gè)團(tuán)隊(duì)開(kāi)始指定并實(shí)行2017-01-21web前端開(kāi)發(fā)規(guī)范文檔(2014年版本)
這篇文章主要為大家介紹了前端開(kāi)發(fā)團(tuán)隊(duì)遵循和約定的代碼書(shū)寫(xiě)規(guī)范，意在提高代碼的規(guī)范性和可維護(hù)性,需要的朋友可以參考下2017-01-21響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁(yè)標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實(shí)現(xiàn)方法。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0，但是有安裝vtp6.0經(jīng)驗(yàn)的朋友確很少，在安裝過(guò)程中總會(huì)出現(xiàn)這樣那樣的問(wèn)題，基于這些問(wèn)題，下面小編抽個(gè)時(shí)間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29
