掃二維碼與項(xiàng)目經(jīng)理溝通
我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
Foundation 使用 創(chuàng)建側(cè)邊欄:

成都創(chuàng)新互聯(lián)公司主打移動(dòng)網(wǎng)站、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名注冊、等互聯(lián)網(wǎng)信息服務(wù),為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下,我們?yōu)榭蛻舫兄Z穩(wěn)定,放心的服務(wù),根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后,要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì),我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
<
ul
class=
"side-nav"
>
<
li
>
<
a
href=
"#"
>Link 1
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 2
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 3
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Link 4
<
/a
>
<
/li
>
<
/ul
>
嘗試一下 ?
已點(diǎn)擊的鏈接可以在 上使用 .active 類來標(biāo)識(shí),使用 .divider 類添加水平分割線:
<
ul
class=
"side-nav"
>
<
li
class=
"active"
>
<
a
class=
"a"
href=
"#"
>Link 1
<
/a
>
<
/li
>
<
li
>
<
a
class=
"a"
href=
"#"
>Link 2
<
/a
>
<
/li
>
<
li
class=
"divider"
>
<
/li
>
<
li
>
<
a
class=
"a"
href=
"#"
>Link 3
<
/a
>
<
/li
>
<
li
>
<
a
class=
"a"
href=
"#"
>Link 4
<
/a
>
<
/li
>
<
/ul
>
嘗試一下 ?
我們可以使用網(wǎng)格設(shè)計(jì)模式來設(shè)置側(cè)邊導(dǎo)航欄,實(shí)例如下:
<
div
class=
"row"
>
<
div
class=
"medium-4 columns"
style=
"background-color:#f1f1f1;"
>
<
ul
class=
"side-nav"
>
<
li
class=
"active"
>
<
a
href=
"#"
>Home
<
/a
>
<
/li
>
<
li
>
<
a
href=
"#"
>Learn HTML
<
/a
>
<
/li
>
...
<
/ul
>
<
/div
>
<
div
class=
"medium-8 columns"
>
<
h1
>Side Nav
<
/h1
>
<
p
>Some text..
<
/p
>
...
<
/div
>
<
/div
>
嘗試一下 ?

我們在微信上24小時(shí)期待你的聲音
解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流