css九宫图样式,css 九宫格

使用div+css实现九宫格(ps：要熟练掌握position样式用法)

style

.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

这个应该不用position吧    这样显得好复杂

相关问答

Q1: 求九宫格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"

/** 重置浏览器默认标签样式 */

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"//a/li

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

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

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

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

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

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

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

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

/ul

/div

/body

/html

源码，有些不一样，自己改下，html+css不懂得话，得自学下，这个是很简单的了，可以看下php中文网的一些课程，我自己也是自学的，网楼主采纳！

Q2: 已经设计好圆角矩形图并切分成九宫图,求一套CSS+div方法编写成内容高度自适应`宽度自适应的方法!

汗，这个不是有个横向和纵向背景重复吗？你这样切图是错的……。

切成三块就行了，HTML代码

divimg src="切出来的头部图片URL"/div

div style="background-image:url(切出来的中间部分图片URL);height:auto;background-repeat:y-repeat;"/div

divimg src="切出来的尾部图片URL"/div

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

把一张用来做边框的图片横砍两刀，竖砍两刀，就变成一个由九个小图片组成的九宫格，其中四个角的四张图片就是边框的四个角，四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容，不属于边框，所以这张图片是用不到的，因此这个九宫格实际被利用到的就是四周的八张图片。