這篇文章主要介紹“怎么用div+css實(shí)現(xiàn)底部分頁(yè)框”,在日常操作中,相信很多人在怎么用div+css實(shí)現(xiàn)底部分頁(yè)框問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”怎么用div+css實(shí)現(xiàn)底部分頁(yè)框”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
為鎮(zhèn)巴等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù),及鎮(zhèn)巴網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、鎮(zhèn)巴網(wǎng)站設(shè)計(jì),以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
首先最外邊的框我們使用列表ul 標(biāo)簽 來(lái)實(shí)現(xiàn)
內(nèi)部的框自然是使用 li 標(biāo)簽 來(lái)實(shí)現(xiàn),不過(guò) li 是塊元素,不能顯示在一行,所以要將其轉(zhuǎn)換為行內(nèi)元素,使用display:inline-block 來(lái)實(shí)現(xiàn)一行顯示
要注意小框內(nèi)的文字除了...其余都是鏈接,所以要使用a標(biāo)簽來(lái)實(shí)現(xiàn),但a標(biāo)簽是行內(nèi)元素,不能設(shè)置寬高,所以要轉(zhuǎn)化為塊元素。
分頁(yè)練習(xí)
.box {
width:602px;
height:42px;
border: 1px solid #000;
box-sizing:border-box;
margin:50px auto 0;
list-style: none;
padding:0px;
font-size:0px;
text-align:center;
}
.box li {
height:26px;
margin:7px 6px 0px;
font-size:12px;
display:inline-block;
}
.box li a {
display:block;
height:26px;
background-color: gold;
color:#000;
font:12px/26px 'Microsoft Yahei';
text-decoration:none;
padding:0px 7px;
}
.box li a:hover {
color:red;
background-color: wheat;
}
上一頁(yè)
1
2
3
4
...
17
18
19
20
下一頁(yè)
到此,關(guān)于“怎么用div+css實(shí)現(xiàn)底部分頁(yè)框”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!