純css實現炫酷側邊欄

有疑問的小夥伴可以深入**學習?

html結構

lang
="en"
dir="ltr"
>
>
charset
="utf-8"
>
>
側邊欄title
>
rel=
"stylesheet"
type
="text/css"
href
="./css/siderbar.css"
>
href
="./css/font-awesome.min.css"
rel="stylesheet"
>
head
>
>
type
="checkbox"
id="check"
>
for=
"check"
>
class
="fa fa-bars"
aria-hidden
="true"
id="show"
>
i>
class
="fa fa-times"
aria-hidden
="true"
id="cancel"
>
i>
label
>
class
="siderbar"
>
>
>
>
header
>
>
>
href
="#"
>
class
="fa fa-*****-plane"
>
i>
公司簡介a
>
li>
>
href
="#"
>
class
="fa fa-*****-plane"
>
i>
公司簡介a
>
li>
>
href
="#"
>
class
="fa fa-*****-plane"
>
i>
公司簡介a
>
li>
>
href
="#"
>
class
="fa fa-*****-plane"
>
i>
公司簡介a
>
li>
>
href
="#"
>
class
="fa fa-*****-plane"
>
i>
公司簡介a
>
li>
>
href
="#"
>
class
="fa fa-*****-plane"
>
i>
公司簡介a
>
li>
ul>
div>
>
class
="main"
>
>
>
>
公司名稱h3
>
li>
ul>
div>
section
>
body
>
html
>

html,

ul,body
ul.siderbar
.siderbar h1
.siderbar ul
.siderbar ul a
.siderbar li a i
.siderbar ul a:hover
#check
#show
#cancel
#show:hover,
#cancel:hover
#show::before,
#cancel::before
#check:checked ~ .siderbar
#check:checked ~ label #cancel
section
#check:checked ~ section
.main
.main h3
.main::-webkit-scrollbar

純CSS實現側邊欄 分欄高度自動相等

本文摘自 這裡直接介紹我認為的最佳的側邊欄 分欄高度自動相等方法。核心的css 如下 數值不固定 margin bottom 3000px padding bottom 3000px 再配合父標籤的overflow hidden屬性即可實現高度自動相等的效果。舉個簡單的例項吧，如下css及html ...

CSS實現側邊欄導航

charset utf 8 title type text css 隱藏checked核取方塊 sidemenu sidemenu checked aside sidemenu checked wrap aside h2 控制側邊欄進出的按鈕 外部包裹 wrap 控制側邊欄進出的按鈕 內部文字樣式 ...

前端酷炫效果參考 純CSS3實現的一些酷炫效果

之前在網上看到一些用純css3實現的酷炫效果，以為實現起來比較困難，於是想看看具體是怎麼實現的。一 笑臉貓動畫 實現效果如下 這個實現起來確實比較麻煩，很多地方需要花時間，有耐心地調整。1.先看下頁面結構 2.再看css部分 1.先看臉部face face top 100px left 50 top...