追求卓越一諾千金

藍藍設計_-254彩票,2011年成立|铲形币是哪个国家的,主創清華團隊_|-维加网,專注軟件和互聯網ui設計開發-|-西安烟草网上订货。擅長企業信息化管理__11选5投注平台、監控_-_3218彩城、大數據軟件UIUE谘詢和設計開發服務_-_chc动作电影。立足UI_|k7k7k7k,好好學習_朱晓东 我型我秀 杀妻,天天進步||盈众彩票信誉怎么样!


能用HTML/CSS解決的問題就不要使用JS

2016-9-29 藍藍 前端及開發文章及欣賞


如果您想訂閱本博客內容--nba2k online3分技巧,每天自動發到您的郵箱中|_深圳网吧牌照, 請點這裏

為什麼說能使用html/css解決的問題就不要使用JS呢-晴儿图片?兩個字|||最新钓鱼用具,因為簡單__河北职称信息管理系统。簡單就意味著更快的開發速度|--众彩彩票彩票兼营,更小的維護成本-_discoverybuy,同時往往具有更好的體驗cctv6 直播,下麵介紹幾個實例易中彩票骗局。

1. 導航高亮

導航高亮是一種很常見的問題||花雨伞包包,包括當前頁麵的導航在菜單裏麵高亮和hover時高亮-_|宝贝鱼翻译。你可以用js控製_|-神奇魔轮,但是用一點CSS技巧就可以達到這個目的-中视购物网,不需要使用JS-亿博娱乐彩票是骗局吗。

1.png

2.png

在正常態時_nod32激活码网络之窗论坛,每個導航的默認樣式為_|易投彩票:

nav li{ opacity: 0.5;
}

當前頁麵的導航透明度為1. 為了實現這個目的_|fps什么意思:

首先通過body給不同的頁麵添加不同的類|苏州地税局网站,用來標誌不同的頁麵

<!-- home.html --> <body class="home"></body> <!-- buy.html --> <body class="buy"></body>

所有的li也用class標誌|_招商银行济南分行,為了有一個一一對應的關係-|盈彩彩票怎么注册:

<li class="home">home</li> <li class="buy">buy</li>

然後就可以設置當前頁麵的樣式---角竹光寿猜一成语,覆蓋掉默認的樣式|-内库:

body.home nav li.home, body.buy nav li.buy{ opacity: 1;
}

這樣子_-云顶娱乐怎样注册账号,如果當前頁麵是home-|中兴福彩,則body.home na li.home這條規則生效||刘春天膏方网,home的導航將高亮

這個技藝在《精通CSS》這種書裏麵有提及|-|力证逍遥。如果你用js控製--_赢彩网是哪年成立的,那麼在腳本加載好之前__阿福购物网,當前頁麵是不會高亮的|-花都区教育局地址,而腳本加載好之後突然就高亮了|_|智彩11选5走势图。所以用js吃力不討好_|亿彩彩票安卓app。

hover時的高亮-|美丽霸道的授课老师,可以用css的:hover選擇器_-|阿列克斯 加西亚:

nav li:hover{ opaciy: 1;
}

加上:hover選擇器的優先級將會高於原本的-盈彩彩票网,鼠標hover的時候將會覆蓋默認樣式|_1288彩票骗局,即高亮--_重庆ume电影院。

你也可以用mouse事件||二十二选五,mouseover的時候添加一個類高中研究性学习报告,mouseleave的時候移除掉這個類_|芙蓉树下博客,這樣就變複雜了-|_北京爱情故事吕夏,用CSS甚至可以兼容不支持JS的瀏覽器---徐娇个人资料,用戶可能把瀏覽器的js禁掉了_-龙洞堡机场。我一個純展示的靜態頁麵_王恒升,為啥要寫js呢_注册彩票送体验金,是吧_|阳光工资标准。

注意這個hover選擇器特別好用--bt核电站,幾乎適用於所有需要用鼠標懸浮時顯示的場景_|_运盛彩票手机版本。

2. 鼠標懸浮時顯示

鼠標懸浮的場景十分常見|__砍死群主,例如導航的菜單|-365彩票国际电话:

3.png

以及在《Google地圖開發總結》一文提到的___宝塔镇河妖下一句,marker詳情框的顯示--金色前程幼儿园:

4.png

一般要把隱藏的東西如菜單作為hover目標的子元素或者相鄰元素_|银山智人,才方便用css控製-_|金箍棒手机铃声下载,例如上麵的菜單__汤唯在韩国视频,是把menu當作導航的一個相鄰元素-__行尸走肉第六季:

<li class="user">用戶</li> <li class="menu"> <ul> <li>賬戶設置</li> <li>登出</li> </ul> </li>

menu在正常態下是隱藏的_-广东高职院校排名:

.menu{ display: none;
}

而當導航hover時顯示|_-云顶国际彩票:

.user:hover + .menu{ display: list-item;
}

注意這裏使用了一個相鄰選擇器_-_汉草荟灵芝养生壶,這也是上麵說的為什麼要寫成相鄰的元素_-盈盈彩票网址是多少。menu的位置可以用absolute定位-_|大庆信息港庆聊。

同時menu自已本身hover的時候也要顯示--锅盔牙子,否則鼠標一離開導航的時候||_安卓电子书,菜單就消失了-惠普5200打印机驱动:

.menu:hover{ display: list-item;
}

這裏會有一個小問題||_借一个身份证号,即menu和導航需要挨著一起_|_尊彩app下载苹果,否則中間有空隙的話_花都合和新城,上麵添加的菜單hover就不能發揮作用了__金池 后知后觉,但是實際情況下從美觀的角度__链家司歌歌词,兩者是要有點距離的--|船位船讯网。這個其實也好解決|-|1千期无错杀码公式,隻要在menu上麵再畫一個透明的區域就好了|||365天天彩票是正规的吗,如下藍色的方塊|易中彩票网站靠谱吗:

5.png

可以用before/after偽類用absoute定位實現--清梦无痕2:

ul.menu:before{ content: ""; position: absolute; left: 0; top: -20px; width: 100%; height: 20px; /*background-color: rgba(0,0,0,0.2);*/ }

如果我既寫了css的hover_|-威尔刚多少钱,又監聽了mouse事件-_孝感学院新技术学院教务管理系统,用mouse控製顯示隱藏||-绿酷高,雙重效果會有什麼情況發生_-|芦山县委书记被免职,如果按正常套路_||中国气象频道,在mouse事件裏麵hover的時候__玉子金童,添加了一個display: block的style_|杜兰特3代战靴,會覆蓋掉CSS的設置_happytogetherfx。也就是說|-聚餐团购,隻要hover一次-__陈冠希张柏芝图片,css的代碼就不管用了_|撒旦缠爱,因為內聯樣式的優先級會高於外鏈的腾翼c70何时上市。但是實際情況下會有意外發生-|ups快递招聘,那就是在移動端iphone上麵-|-1号站平台,觸摸會觸發CSS的hover_-|新劳动合同法全文,並且這個的觸發會很高概率地先於touchstart事件--云购彩票网站是骗局吗,在這個事件裏麵會判斷當前是顯示還是隱藏的狀態-_|防爆机器人布里茨,由於css的hover發揮了作用|_耳鸣466专家,所以判斷為顯示--北京市市委书记是谁,然後又把它隱藏了_|_盈彩平台提不出钱来。也就是說-__长安街英菲尼迪,點一次不出來_-青年宫影讯,要點兩次|_苦行僧歌词。所以最好別兩個同時寫|--动感地带情侣套餐。

第二種場景___订房电话,使用子元素|_诺基亚 3110c,這個更簡單__快视影音。把hover的目標和隱藏的對象當作同一個父容器的子元素_众发哪里下载,然後hover寫在這個父容器上麵就可以了|-_约彩怎么注册不了,不用像上麵那樣_-瑞丽裳电子杂志,隱藏元素也要寫個hover||兔瓣影院:

.marker-container .detail-info{ display: none
} .marker-container:hover .detail-info{ display: block
}

3. 自定義radio/checkbox的樣式

我們知道__-许喵喵mickey,使用原生的radio/checkbox是不可以改變它的樣式的--中国股神江林的博客,得自己用div/span去畫|||新浪博客登录,然後再去監聽點擊事件-突泉信息港。但是這樣需要自己去寫邏輯控製-_横扫天下升阶数据,例如radio隻能選一個的功能__-15分时时彩,另一個是沒有辦法使用change事件|运盛彩票8801。就是沒有用原生的方便|-_镇赉吧。

但是實際上可以用一點CSS3的技巧實現自定義的目的|_106上买的彩票是真的吗,如下||_1069视频库gv,就是用原生實現的radio|_|n73主题:

6.gif

這個主要是借助了CSS3提供的一個偽類:checkd|365天天彩票是不是真的,隻要radio/checkbox是選中狀態_-例外包包官网,這個偽類就會生效_||优彩app是真的吗?,因此可以利用選中和非選中的這兩種狀態_|_诺基亚x202,去切換不同的樣式|梁笙和沈言 卫生间。如下把一個checkbox和一個用來自定義樣式的span寫在一個label裏麵--118彩宝彩票安卓手机,checkbox始終隱藏_||双鹿空调故障代码:

<style> input[type=checkbox]{ display: none;
} /*未選中的checkbox的樣式*/ .checkbox{

} </style> <label> <input type="checkbox"> <span class="checkbox"></span> </label>

寫在label裏麵是為了能夠點擊span的時候改變checkbox的狀態_-_因为固件不兼容,然後再改一下選中態的樣式即可-yanhee减肥药的成分:

input[type=checkbox]:checked + .checkbox{

}

關鍵在於這一步|_金寨房屋出租,添加一個打勾的背景圖也好_诗兰百丽,使用圖標字體也好|大话腐女2。

:checked兼容性還是比較好的|_完美国际汐族任务,隻要你不用兼容IE8就可以使用_-_河南大象网,或者說隻要你可以用nth-of-type-|盈彩网app,就可以用:checked

4. 多列等高

多列等高的問題是這樣的__库粉乐园,排成一行的幾列由於內容長短不一致_|盈彩网登录,導致容器的高度不一致_-金华职业教务网:

7.png

你可以用js算一下|-诛仙推广员id,以最高的一列的高度去設置所有列的高度|_长虹v7报价,然而這個會造成頁麵閃動___优彩彩票注册,剛開始打開頁麵的時候高度不一致-__钢八连,然後發現突然又對齊了-_铜皮规格。這個解決辦法主要有兩種__01彩票APp是不是正规的:

第一種是每列來一個很大的padding-|-易旺彩票论坛,再來一個很大的負的margin值矯正回去|-lb是什么单位,就對齊了-||诺基亚5320xm软件下载,如下-众购彩票导航网:

<style> .wrapper > div{ float: left; padding-bottom: 900px; margin-bottom: -880px; background-color: #ececec; border: 1px solid #ccc;
    } </style> <div class="wrapper"> <div>column 1</div> <div>column 2</div> <div>column 3</div> <div>column 4</div> </div>

效果如下-||普莱达手机官网:

8.png

你會發現--105彩票是哪个公司的,這個對齊是對齊了_-七彩尾房超市,但是底部的border沒有了|_|沈阳调料批发市场,設置的圓角也不起作用了|银河赌博的网址,究其原因||创维酷开液晶电视,是因為設置了一個很大的padding值|-_11选5平台,導致它的高度變得很大村姑图片,如上圖所示||索爱刷机软件。所以如果你想在底部absolute定位放一個鏈接”更多>>”也是實現不了了_-_陈秋石。

第二種辦法是借助table的自適應特性 __iphone5香港官网,每個div都是一個td-|_金立gn105怎么样,td肯定是等高的_|新五丰u鲜,html結構不變__|苏州园区车祸,CSS改一下|鹿喜微七天断食:

.wrapper{ display: table; border-spacing: 20px; /* td間的間距*/ } .wrapper > div { display: table-cell; width: 1000px; /*設置很大的寬度-_|美生美时,table自動平分寬度 */ border-radius: 5px; /*這裏設置圓角就正常了*/ }

對齊效果如下|-苹果范冰冰迅雷下载:

9.png

這樣還有一個好處-_-脸上长钩子,就是在響應式開發的時候-|_糗友窝,可以借助媒體查詢動態地改變display的屬性-_花都合和新城,從而改它排列的方式--|cces快递查询单号。例如在小於500px時|_135彩票开奖,每一列占滿一行|1号彩票网APP,那麼隻要把display: table-cell覆蓋掉就好了--花境平面图:

@media (max-width: 500px){ .wrapper{ display: block;
    } .wrapper > div{ display: block; width: 100%;
    }
}

效果如下所示|-_刺影辅助免费版:

10.png

如果在pad 1024px的設備上|||佐研,希望一行顯示2個_梦幻诛仙蛙腿点心,那應該怎麼辦呢_|腾讯公司最近有抽奖活动吗?由於上麵用的td|_-038彩票赌博,必定會排在同一行|-1995反水05彩票网。其實可以在第二個和第三個中間加一個tr_|成都工商局网上年检,讓它換行-_中华图书人:

<div class="wrapper"> <div>column 1</div> <div>column 2</div> <span class="tr"></span> <div>column 3</div> <div>column 4</div> </div>

在大屏和小屏時-|-psp游戏王gx3,tr是不顯示的__皇女的踪迹,而在中屏時__永城彩票官网,tr顯示_盈彩国际微信群:

.tr{ display: none;
}

@media (max-width: 1024px) and (min-width: 501px){ .tr{ display: table-row;
    }
}

就能夠實現在小屏時一行排兩列了艺龙团购后台,隻是這個有個小問題---长江教育网频道,就是在中屏拉到大屏的時候tr的dipslay: none已經沒有什麼作用-|_朱云来老婆,因為table的布局已經計算好||河南大象网。但是一般應該不用考慮這種拉伸範圍很大的情況-娱乐天地点检怎么下载,正常刷新頁麵是可以的_|_盈盈彩票网址是多少,如果真要解決那得借助下js

5.需要根據個數顯示不同樣式

例如說可能有1~3個item顯示在同一行|-|虎门富民时装城,而item的個數不一定|钢轨标准,如果1個_2012时尚女装雪纺衫,那這個item占寬100%-军用棉衣棉裤,2個時每一個50%|摩托车驾驶证查询,3個時每一個33%___深圳居住证快速办理,這個你也可以用js計算一下-_苏秀文,但是用CSS3就可以解決這個問題_|_致富彩合法吗:

<style> li{ width: 100%;
    } li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li{ width: 50%;
    } li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li{ width: 33%; 
    } </style> <ul> <li>1</li> <li>2</li> <li>3</li> </ul>

第5行的意思就是選擇li的第一個元素_霍炽昌,並且它是倒數第二個元素_||小学老师给学生的毕业赠言,第6行的意思是選擇前麵有是第一個且是倒數第二個li的所有li_|-诛仙奋斗,第一行是選擇了第一個||-038彩票是合法么?,第二行選擇除第一個外的其它所有元素_-芦山县委书记。有三個元素的類似|_|火车票转让58同城。

6. 使用表單提交

提交請求有兩種方式-|蕙兰凝胶,一種是ajax-娱乐天地客服联系不上,另外一種是表單提交|_亿客隆彩票平台。很多人都知道ajax-_永盛娱乐客服微信,但往往忽略了還有個form提交_-|凹凸俱乐部。

假設在首頁有一個搜索的表單--360彩票超级赛车,點擊search的時候就跳到列表頁

11.png

你可以一個個去獲取所有的input的值|众盈彩票真能挣钱吗,然後把它拚到網址參數重定向一下-|_康姆昂北鼻够,但是其實可以不用這樣|-电视剧军刺,用一個表單提交就好了_|1956的娱乐平台大全:

<form id="search-form" action="/search"> <input type="search" name="keyword"> <input type="number" name="price"> </form>

將所有字段的名字寫在input的name裏麵-|01彩票软件,然後form的action為搜索頁的鏈接__|新密五个人。這樣子不用一行js代碼就能夠搜索跳轉_-|满月部屋13。

如果你需要做表單驗證__168彩票官方开奖网,那就監聽submit事件|-_咖啡屋剧情介绍,然後做驗證--0567好彩官方版苹果,驗證通過則調一下原生的submit就可以提交了||_奇迹世界2战士加点,也是不需要手動去獲取form的值

7.自動監聽回車事件

這個的場景是希望按回車的時候能夠觸發請求|_-劳动最光荣是谁说的,像第6點|-至尊宝v530,按回車實現跳轉_|掌上彩票客服电话,或者是像下麵的||诺基亚e88,按下回車就送一條聊天消息|-仙剑5破解:

12.png

通常的做法是監聽下keypress事件-_|衡水电大成绩查询,然後檢查一下keycode是不是回車_|维生素k3别名,如果是則發請求_|无叶涡轮增压器。

但是其實有個特別簡單的辦法|_-苏果之家,也是不需要一行JS__深圳第一现场重播,那就是把表單寫在一個form裏麵|-jindon京东商城,按回車會自動觸發submit事件-|长宁温水游泳池。讀者可以自己試試_-118彩票怎么安装。這個就啟示我們要用語義的html組織--摩托坊出售区,而不是全部都用div||-雳剑电视剧 全集在线观看。如果用相應的html標簽--_不灭之王波罗丁称号怎么做,瀏覽器會自動做一些優化_云顶娱乐平台怎么样,特別是表單提交的input_101号宠物恋人2。

JS是萬能的-|为啥人们啪啪后会感到悲伤,幾乎可以做任何事情_|-345彩票,但是有時候會顯得十分笨拙_-另类擦皮鞋歌词,在js/html/css三者間靈活地切換-银行联动门,往往會極大地簡化開發飞星晒图机,沒有誰是最好的語言_--htcg5,隻有適不適合-|_陇县关山牧场。隻要用得好-__jindon京东商城,不管黑貓白貓|||朱晓东 我型我秀 杀妻,都是好貓--铁路运输安全保护条例。

 

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__cfve卡枪代码,為期望卓越的國內外企業提供卓越的UI界麵設計--娱乐天地视频、BS界麵設計 |金枝玉叶花卉、 cs界麵設計 _基督教歌曲、 ipad界麵設計 |阳谷吧、 包裝設計 -威斯特梵高、 圖標定製 -__金人庆 李薇、 用戶體驗 ___新密五个人、交互設計_-|荷甲积分榜、 網站建設 _|1号平台号平台官网、平麵設計服務 

 

標簽: html CSS js « 【原創】SEO選詞的具體方法 | 專業能力之外-__阆中市国土局,交互設計師應該具備哪四個素質--_东莞唐会?»


訂閱Rss