<文章開始>
<文章結束>
在網頁設計和開發中，cursor和div是常用的兩個元素。cursor代表了鼠標的樣式，而div則是網頁布局的基礎元素之一。下面將通過幾個代碼案例來詳細解釋和說明cursor和div的用法和作用。
1. cursor的使用：
<html>
<head>
<style>
.cursor-pointer {
cursor: pointer;
}
<br>
.cursor-text {
cursor: text;
}
</style>
</head>
<body>
<h1>使用不同的cursor樣式</h1>
<p class="cursor-pointer">這是可以點擊的文本</p>
<p class="cursor-text">這是可以選中的文本</p>
</body>
</html>上述代碼演示了如何改變特定元素的鼠標樣式。在樣式表中使用cursor屬性可以設置鼠標指針的樣式。例子中，定義了兩個自定義的樣式類，分別為cursor-pointer和cursor-text。通過添加這些樣式類，可以使相應的元素擁有不同的鼠標樣式。在上面的例子中，第一個段落擁有一個手指形狀的光標，表示該文本可以點擊，而第二個段落擁有一個文本選擇光標，表示該文本是可選中的。
2. div的使用：
<html>
<head>
<style>
.container {
width: 300px;
height: 200px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
<br>
.inner-div {
width: 150px;
height: 100px;
background-color: navy;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-div">這是一個div元素</div>
</div>
</body>
</html>上面的代碼示例了如何使用div來布局和樣式化網頁元素。div是一個塊級元素，可以用于創建容器來組織和布局網頁上的其他元素。在上述代碼中，定義了一個樣式類.container，該類設置了容器div的一些樣式，如寬度、高度和背景顏色。同時，使用了Flexbox布局來使其內容水平和垂直居中。內部的div元素使用樣式類.inner-div來定義其樣式，如寬度、高度、背景顏色、文字顏色、文本對齊方式等。最終，通過嵌套使用div，可以創建出復雜的網頁布局。
：
cursor和div是網頁設計和開發中常用的兩個元素。通過改變cursor樣式，可以為特定元素提供不同的鼠標指針效果，從而增強用戶交互。而div則是布局和組織網頁元素的基礎，其靈活的特性使其成為網頁設計過程中不可或缺的元素之一。以上代碼案例演示了cursor和div的基本用法和作用，希望能對讀者有所幫助。
<文章結束>