web前端技巧整理(個(gè)人實(shí)戰(zhàn)經(jīng)驗(yàn))
發(fā)布時(shí)間:2013-11-05 16:11:59 作者:佚名
我要評(píng)論

web前端技巧有很多,比如在布局時(shí)會(huì)讓左側(cè)定右側(cè)自適應(yīng)以及左右定中間自適應(yīng)等等,下面有個(gè)不錯(cuò)的示例,大家可以參考下希望對(duì)大家有所幫助
1.今天在做一個(gè)頁(yè)面的時(shí)候碰到了箭頭居中的效果:由于想實(shí)現(xiàn)點(diǎn)擊區(qū)域很大所以用了padding-top:23%。但是在計(jì)算23%的時(shí)候出現(xiàn)了問題,經(jīng)過(guò)研究發(fā)現(xiàn):padding-top的百分比是根據(jù)期父元素的width而不是height來(lái)計(jì)算的,很奇怪吧?哪位大牛能給解釋下。
2.某個(gè)層加了浮動(dòng)后又加margin后在ie6下一定會(huì)出現(xiàn)雙倍邊距。----------解決方法是display:inline;(雖然知道,但是每次都忘)。
3.左側(cè)定寬右側(cè)自適應(yīng)+左右定寬中間自適應(yīng)的框架一定要會(huì)運(yùn)用,很多時(shí)候都會(huì)運(yùn)用上,
demo1(左側(cè)定右側(cè)自適應(yīng)):
<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雙列布局,左側(cè)定寬,右側(cè)自適應(yīng)</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
demo2(左右定中間自適應(yīng)):
<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雙列布局,左側(cè)定寬,右側(cè)自適應(yīng)</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
4.在ie6下插入圖片時(shí)候用img標(biāo)簽會(huì)有img下會(huì)有幾個(gè)像素的空白會(huì)導(dǎo)致你跟設(shè)計(jì)稿做的東西不一樣(會(huì)被主管火眼看出來(lái)然后挨罵)---解決辦法是將img變成塊級(jí)元素;display:block;
5.讓文本在塊內(nèi)垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二個(gè)比第一個(gè)好用,具體我也不知道為什么。
6.a標(biāo)簽的lvha不是很常用,但是一定會(huì)用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截?cái)嗖粨Q行貌似很常用(這幾天天天用):white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(換行為:word-wrap:break-word;)
8.清除浮動(dòng)的方法很多,這幾天主要用的三種:1)clear:both;2)overflow:hidden;3).我的指導(dǎo)人最愛用的:#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠標(biāo)手勢(shì)有的時(shí)候在ie下會(huì)消失,這個(gè)情況這兩天也出現(xiàn)過(guò)幾次。----------------解決辦法是corsor:pointer;(注意不能是hand--指導(dǎo)人特別提醒)
10.定義一個(gè)只有2像素的高度的容器的時(shí)候在ie6下會(huì)有bug--解決方法是將各種屬性清零,尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下會(huì)不起作用---解決辦法是_width:*;(上個(gè)周遇到過(guò)這個(gè)問題)
12.!important 規(guī)則--以前從來(lái)沒用過(guò)這個(gè)屬性,直到前天主管看我的代碼時(shí)候提醒我在一個(gè)頁(yè)面響應(yīng)式的時(shí)候后來(lái)的width會(huì)覆蓋本身的width:100%;所以要加width:100%!important;
13.清除浮動(dòng)非常非常重要---比如有的時(shí)候容器無(wú)法自適應(yīng)高度你就要用到它的!??!
14.點(diǎn)擊文字的時(shí)候也會(huì)點(diǎn)擊上單選框或者復(fù)選框了比如csdn的這個(gè)功能: 方法是用lable包住單選框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。
2.某個(gè)層加了浮動(dòng)后又加margin后在ie6下一定會(huì)出現(xiàn)雙倍邊距。----------解決方法是display:inline;(雖然知道,但是每次都忘)。
3.左側(cè)定寬右側(cè)自適應(yīng)+左右定寬中間自適應(yīng)的框架一定要會(huì)運(yùn)用,很多時(shí)候都會(huì)運(yùn)用上,
demo1(左側(cè)定右側(cè)自適應(yīng)):
復(fù)制代碼
代碼如下:<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雙列布局,左側(cè)定寬,右側(cè)自適應(yīng)</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; }
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#middle { width:100%; height:200px; background:#F00; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
</div>
<div id="footer">footer</div>
</body>
</html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
demo2(左右定中間自適應(yīng)):
復(fù)制代碼
代碼如下:<span style="font-size:14px"><span style="font-family:'Microsoft YaHei'"> </span><span style="font-family:'Microsoft YaHei'"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>雙列布局,左側(cè)定寬,右側(cè)自適應(yīng)</title>
<style>
html,body{ height:100%; margin:0px; padding:0px; }
#header { width:100%; height:20px; background:#CCC; }
#footer { width:100%; height:20px; background:#CCC; }
#main { padding-left: 200px; padding-right: 200px;}
#left { width:200px; height:200px; position:absolute; left:0; background:#FF0;}
#right { width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}
#middle { width:100%; height:200px; background:#F00; float:left;}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
<html></span><span style="font-family:'Microsoft YaHei'">
</span></span>
4.在ie6下插入圖片時(shí)候用img標(biāo)簽會(huì)有img下會(huì)有幾個(gè)像素的空白會(huì)導(dǎo)致你跟設(shè)計(jì)稿做的東西不一樣(會(huì)被主管火眼看出來(lái)然后挨罵)---解決辦法是將img變成塊級(jí)元素;display:block;
5.讓文本在塊內(nèi)垂直的方法是:1).vertical-align:middle.2).line-height:***; -------------一般的第二個(gè)比第一個(gè)好用,具體我也不知道為什么。
6.a標(biāo)簽的lvha不是很常用,但是一定會(huì)用:a:link{} a:visited{};a:hover{}a:active{}
7.文本截?cái)嗖粨Q行貌似很常用(這幾天天天用):white-space:nowrap;overflow:hidden;text-overflow:ellipsis;(換行為:word-wrap:break-word;)
8.清除浮動(dòng)的方法很多,這幾天主要用的三種:1)clear:both;2)overflow:hidden;3).我的指導(dǎo)人最愛用的:#a:after{display:block;clear:both;visibility:hidden;height:0;content'.';}
9.鼠標(biāo)手勢(shì)有的時(shí)候在ie下會(huì)消失,這個(gè)情況這兩天也出現(xiàn)過(guò)幾次。----------------解決辦法是corsor:pointer;(注意不能是hand--指導(dǎo)人特別提醒)
10.定義一個(gè)只有2像素的高度的容器的時(shí)候在ie6下會(huì)有bug--解決方法是將各種屬性清零,尤其是font-size:0;height:0;line-height:0;
11.max-width在ie6下會(huì)不起作用---解決辦法是_width:*;(上個(gè)周遇到過(guò)這個(gè)問題)
12.!important 規(guī)則--以前從來(lái)沒用過(guò)這個(gè)屬性,直到前天主管看我的代碼時(shí)候提醒我在一個(gè)頁(yè)面響應(yīng)式的時(shí)候后來(lái)的width會(huì)覆蓋本身的width:100%;所以要加width:100%!important;
13.清除浮動(dòng)非常非常重要---比如有的時(shí)候容器無(wú)法自適應(yīng)高度你就要用到它的!??!
14.點(diǎn)擊文字的時(shí)候也會(huì)點(diǎn)擊上單選框或者復(fù)選框了比如csdn的這個(gè)功能: 方法是用lable包住單選框或者用lable for“id”。
15.display:none--------消失不占位置。visibility:hidden;--------------消失后占位置。
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書以及編程練習(xí),希望對(duì)你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長(zhǎng)度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁(yè)前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁(yè)開發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來(lái)做項(xiàng)目開發(fā)使用是一件很重要的事情??!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21html,css,javascript是怎樣變成頁(yè)面的
瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁(yè)面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁(yè)中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱為Unicode,是通用字符集Universal Character Set的縮寫,用以滿足跨語(yǔ)言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-12-02告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27