博客园页面自主搭建
![image]()
- 先使用div和span占位(主要是div)
- 再添加文本内容
- 最后再考虑样式
"""在给标签添加id、class的时候最好是见名知意"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
</style>
<link rel="stylesheet" href="03%20first%20css%20file.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.cache.netease.com%2Fcatchpic%2F6%2F68%2F68544408999AD585532A6AEC085A5B81.jpg&refer=http%3A%2F%2Fimg1.cache.netease.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647179107&t=0fa2c6d1e921a5c69d4f472b7a4250d9" alt="">
</div>
<div class="blog-title">
<span>鸡哥的博客</span>
</div>
<div class="blog-desc">
<span>一会不开车就心慌慌</span>
</div>
<div class="blog-link">
<ul>
<li><a href="#">想看片</a></li>
<li><a href="#">微信</a></li>
<li><a href="#">滴滴我</a></li>
</ul>
</div>
<div class="blog-item">
<ul>
<li><a href="#">#波女神</a></li>
<li><a href="#">#小泽女神</a></li>
<li><a href="#">#吉泽女神</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="article-st">如何让富婆爱上你</span>
<span class="article-date">2022.02.11</span>
</div>
<div class="article-desc">
<span>身强体壮，温柔体贴</span>
<span>屌大活好</span>
</div>
<div class="article-info">
<span>#111</span>
<span>#222</span>
</div>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="article-st">如何让富婆爱上你</span>
<span class="article-date">2022.02.11</span>
</div>
<div class="article-desc">
<span>身强体壮，温柔体贴</span>
<span>屌大活好</span>
</div>
<div class="article-info">
<span>#111</span>
<span>#222</span>
</div>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="article-st">如何让富婆爱上你</span>
<span class="article-date">2022.02.11</span>
</div>
<div class="article-desc">
<span>身强体壮，温柔体贴</span>
<span>屌大活好</span>
</div>
<div class="article-info">
<span>#111</span>
<span>#222</span>
</div>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="article-st">如何让富婆爱上你</span>
<span class="article-date">2022.02.11</span>
</div>
<div class="article-desc">
<span>身强体壮，温柔体贴</span>
<span>屌大活好</span>
</div>
<div class="article-info">
<span>#111</span>
<span>#222</span>
</div>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="article-st">如何让富婆爱上你</span>
<span class="article-date">2022.02.11</span>
</div>
<div class="article-desc">
<span>身强体壮，温柔体贴</span>
<span>屌大活好</span>
</div>
<div class="article-info">
<span>#111</span>
<span>#222</span>
</div>
</div>
</div>
</body>
</html>
![image]()
浙公网安备 33010602011771号