純CSS,label+input+section實現tab功能
<style> html, body { height: 100%; } body { font: 14px/1 'Open Sans', sans-serif; color: #555; background: #eee; } h1 { padding: 50px 0; font-weight: 400; text-align: center; } p { margin: 0 0 20px; line-height: 1.5; } main { min-width: 320px; max-width: 800px; padding: 50px; margin: 0 auto; background: #fff; } section { display: none; padding: 20px 0 0; border-top: 1px solid #ddd; } input { display: none; } label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #bbb; border: 1px solid transparent; } label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } label[for*='1']:before { content: '\f1cb'; } label[for*='2']:before { content: '\f17d'; } label[for*='3']:before { content: '\f16b'; } label[for*='4']:before { content: '\f1a9'; } label:hover { color: #888; cursor: pointer; } input:checked + label { color: #555; border: 1px solid #ddd; border-top: 2px solid orange; border-bottom: 1px solid #fff; } #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } @media screen and (max-width: 650px) { label { font-size: 0; } label:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 400px) { label { padding: 15px; } } </style> <h1>Tommy bad bad</h1> <main> <input id="tab1" type="radio" name="tabs" checked> <label for="tab1">1</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">2</label> <input id="tab3" type="radio" name="tabs"> <label for="tab3">3</label> <input id="tab4" type="radio" name="tabs"> <label for="tab4">4</label> <section id="content1"> <p> 1 </p> <p> 1 </p> </section> <section id="content2"> <p> 2 </p> <p> 2 </p> </section> <section id="content3"> <p> 3 </p> <p> 3 </p> </section> <section id="content4"> <p> 4 </p> <p> 4 </p> </section> </main>
相關推薦
純CSS,label+input+section實現tab功能
<style> html, body { height: 100%; } body { font: 14px/1 'Open Sans', sans-serif; color: #555; background: #eee; } h1 { padding:
純css改變input的游標顏色,字型顏色不變(設定游標顏色與字型顏色不同)
使用input輸入框時,預設游標顏色是和字型顏色相同的,只需css設定color屬性就可以同時改變游標和字型顏色 但有時的需求是游標和字型顏色不一樣,網上的caret方法經測試chrome並不管用,所以,程式碼如下 <!DOCTYPE html> <htm
HTML使用Radio Input來實現Tab切換
在開發中看見僅使用css技巧,就用HTML的Radio Input來實現的Tab的切換,連click事件都未使用。程式碼效果如下: <!DOCTYPE HTML> <html> <header> <link rel="stylesheet" href="
純CSS定義input ratio樣式
控制元件程式碼 <input type='radio' value='2'> 佈局程式碼 input[type='radio'] { outline: none; mar
純css使用線性漸變實現滾動進度條
asc :after top 是我 xxx ctype 沒有 char lin <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
純css使用線性漸變實現滾動進度條(來自於微信前端早讀課)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
純 CSS 利用 label + input 實現選項卡
label dev 滾動 for center -- meta absolut 獲得 clip 屬性 用於剪裁絕對定位元素。 .class { position:absolute; clip:rect(0px,60px,200px,0px); }
html+css+jQuery+JavaScript實現tab自動切換功能
() conf charset 臨時 effect 保存 sheet http oat tab1.html內容 <!DOCTYPE html> <html> <head> <meta charset="U
純css實現傾斜tab切換,並且加上兩邊圓角
前端開發過程中難免會遇到傾斜的tab設計,並且兩邊要做成圓角效果,如下圖: 我的想法: 1. 給每個tab項設定transform:skew(角度值)實現傾斜效果,但是,此時裡邊內容也會跟著傾斜,所以給內容單獨加一個容器,給該容器重新設定偏轉回去即可;
純CSS、原生JS、jQuery實現下拉選單功能
一、純CSS實現 實現下拉選單需要用display,即改變display的block或none值。 先構建基本的HTML框架, <div id="nav"> <ul> <li><a href="#">
史上最牛逼的純CSS實現tab選項卡,閃瞎你的狗眼
html檔案<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS3外觀漂亮淡入淡出Tab選單演示<
使用:target實現點選按鈕切換圖片的功能(純CSS)
今天使用CSS中的:target選擇器來實現點選按鈕切換相對應的圖片的demo,此demo也可以使用JS來實現。 demo的結構: <a href="#img1">img
純CSS實現tab切換
用單選框的:checked偽類和相鄰選擇器實現 程式碼如下: <!DOCTYPE html> <html> <head> <title></ti
css實現選項卡功能(純css)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{padding: 0;margin: 0
純css實現select下拉框並排顯示
code 同時 eight spl one 背景色 不起作用 表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
實現Tab鍵的空格功能
down code use 而是 racket pause one 頁面 ear 有時使用編輯框需要用到按Tab鍵空兩格,可能這時Tab鍵的功能不是空格而是頁面切換等,這時需要設置: $(document).bind(‘keydown‘, function (ev
偽類target實現純css模態框
content charset text and title html overlay see sca 今天看到一個純css模態框,覺得是很牛呀 看了下用了target偽類, 一直不知道有這麽神奇的偽類 。。 用法是這樣的,給模態框一個id, <div id="po
純CSS實現氣泡框
set .org head left 一個 pos radi margin orange 效果圖如下: 源碼: <!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en" "http://
使用純css實現波浪效果
波浪 gree transform orm infinite ram 定位 position mes 有時候我們需要實現水晃動的效果,其實我們可以通過css旋轉動畫和圓角來實現。 首先來2個div,外層div相對定位,內層div絕對定位,內層div大致位於外層div上半部分
通過純css實現圖片居中的多種實現方式
splay add pad src 純css webkit web center -c html結構: 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">