<!-- <ul>
<li>狗粮</li>
<li>牵引绳</li>
<li>玩具球</li>
</ul>
<a href="https://www.baidu.com" target="_blank">去百度看看</a>
<input type="text" placeholder="请输入你的名字">
<button>提交</button>
<div>
<h2>这是一个小区域标题</h2>
<p>这是区域里的段落。</p>
</div> -->
<!-- 页面结构没有div，看起来一团乱 -->
<!-- <h1>小白的宠物</h1>
<img src="dog.jpg">
<p>这是我的狗狗小白，超可爱！</p> -->
<!-- 页面结构加了div，逻辑清晰 -->
<!-- <div class="pet-card">
<h1>小白的宠物</h1>
<img src="dog.jpg">
<p>这是我的狗狗小白，超可爱！</p>
</div> -->
<!DOCTYPE html>
<html>
<head>
<title>我的兴趣介绍</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="intro-section">
<h1>关于我</h1>
<p>这一手简单的个也没有什么独特</p>
</div>
<div class="hobby-section">
<h2>我的兴趣爱好</h2>
<ul>
<li>宠物</li>
<li>唱歌</li>
<li>游戏</li>
</ul>
<a href="https://www.bilibili.com" target="_blank" class="link-button" >bilibili</a>
</div>
</body>
</html>
/* .pet-card {
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: #f9f9f9;
} */
body{
font-family: sans-serif;
background-color: #f9f9f9;
padding: 20px;
}
h1{
color: #4a90e2;
font-size: 36px;
}
h2 {
color: #333;
}
p {
font-size: 18px;
color: #555;
}
ul{
padding-left: 20px;
font-size: 16px;
}
.link-button{
display: inline-block;
background-color:#00b894;
color:white;
padding:10px 20px;
border-radius: 8px;
text-decoration: none;
margin-top:10px
}