lovecoding
/
web0715


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!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>
        .nav-content h1{
            text-align: center;
        }
        .list-content{
            /* border:1px solid black; */
            width: 400px;
            margin:0 auto;
        }
        .list-content li{
            padding: 10px 0;
        }
        .list-content dt{
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="nav-content">
            <h1>我的博客</h1>
            <hr>
        </div>
        <div class="list-content">
            <!-- 无序列表区域 -->
            <div class="card-content">
                <h2>今日推荐</h2>
                <p>以下是为您推荐的精彩内容：</p>
                <ul>
                    <li>有趣的旅行经历</li>
                    <li>美味的食谱分享</li>
                    <li>最新的科技动态</li>
                </ul>
            </div>
            <!-- 有序列表区域 -->
            <div class="card-content">
                <h2>热门排行</h2>
                <ol>
                    <li>最受欢迎的电影评论</li>
                    <li>热门的游戏攻略</li>
                    <li>实用的健身技巧</li>
                </ol>
            </div>
            <!-- 定义列表区域 -->
             <div class="card-content">
                <h2>相关术语解释</h2>
                <dl>
                    <dt>前端开发</dt>
                    <dd>创建用户可以直接与之交互的网页和应用程序界面的过程。</dd>
                    <dt>CSS 样式</dt>
                    <dd>用于美化网页外观，包括布局、颜色、字体等方面的设置。</dd>
                    <dt>HTML 标签</dt>
                    <dd>构成网页结构和内容的基本元素。</dd>
                </dl>
             </div>
        </div>
    </div>
</body>
</html>