前端JavaScript用webstorm怎么在网页上生成一个九宫格图片

效果图如下... 效果图如下 展开
 我来答
匿名用户
2016-09-17
展开全部

html代码:

<ul class="nineUL" id="nineUL"></ul>


CSS代码:

.nineUL{display:block; overflow:hidden; width:340px; margin:20px 0 0 50px;}

.nineUL li{display:block; width:100px; height:100px; overflow:hidden; float:left; margin-right:20px;}

.nineUL li img{vertical-align:middle; width:100%;}


JS代码:

window.onload = function(){

for(var i=0; i<9; i++){

var html = "<li><img src='picture/icon/8.jpg' /></li>";

var u = document.getElementById("nineUL");

var li = document.createElement("li");

li.innerHTML = "<img src='picture/icon/8.jpg' />";

u.appendChild(li);

if(i>0 && (i%3 == 2)){

li.style.margin="0px 0px 10px 0px";

}

}

}

效果图:

更多追问追答
追问

在这个里面要怎么写?刚学这个不是太懂,如果换图片的话要在哪里更改,谢谢

追答
刚学的话你可以直接用Html代码写出来,不用js。需要我写个Htm的例子给你吗?
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式