使用div+css實(shí)現(xiàn)九宮格(ps：要熟練掌握position樣式用法)

style

創(chuàng)新互聯(lián)長期為近1000家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為老邊企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)，老邊網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

.a{width:300px;height:300px;border:1px?solid?#ccc;border-right:0;border-bottom:0;}

.a?div{width:99px;height:99px;border-right:1px?solid?#ccc;border-bottom:1px?solid?#ccc;float:left;}

/style

div?class="a"

div/div

div/div

div/div

div/div

div/div

div/div

div/div

div/div

div/div

/div

這個(gè)應(yīng)該不用position吧 ? ?這樣顯得好復(fù)雜

求九宮格html代碼

!DOCTYPE html

html

head

meta charset="utf-8"

title全兼容的HTML九宮格布局/title

meta http-equiv="X-UA-Compatible" content="IE=edge"

/head

body

html

head

style type="text/css"

/** 重置瀏覽器默認(rèn)標(biāo)簽樣式 */

body,ul,li{margin:0;padding:0;}

.xttblog{

width: 1200px;

height: 170px;

margin-top:50px;

margin-left: auto;

margin-right: auto;

}

.box{margin-left: 5px;margin-top: 5px;list-style-type:none;}

.box:after{

content: ".";

display: block;

line-height: 0;

width:0;

height: 0;

clear: both;

visibility: hidden;

overflow: hidden;

}

.box li{float:left;line-height: 230px;}

.box li a,.box li a:visited{

display:block;

border: 5px solid #ccc;

width: 380px;

height: 230px;

text-align: center;

margin-left: -5px;

margin-top: -5px;

position: relative;

z-index: 1;

}

.box li a:hover{border-color: #f00;z-index: 2;}

/style

/head

body

div class="xttblog"

ul class="box"

lia href="#" title="1"img src="sh.jpg"http://a/li

lia href="#" title="2"img src="bd.jpg"http://a/li

lia href="#" title="3"img src="tb.jpg"http://a/li

lia href="#" title="4"img src="fh.jpg"http://a/li

lia href="#" title="5"img src="tb.jpg"http://a/li

lia href="#" title="6"img src="tb.jpg"http://a/li

lia href="#" title="7"img src="tb.jpg"http://a/li

lia href="#" title="8"img src="tb.jpg"http://a/li

lia href="#" title="9"img src="tb.jpg"http://a/li

/ul

/div

/body

/html

源碼，有些不一樣，自己改下，html+css不懂得話，得自學(xué)下，這個(gè)是很簡單的了，可以看下php中文網(wǎng)的一些課程，我自己也是自學(xué)的，網(wǎng)樓主采納！

已經(jīng)設(shè)計(jì)好圓角矩形圖并切分成九宮圖,求一套CSS+div方法編寫成內(nèi)容高度自適應(yīng)`寬度自適應(yīng)的方法!

汗，這個(gè)不是有個(gè)橫向和縱向背景重復(fù)嗎？你這樣切圖是錯(cuò)的……。

切成三塊就行了，HTML代碼

divimg?src="切出來的頭部圖片URL"/div

div?style="background-image:url(切出來的中間部分圖片URL);height:auto;background-repeat:y-repeat;"/div

divimg?src="切出來的尾部圖片URL"/div

css 中border-image 九宮格怎么理解，，求形象解答，小白不懂

把一張用來做邊框的圖片橫砍兩刀，豎砍兩刀，就變成一個(gè)由九個(gè)小圖片組成的九宮格，其中四個(gè)角的四張圖片就是邊框的四個(gè)角，四條邊上的四張圖片就用來做邊框的四條邊。最中間的那個(gè)圖片是邊框包圍著的實(shí)際內(nèi)容，不屬于邊框，所以這張圖片是用不到的，因此這個(gè)九宮格實(shí)際被利用到的就是四周的八張圖片。

文章題目：css九宮圖樣式,css 九宮格
地址分享：http://m.rwnh.cn/article0/phpcio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、自適應(yīng)網(wǎng)站、電子商務(wù)、App設(shè)計(jì)、微信公眾號、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)