css樣式綜合案例----部落格園首頁簡單搭建

认真的六六發表於2024-06-16
CSS
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>部落格園</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <link rel="stylesheet" href="blog.css">
  8 </head>
  9 <body>
 10 <div class="blog-left">
 11     <div class="blog-avatar">
 12         <img src="666.jpg" alt="">
 13     </div>
 14     <div class="blog-title">
 15         <p>六六的部落格</p>
 16     </div>
 17     <div class="blog-info">
 18         <p>是新人，什麼也沒有留下</p>
 19     </div>
 20     <div class="blog-link">
 21         <ul>
 22             <li>
 23                 <a href="#">關於我</a>
 24             </li>
 25             <li>
 26                 <a href="#">微博</a>
 27             </li>
 28             <li>
 29                 <a href="#">微信公眾號</a>
 30             </li>
 31         </ul>
 32     </div>
 33     <div class="blog-tag">
 34         <ul>
 35             <li><a href="">python</a></li>
 36             <li><a href="">wb</a></li>
 37             <li><a href="">CSS</a></li>
 38         </ul>
 39     </div>
 40 </div>
 41 <div class="blog-right">
 42     <!--右邊部分-->
 43     <div class="article">
 44         <div class="article-title">
 45             <span class="title">論做筆記的重要性</span>
 46             <span class="date">2024/1/29</span>
 47         </div>
 48         <div class="article-body">
 49             <p>jason老師教的非常好</p>
 50         </div>
 51         <div class="article-bottom">
 52             <span>#python</span>
 53             <span>#wb</span>
 54         </div>
 55     </div>
 56     <div class="article">
 57         <div class="article-title">
 58             <span class="title">論做筆記的重要性</span>
 59             <span class="date">2024/1/29</span>
 60         </div>
 61         <div class="article-body">
 62             <p>jason老師教的非常好</p>
 63         </div>
 64         <div class="article-bottom">
 65             <span>#python</span>
 66             <span>#wb</span>
 67         </div>
 68     </div>
 69     <div class="article">
 70         <div class="article-title">
 71             <span class="title">論做筆記的重要性</span>
 72             <span class="date">2024/1/29</span>
 73         </div>
 74         <div class="article-body">
 75             <p>jason老師教的非常好</p>
 76         </div>
 77         <div class="article-bottom">
 78             <span>#python</span>
 79             <span>#wb</span>
 80         </div>
 81     </div>
 82     <div class="article">
 83         <div class="article-title">
 84             <span class="title">論做筆記的重要性</span>
 85             <span class="date">2024/1/29</span>
 86         </div>
 87         <div class="article-body">
 88             <p>jason老師教的非常好</p>
 89         </div>
 90         <div class="article-bottom">
 91             <span>#python</span>
 92             <span>#wb</span>
 93         </div>
 94     </div>
 95     <div class="article">
 96         <div class="article-title">
 97             <span class="title">論做筆記的重要性</span>
 98             <span class="date">2024/1/29</span>
 99         </div>
100         <div class="article-body">
101             <p>jason老師教的非常好</p>
102         </div>
103         <div class="article-bottom">
104             <span>#python</span>
105             <span>#wb</span>
106         </div>
107     </div>
108 </div>
109 </body>
110 </html>

相關文章