正文
九宫格样式css,九宫格样式图片
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
求九宫格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中文网的一些课程，我自己也是自学的，网楼主采纳！
相关问答
Q1: css 中border-image 九宫格怎么理解，，求形象解答，小白不懂
把一张用来做边框的图片横砍两刀，竖砍两刀，就变成一个由九个小图片组成的九宫格，其中四个角的四张图片就是边框的四个角，四条边上的四张图片就用来做边框的四条边。最中间的那个图片是边框包围着的实际内容，不属于边框，所以这张图片是用不到的，因此这个九宫格实际被利用到的就是四周的八张图片。
Q2: html中怎么给九宫格添加边框
写CSS3选择器，设置td的边框样式即可。
例如：
.sudoku tr:nth-child(3) td, .sudoku tr:nth-child(6) td {
border-bottom: solid black 1px;
}
可以设置下边框线颜色大小
.sudoku tr td:nth-child(3), .sudoku tr td:nth-child(6) {
border-right: solid black1px;
}
可以设置右边框线颜色大小
Q3: css 如何制作九宫格?
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title/title
meta name="keywords" content=""
meta name="description" content=""
style type="text/css"
* { padding:0; margin:0;}
dl { width:153px; border-top:1px solid #ddd; border-left:1px solid #ddd;}
dl dd { list-style:none; width:50px; height:50px; float:left; border-right:1px solid #ddd; border-bottom:1px solid #ddd; float:left;}
/style
script type="text/javascript" src="js/jquery.min.js"/script
/head
body
dl
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
dd/dd
/dl
/body
/html
Q4: 如何用css和html让九宫格随浏览器窗口大小改变大小
如果想让九宫格随浏览器窗口大小改变那就不要用绝对的px值啊，用百分比；或者你通过js检测窗口大小进行调整。
Q5: 使用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吧 这样显得好复杂
