lesson3 practice

From: https://www.storm.mg/article/4850671

by Pansen

HTML

<!DOCTYPE html>
<html>

   <head>
      <link rel="stylesheet" type="text/css" href="mystyle.css">
   </head>

   <body>
      <a href="https://www.storm.mg/" id="top_logo">
         <img src="https://www.storm.mg/images/logo.svg">
      </a>

      <nav>
         <ul id="top_navbar">
            <li class="nav_content"><a href="https://new7.storm.mg/" class="nav_btn"><img src="https://www.storm.mg/images/logo_new7.svg"></a></li>
            <li class="nav_content"><a href="https://onepercent.storm.mg/" class="nav_btn"><img src="https://www.storm.mg/images/1percentstyle.svg"></a></li>
            <li class="nav_content"><a href="https://www.storm.mg/premium" class="nav_btn"><img src="https://www.storm.mg/images/vip_logo.png"></a></li>
            <li class="nav_content"><a href="#" class="nav_btn">新聞</a></li>
            <li class="nav_content"><a href="#" class="nav_btn">評論</a></li>
            <li class="nav_content"><a href="#" class="nav_btn">財金</a></li>
            <li class="nav_content"><a href="#" class="nav_btn">生活</a></li>
            <li class="nav_content"><a href="#" class="nav_btn">下班經濟學</a></li>
            <li class="nav_content"><a href="#" class="nav_btn">電動車時刻</a></li>
         </ul>
      </nav>
      <div class="sidebar">
         <a href="https://www.storm.mg/category/104">風生活</a>
         <a href="https://www.storm.mg/category/36291">學長姐說</a>
         <a href="https://www.storm.mg/life-category/s24260">職場</a>
         <a href="https://www.storm.mg/life-category/s24264">科技</a>
         <a href="https://www.storm.mg/life-category/s47030">汽車</a>
         <a href="https://www.storm.mg/life-category/s126963">求職必讀</a>
      </div>

      <h1>
         歷史有什麼用？《島嶼歷史超展開》選摘（1）
      </h1>

      <a class="editor" href="https://www.storm.mg/authors/229561/%E9%84%AD%E7%B6%AD%E4%B8%AD">鄭維中</a> 2023-08-14 05:10

      <div class="wrapper">
         <div class="main">

            <img...

CSS

body {
   padding: 17px;
   background-color: #f0f0f0;
}

nav {
   display: block;
   padding: 0px 0px 0px 0px;
}

ul {
   border-style: solid none solid none;
   border-width: 3px;
   list-style-type: none;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
   text-align: justify;
}

#top_logo {
   width: 169px;
   height: 53px;
   display: block;
   margin: auto auto 10px auto;
}

.nav_content {
   float: left;
   display: inline-block;
   list-style: none;
}

ul:after {
   content: "";
   display: inline-block;
   position: relative;
   width: 100%;
}

.nav_content a {
   padding: 10px;
   color: black;
   display: inline-block;
}

.nav_content img {
   width: 79px;
   height: 25px;
}

h1 {
   text-align: center;
   padding: 5px;
}

a {
   color: blue;
}

a:hover {
   color: red;
}

.sidebar {
   border-left: 10px solid #ff3838;
   padding: 5px 0 5px 10px;
   margin-bottom: 10px;
}

.sidebar a {
   margin: 0px 8px 0px 0px;
   font-size: 16px;
   float: left;
}

.img_content {
   font-size: 100%;
   color: grey;
   opacity: 0.6;
   text-align: center;
}

p {
   padding: 15px;
   margin: 20px;
}

img {
   width: 100%;
   height: 50%;
}

.article {
   padding: 15px;
   margin: 20px;
}

.editor {
   padding: 10px;
   margin: 10px;
   color: red;
}

.wrapper {
   display: flex;
   justify-content: space-between;
}

.main,
.hotblock {
   border: flex;
   padding: 15px;
   background-color: #fff;
}

.main {
   width: 80%;
   height: 150vh;
}

.hotblock {
   width: 25%;
   height: 25vh;
}