html九宫格图片代码(html九乘九宫格图片)
求九宫格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中文网的一些课程，我自己也是自学的，网楼主采纳！
写一个关于九宫格的html代码,当鼠标指向外围表格任一数字全部显示为该指向的数字,指向中间数字5保持原状
你可以下一个javascript的功能特效的帮助文档，里面有这个，只是稍微改一下就行了，或者jQuery的帮助文档
如何用css和html让九宫格随浏览器窗口大小改变大小
如果想让九宫格随浏览器窗口大小改变那就不要用绝对的px值啊，用百分比；或者你通过js检测窗口大小进行调整。
知道9宫格不 希望可以用html布局出来一个9宫格，要严格按照html规范写（例如margin不能是负数!!!!!!!!!!!
!DOCTYPE?html
head
meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/?
title无标题/title
style?type="text/css"
td?{
height:30px;
width:30px;
border:?solid?1px;
}
table?{
border:solid?1px;
}
/style
/head
body
table
tr
td/td
td/td
td/td
/tr
tr
td/td
td/td
td/td
/tr
tr
td/td
td/td
td/td
/tr
/table
/body
/html
这样子很萌有没有- -
一个九宫格用hHTML和CSS怎么制作？每个格子都有不同颜色
!DOCTYPE?html
html
head
????meta?charset="GBK"
????titletest/title
???style?type="text/css"
???????*{
???????????box-sizing:?border-box;
???????????margin:?0;
???????????padding:?0;
???????}
???????.container{
???????????width:?90px;
???????????height:?90px;
???????}
???????.item{
???????????width:?30px;
???????????height:?30px;
???????????display:?block;
???????????float:?left;
???????}
???/style
/head
body
div?class="container"
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
????div?class="item"/div
/div
/body
/html
script?type="text/javascript"
????var?items?=?document.querySelectorAll('.item');
????Array.prototype.slice.call(items,?0).forEach(function(item){
????????item.style.backgroundColor?=?'#'+(~~(Math.random()*(124))).toString(16);
????});
/script