自學網頁の嬰兒教材：第3課 ── 網頁排版

自學網頁の嬰兒教材：第3課 ── 網頁排版

by max002215

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="header">
      <div id="header_bottom" class="header_content">
        <div id="header_bottom_inner" class="header_inner">
          <div class="logo_block">
            <a href="https://www.storm.mg/" id="logo"><img src="https://www.storm.mg/images/logo.svg" alt="風傳媒LOGO" id="logo_img" class="svg_content"></a>
          </div>
          <nav id="main_nav_wrapper">
            <ul id="main_nav">
              <li class="dropdown nav_list"><a href="https://new7.storm.mg/" class="nav_btn tag_vip"><img src="https://www.storm.mg/images/logo_new7.svg" alt class="nav_btn_img new7"></a></li>
              <li class="dropdown nav_list"><a href="https://onepercent.storm.mg/" class="nav_btn tag_vip"><img src="https://www.storm.mg/images/1percentstyle.svg" alt class="nav_btn_img new7"></a></li>
              <li class="dropdown nav_list"><a href="https://www.storm.mg/premium" class="nav_btn tag_vip"><img src="	https://www.storm.mg/images/vip_logo.png" alt class="nav_btn_img new7"></a></li>
              <li class="dropdown nav_list"><a href="https://www.storm.mg/article/5065535#" class="dropdown-toggle nav_btn"><span class="toggle-title">新聞</span></a></li>
              <li class="dropdown nav_list"><a href="https://www.storm.mg/article/5065535#" class="dropdown-toggle nav_btn"><span class="toggle-title">評論</span></a></li>
              <li class="dropdown nav_list"><a href="https://www.storm.mg/article/5065535#" class="dropdown-toggle nav_btn"><span class="toggle-title">財經</span></a></li>
              <li class="dropdown nav_list"><a href="https://www.storm.mg/article/5065535#" class="dropdown-toggle nav_btn"><span class="toggle-title">生活</span></a></li>
              <li class="dropdown nav_list"><a href="https://www.storm.mg/article/5065535#" class="dropdown-toggle nav_btn"><span class="toggle-title">下班經濟學</span></a></li>
              <li...

CSS

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  word-break: break-word;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

a {
  text-decoration: none;
  color: orange;

}

a:visited {
  color: #000;
}

a:hover {
  color: orange;
  text-decoration: underline;

}

nav {
  display: block;
}

#header {
  width: 100%;
  height: auto;
  
}

#header_bottom_inner {
  position: relative;
}

.header_inner {
  max-width: 1150px;
  height: auto;
  margin: 0 auto;
  text-align: center;
}


.row::after {
 clear: both;

}
.row::before, .row::after {
  content: "";
  display: table;
}

.logo_block {

  position: relative;
  padding: 15px 0;
  text-align: center;
}

#logo {
  display: inline-block;

}

#logo_img {
  width: 169px;
  height: auto;
}

img {
  vertical-align: middle;
}

a img {
  border: none;
}

#main_nav_wrapper {
  position: relative;
}

#main_nav {
  position: absolute;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 0 3px;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  text-align: left;
}

.dropdown{
  position: relative;
}

.nav_list {
  display: inline-block;
  vertical-align: middle;
  margin: 0 -4px;
}

.nav_btn {
  display: inline-block;
  padding: 13px 15px 14px;
  letter-spacing: 3px;
  font-size: 16px;
  text-decoration: none;
}

.new7 {
  width: 79px;
  height: 25px;
  margin: -8px 0 -5px;
}

.toggle-title {
  display:...