有關css的一些奇技淫巧(自認為的)

扯點題外話:此時此刻捻撑,我只想說磨隘,這他喵的破項目終于快完事了,修修改改一個月顾患,光一個首頁就重做了兩邊番捂,真是心塞啊,再這樣下去描验,估計下一個上新聞的前端和產品就發(fā)生在我公司了白嘁。

額,最近在刷題膘流,很老的題絮缅,不過還是發(fā)現(xiàn)了兩個以前我自己不知道的有關css的東西,第一個就是利用a標簽的錨點來控制相應元素的選擇器=》:target呼股,IE9以上可以用耕魄,附上官網解釋:# 錨的名稱是在一個文件中鏈接到某個元素的URL。元素被鏈接到目標元素彭谁。:target選擇器可用于當前活動的target元素的樣式吸奴。a標簽的href屬性鏈接的那個標簽:target,然后就可以通過點擊a標簽來控制那個標簽的樣式了缠局,煮個栗子:


利用錨點來控制div

上面的代碼大家可以試一試则奥,不過唯一不足的就是a標簽未在URI上加一個#div,也就是錨點狭园,而:target就是利用這個錨點读处,我目前還是找到如何能去掉這個URI上的錨點,所以還是不用的好唱矛,反正多知道一點總是好的罚舱,可以用這個:targegt寫個輪播裝裝B,當然绎谦,這個就得大家自己動腦子想象了管闷,下面將要介紹的還是有點實用性的,不想留給下篇窃肠,所以就在這直接寫了包个,有點長,見諒哈冤留!


利用:checked來實現(xiàn)導航赃蛛,彈窗等效果恃锉。

以往大家寫一些導航,多少會用到JS呕臂,寫個彈窗也是破托,利用JS來操作display等屬性達到這類效果,如果要是可以只寫css不動JS也許可以省去不少時間呢歧蒋。

那么:checked就派上用場了土砂,附上官方解釋::checked 選擇器匹配每個選中的輸入元素(僅適用于單選按鈕或復選框)。看到這里一些人可能還是想不到(高手別吐槽我)谜洽,如何利用這個:check來實現(xiàn)這類效果呢萝映?不說廢話。先上圖:


簡單的顯隱

我就不附代碼了阐虚,怪長的序臂,而且寫一遍沒壞處,:checked就是用來控制被鼠標選中radio或者checkbox的input標簽的实束,那么label想必大家都用過奥秆,label可以控制for屬性里面的的id對應的標簽,既然這樣咸灿,咱們把input這個丑陋的家伙隱藏掉构订,然后label現(xiàn)在等同于input,所以點擊label就可以用css的~來控制p標簽避矢,進而改變樣式悼瘾,我這里只是做了個顯隱,更神奇的效果有待大家去探索审胸,不知道我有沒有表達清楚亥宿,請大家見諒吧,對了:checked也是IE9以上可以用砂沛,雖然說上述的兩個屬性可以做出來某些你想要的效果烫扼,但是畢竟本篇文章是奇技淫巧,偶爾用下還可以尺上,但是該用JS還是老老實實用JS吧材蛛,規(guī)范同樣很重要圆到。加油怎抛,干吧得。

以上均個人理解芽淡,為了自己鞏固马绝,也為了分享給大家,寫的或好或壞挣菲,希望大家見諒富稻,摸摸大掷邦!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市椭赋,隨后出現(xiàn)的幾起案子抚岗,更是在濱河造成了極大的恐慌,老刑警劉巖哪怔,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宣蔚,死亡現(xiàn)場離奇詭異,居然都是意外死亡认境,警方通過查閱死者的電腦和手機胚委,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來叉信,“玉大人亩冬,你說我怎么就攤上這事∨鹕恚” “怎么了硅急?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鸠姨。 經常有香客問我铜秆,道長,這世上最難降的妖魔是什么讶迁? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任连茧,我火速辦了婚禮,結果婚禮上巍糯,老公的妹妹穿的比我還像新娘啸驯。我一直安慰自己,他們只是感情好祟峦,可當我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布罚斗。 她就那樣靜靜地躺著,像睡著了一般宅楞。 火紅的嫁衣襯著肌膚如雪针姿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天厌衙,我揣著相機與錄音距淫,去河邊找鬼。 笑死婶希,一個胖子當著我的面吹牛榕暇,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼彤枢,長吁一口氣:“原來是場噩夢啊……” “哼狰晚!你這毒婦竟也來了?” 一聲冷哼從身側響起缴啡,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤壁晒,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后业栅,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體讨衣,經...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年式镐,在試婚紗的時候發(fā)現(xiàn)自己被綠了反镇。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡娘汞,死狀恐怖歹茶,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情你弦,我是刑警寧澤惊豺,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站禽作,受9級特大地震影響尸昧,放射性物質發(fā)生泄漏。R本人自食惡果不足惜旷偿,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一烹俗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧萍程,春花似錦幢妄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至忍法,卻和暖如春潮尝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背饿序。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工勉失, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人嗤堰。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓戴质,卻偏偏與公主長得像,于是被迫代替她去往敵國和親踢匣。 傳聞我的和親對象是個殘疾皇子告匠,可洞房花燭夜當晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內容

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務發(fā)現(xiàn)离唬,斷路器后专,智...
    卡卡羅2017閱讀 134,656評論 18 139
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,553評論 32 459
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,751評論 1 92
  • HTML標簽解釋大全 一输莺、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,242評論 1 41
  • 叛逆戚哎,它很厲害。它能讓一個人在一兩年甚至更長的時間里嫂用,將是非顛倒型凳,好壞不分。任憑善意的建議忠懇的教誨正確的指導如潮...
    山姆大叔ss閱讀 246評論 0 0