代碼
提交代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 清除默認樣式 */
* { padding: 0; margin: 0; }
/* 全屏顯示 */
html, body { height: 100% }
body {
/* 網格布局 */
display: grid;
/* 子元素居中 */
place-items: center;
}
/* 父元素 */
ul {
width: 300px;
/* 清除默認樣式 */
list-style: none;
/* 設置為flex布局 */
display: flex;
/* 設置換行 */
flex-flow: wrap;
}
/* 子元素 */
li {
/* 顯示為網格布局 */
display: grid;
/* 子元素水平垂直居中 */
place-items: center;
/* 寬高都是100像素 */
width: 100px;
height: 100px;
/* 設置盒模型 */
box-sizing: border-box;
/* 設置兩像素的邊框 */
border: 2px solid black;
/* 負邊距 */
margin: -2px 0 0 -2px;
}
/* 第1、4、7個子元素 */
li:nth-child(3n+1) {
/* 取消左負邊距 */
margin-left: 0
}
/* 前三個子元素 */
li:first-child, li:nth-child(2), li:nth-child(3) {
/* 取消上負邊距 */
margin-top: 0
}
/* 當鼠標經過時 */
li:hover {
/* 紅色字體 */
color: red;
/* 紅色邊框 */
border: 2px solid;
/* 調高層級 */
z-index: 1;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
// 選擇ul元素
const ul = document.getElementsByTagName('ul')[0]
// 監聽ul元素的點擊事件
ul.addEventListener('click', e => alert(e.target.innerText))
</script>
</body>
</html>
運行結果