My first html

by wimp9487

HTML

<div class="container">
  <div class="picture">
    <a href="#"><img src="https://www.storm.mg/images/logo.svg" alt="風傳媒logo" width="169"></a>
  </div>
    <div class="navbar">
    <ul>
      <li><a href="#"><img src="https://www.storm.mg/images/logo_new7.svg" alt=""></a></li>
      <li><a href="#"><img src="https://www.storm.mg/images/1percentstyle.svg" alt=""></a></li>
      <li><a href="#"><img src="https://www.storm.mg/images/vip_logo.png" alt=""></a></li>
      <li><a href="#">新聞</a></li>
      <li><a href="#">評論</a></li>
      <li><a href="#">財經</a></li>
      <li><a href="#">生活</a></li>
      <li><a href="#">下班經濟學</a></li>
      <li><a class="red" href="#">智慧新移動</a></li>
    </ul>
    <hr>
  </div>
 <div class="tag">
  <a class="tag-link" href="#">政治</a>
  </div>
  <div>

  <div id="wraper">
  
  <main>
    <h1>殺警爽服外役監惹議！徐巧芯、林為洲點名這18名綠委推修法放寬遴選標準</h1>
    <img id="mainimg" src="https://image.cache.storm.mg/styles/smg-800x533-fp-wm/s3/media/image/2023/07/11/20230711-102820_U28514_M869582_9990.jpeg" width="720" height="480" />
    <p class="grey">國民黨立委林為洲、台北市議員徐巧芯11日召開「舉發陳明文涉違反公職人員利益衝突迴避法」記者會。（陳思明攝）</p><hr />

    <div id="article">
    <p>資深女星易淑寬的兒子易寶宏因夜店殺警案被判刑9年，2019年入獄隨後被調到外役監服刑，日前有基層員警不滿，在前立委黃國昌直播留言爆料此事，事件引發外界高度關注。對此，立委林為洲跟台北市議員徐巧芯今（11）日召開記者會踢爆，2020年民進黨推修法放寬外役監遴選標準，提案人包括綠委邱志偉、許智傑、趙天麟、邱議瑩，連署人則有陳明文、陳歐珀、高嘉瑜、余天、陳瑩、李昆澤、鍾佳濱等人，共計18名綠委。</p>
<p>
針對外役監遴選標準，林為洲表示，本屆立法院已進入最後一個會期，只有提出2次《外役監條例》修法，第一次是放寬遴選標準的修法、第二次是加嚴遴選標準的修法，結果放寬版通過了，請問現在國會最大黨是哪一黨？現在外役監這麼多亂象，殺警犯、累犯都能進入外役監，還讓外役監犯罪在請假外出期間犯下台南殺警案，民進黨要負最大責任。
林為洲指出，第一次在立法院會表決通過的「放寬版」修法是在2020年5月22日，提案人有邱志偉、許智傑、趙天麟、邱議瑩，而連署人則有陳明文、陳歐珀、高嘉瑜、劉世芳、賴瑞榮、余天、管碧玲、陳瑩、吳琪銘、吳玉琴、李昆澤、林宜瑾、鍾佳濱、邱泰源，共計18名綠委。（相關報導： 幕後》賴清德、候友宜只能看車尾燈　百萬政治網紅柯文哲開演唱會「她」想的｜更多文章）
</p>
<p>
林為洲表示，放寬版的《外役監條例》，跟國民黨所提出的版本，兩者差異在於本來規定累犯不能進外役監，但放寬版卻替加上但書，已執行受6個月以下有期徒刑者之宣告者不在此限，簡單來說就是服刑完畢且受的罪是6個月以下的就可以進外役監。他也質疑，法務部怎麼會同意通過？
</p>
<p>
徐巧芯則痛批，民進黨2020年推放寬外役監遴選標準修法，就是為了民進黨前中常委李清福，民進黨偷偷摸摸幫自己人修法，若發生重大事件，再來搞一個雷聲大雨點小，看起來行政院要修正的版本，但在立院卻壓著不審，所以到現在才會出現接二連三的問題。
</p>
    </div>
  </main>
  
 ...

CSS

.grey {
color:grey;}
p {
  padding:10px;
}
.red {
  color:red;
}
a {
  color:black;
}

.picture{
  border-bottom: 1px solid black;
}
.picture a img{
  margin: 16px auto;
  display: block;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 1.5px;
}


.navbar {
  margin-bottom: 15px;
}

.navbar ul {
  display: flex;
  list-style-type: none;

}

.navbar li a {
  display: block;
 
  text-decoration: none;
  margin: 13px 15px;
  
  text-align: center;
  font-size: 18px;
}

.navbar li a img {
  height: 25px;
  width: 79px;
}
.red {
  color:red;
}
.tag {
  border-left:10px solid red;
}
.tag-link {
   display: block;
  margin: 6px 10px;
  text-decoration: none;
  font-size:20px;
}
.links li a{
  color:red;
  font-size:20px;
}
.links {
  border-bottom:5px solid black;
}
.hot-link {
  display:flex;
}


#wraper {
  display: flex;
}

main {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  padding: 5px;
}

#mainimg {
  padding: 5px;
  margin: 0;
  width: 100%;
  height: auto;
}

#article {
  background-color: #fff;
}

main a {
  text-decoration: none;
  border-bottom: 1px solid #ffcb82;
  color: #a6a6a6;
}

p {
  padding: 5px;
  font-size: 18px;
}


.hot-link {
  display:flex;
}
body {
  background-color: #f5f5f5;
  margin: 0;
  
}

header {
  display: flex;
  justify-content: center;
}

header img {
  width: 169px;
  height: auto;
  cursor: pointer;
}


#wraper {
  display: flex;
  align-content: center ;
}

main {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  padding: 5px;
}

#mainimg {
  padding: 5px;
  margin: 0;
  width: 100%;
  height: auto;
}

#article {
  background-color: #fff;
}

main a {
  text-decoration: none;
  border-bottom: 1px solid black;
  color: #a6a6a6;
}

p {
  padding: 5px;
 ...