制作網(wǎng)絡(luò)課堂學(xué)習(xí)平臺(tái)(標(biāo)簽嵌套，后代選擇器)
<!DOCTYPE html>
<html>
<head>
? <title>網(wǎng)絡(luò)課堂學(xué)習(xí)平臺(tái)</title>
? <style>
? ? body {
? ? ? font-family: Arial, sans-serif;
? ? }
? ? h1 {
? ? ? color: #333;
? ? ? font-size: 24px;
? ? }
? ? h2 {
? ? ? color: #666;
? ? ? font-size: 20px;
? ? }
? ? .course {
? ? ? margin-bottom: 20px;
? ? }
? ? .title {
? ? ? font-weight: bold;
? ? }
? ? .description {
? ? ? margin-top: 10px;
? ? }
? ? .module {
? ? ? border: 1px solid #ccc;
? ? ? padding: 10px;
? ? ? margin-bottom: 10px;
? ? }
? ? .module-title {
? ? ? font-weight: bold;
? ? }
? ? .module-description {
? ? ? margin-top: 5px;
? ? }
? ? .module-link {
? ? ? color: #333;
? ? ? text-decoration: none;
? ? }
? ? .module-link:hover {
? ? ? text-decoration: underline;
? ? }
? </style>
</head>
<body>
? <h1>網(wǎng)絡(luò)課堂學(xué)習(xí)平臺(tái)</h1>
? <div class="course">
? ? <h2 class="title">課程 1</h2>
? ? <p class="description">這是課程 1 的描述。</p>
? ? <div class="module">
? ? ? <h3 class="module-title">模塊 1</h3>
? ? ? <p class="module-description">這是模塊 1 的描述。</p>
? ? ? <a href="#" class="module-link">查看詳情</a>
? ? </div>
? ? <div class="module">
? ? ? <h3 class="module-title">模塊 2</h3>
? ? ? <p class="module-description">這是模塊 2 的描述。</p>
? ? ? <a href="#" class="module-link">查看詳情</a>
? ? </div>
? </div>
? <div class="course">
? ? <h2 class="title">課程 2</h2>
? ? <p class="description">這是課程 2 的描述。</p>
? ? <div class="module">
? ? ? <h3 class="module-title">模塊 1</h3>
? ? ? <p class="module-description">這是塊 2 的描述。</p>
? ? ? <a href="#" class="module-link">查看詳情</a>
? ? </div>
? </div>
? </body>
? </html>
