最近學CSS，突然想到可以用CSS來做一個點名系統，來練習一下所學的知識。下面是我實現這個點名系統的過程。

// HTML代碼
<div id="name-list">
<h2 class="title">點名系統</h2>
<ul class="student-list">
<li>張三</li>
<li>李四</li>
<li>王五</li>
<li>趙六</li>
</ul>
<button class="btn" onclick="randomSelect()">點名</button>
<p id="result"></p>
</div>
// CSS代碼
#name-list {
margin: 0 auto;
width: 400px;
text-align: center;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
}
.student-list {
list-style: none;
padding: 0;
margin-bottom: 20px;
}
.student-list li {
font-size: 18px;
margin-bottom: 10px;
cursor: pointer;
}
.student-list li:hover {
color: red;
}
.btn {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
#result {
font-size: 20px;
margin-top: 20px;
color: red;
}

這里我使用了HTML5的語義標簽來構建頁面，用div作為整個容器，用h2、ul、li等標簽來分別表示標題、學生名單和每個學生的名字。為了增加交互性，在CSS中設置了學生名字的鼠標懸停樣式，并給點名按鈕添加了點擊事件。

JS代碼如下：

function randomSelect() {
var studentList = document.querySelectorAll('.student-list li');
var randomIndex = Math.floor(Math.random() * studentList.length);
var result = document.querySelector('#result');
for (var i = 0; i < studentList.length; i++) {
studentList[i].classList.remove('selected');
}
studentList[randomIndex].classList.add('selected');
result.innerText = '被點到的同學是：' + studentList[randomIndex].innerText;
}

通過querySelectorAll方法和循環遍歷獲取到所有學生名字的li，并用Math.random方法生成一個隨機數來選出被點到的同學。為了使用戶知道哪個同學被點到了，用classList添加和刪除selected類名，從而改變該同學在頁面中的樣式。同時，將點名結果顯示在頁面上，用innerText屬性給p標簽賦值即可。

至此，一個簡單的點名系統就完成了，通過CSS的樣式和JS的交互，使頁面變得生動有趣，增加了用戶體驗。