HTML 元素学习

——布局、链接、图像

常用布局

<!-- 经典布局 -->
<div id="header">header</div>
<div id="main">main</div>
<div id="footer">footer</div>
<!-- 改进的布局 -->
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
<!-- 语义化标签布局 -->
<header>header</header>
<main>main</main>
<footer>footer</footer>

链接

<!-- 跳转到站外 -->
<a href="http://www.baidu.com">百度</a>
<br />
<!-- 站内跳转到其他页面，不需要http协议 -->
<a href="demo2.html">布局页面</a>
<br />
<!-- 在指定窗口打开 -->
<a href="http://www.taobao.com" target="taobao">淘宝</a>
<iframe src="" frameborder="2" name="taobao"></iframe>
<!-- 页内跳转 -->
<a href="#footer">footer</a>
<div id="footer" style="margin-top: 1000px">footer</div>
<a href="#">回到顶部</a>

图像

<h2>动物世界</h2>
<div class="box">
  <div class="course">
    <!-- 可点击图片链接 -->
    <a href=""><img src="img/dog.png" alt="" /></a>
    <!-- 文字链接 -->
    <a href="">小狗</a>
  </div>
  <div class="course">
    <!-- 可点击图片链接 -->
    <a href=""><img src="img/dark.png" alt="" /></a>
    <!-- 文字链接 -->
    <a href="">鸭子</a>
  </div>
</div>

• CSS代码

.box {
  display: inline-flex;
  background-color: lightcyan;
  box-shadow: 0 0 8px #888;
}
.box .course {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.box .course a {
  text-decoration: none;
  color: #666;
  transition: 0.5s;
}
.box .course a:hover {
  color: coral;
}
.box img {
  opacity: 0.8;
}
.box img:hover {
  opacity: 1;
  border-radius: 1em;
  transition: 0.5s;
}

• 效果