建站
咨詢
售后
建站咨詢
新聞中心
Foundation 側(cè)邊欄
側(cè)邊欄導(dǎo)航
Foundation 使用
成都創(chuàng)新互聯(lián)公司主打移動網(wǎng)站、網(wǎng)站制作、網(wǎng)站設(shè)計、網(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)容與功能再決定采用什么樣的設(shè)計。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。
實(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)識，使用 .divider 類添加水平分割線：
實(shí)例
<
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)格中的側(cè)邊欄
我們可以使用網(wǎng)格設(shè)計模式來設(shè)置側(cè)邊導(dǎo)航欄，實(shí)例如下：
實(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
>
嘗試一下 ?
本文標(biāo)題：創(chuàng)新互聯(lián)Foundation教程：Foundation 側(cè)邊欄
轉(zhuǎn)載注明：http://www.5511xx.com/article/djdiigc.html
