猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

背白交叉（如图，类似围棋盘）背景怎么用css或者js做的

https://img3.mukewang.com/5c4ab47800015fb202770569.jpg

ul>li*18

RISEBY
浏览 684回答 1
1回答

www说

参考一下css写法:<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title></title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; *{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ul{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 200px;overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; li{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;width: 100px;height: 100px;list-style: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ul li{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #eee8ac;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ul li:nth-child(4n) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #dc7092;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ul li:nth-child(4n+1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #dc7092;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; &nbsp; &nbsp; <li></li>&nbsp; &nbsp; </ul></body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript