练习：观鸟网（主要练习文档结构）

最新推荐文章于 2024-08-26 02:30:00 发布

qq_41008787

最新推荐文章于 2024-08-26 02:30:00 发布

阅读量780

点赞数 1

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_41008787/article/details/115921427

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>观鸟网</title>
    <link href="https://fonts.googleapis.com/css?family=Long+Cang|Noto+Sans+SC:300" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </head>

  <body>
	<header>
    <h1>观鸟网</h1>
    <img src="dove.png" alt="一张鸽子剪影图片">
	
	<nav>
    <ul>
      <li><span>主页</span></li>
      <li><a href="#">开始</a></li>
      <li><a href="#">图片</a></li>
      <li><a href="#">设备</a></li>
      <li><a href="#">论坛</a></li>
    </ul>
	</nav>
    </header>
	
    <main>
     <article>
      <h2>欢迎</h2>
      
      <p>欢迎访问观鸟网虚拟站点。如果这是一个真实的网站，那么它就是观鸟爱好者的理想聚集地。无论你是一名期望学习观鸟知识的新手，还是一位希望分享体会、经验和图片的观鸟老手。</p>
      <p>时不我待！赶快带齐装备，关上电脑，去拥抱美丽的大自然吧！</p>
	</article>
    
    <aside>
    
      <h2>收藏照片</h2>
	
      <a href="favorite-1.jpg"><img src="favorite-1_th.jpg" alt="一只体型小巧的鸟，羽毛蓝绿色，爪黑白相间，黑色的喙细且锋利。点击缩略图查看完整照片。"></a>
      <a href="favorite-2.jpg"><img src="favorite-2_th.jpg" alt="一只美丽的孔雀的上半身图片，它的颈上覆盖蓝色的羽毛，有浅色的喙和蓝色的冠。点击缩略图查看完整照片。"></a>
      <a href="favorite-3.jpg"><img src="favorite-3_th.jpg" alt="一只大鸟的上半身图片，羽毛白色，浅色的喙细长而弯曲。点击缩略图查看完整照片。"></a>
      <a href="favorite-4.jpg"><img src="favorite-4_th.jpg" alt="一只成年鹈鹕，羽毛大多为白色，背部和腹部有少许黑色羽毛，又长又直的喙呈黄色，喙的下方有一个喉囊可以暂时储存食物。点击缩略图查看完整照片。"></a>
     </aside>
	</main>
    <footer>
      <p>本虚拟站点遵守 CC0 协议，所有内容均可任意修改和复用。原始版本由 Chris Mills 于 2016 年编写。Roy Tian 于 2019 年汉化。</p>
      <p><a href="http://game-icons.net/lorc/originals/dove.html">鸽子图标</a> 由 Lorc 绘制。</p>
	</footer>
</body>
</html>

/* || 一般设置 */

html, body {
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  background-color: #a9a9a9;
}

body {
  width: 70%;
  min-width: 800px;
  margin: 0 auto;
}

/* || 排版 */

h1, h2, h3 {
  font-family: 'Long Cang', cursive;
  color: #2a2a2a;
}

p, input, li {
  font-family: 'Noto Sans SC', sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

h3 {
  font-size: 2.2rem;
}

p, li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || 标题布局 */

header {
  margin-bottom: 10px;
  display: flex;
  flex-flow: row wrap;
}

main, header, nav, article, aside, footer, section {
  background-color: rgba(29, 149, 63, 0.5);
  padding: 1%;
}

h1 {
  flex: 5;
  text-transform: uppercase;
}

header img {
  display: block;
  height: 60px;
  padding-top: 20.15px;
}

nav {
  height: 50px;
  flex: 100%;
  display: flex;
}

nav ul {
  padding: 0;
  list-style-type: none;
  flex: 2;
  display: flex;
}

nav li {
  display: inline;
  text-align: center;
  flex: 1;
}

nav a, nav span {
  display: inline-block;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.7;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

/* || 主体布局 */

main {
  display: flex;
}

article, section {
  flex: 4;
}

aside {
  flex: 1;
  margin-left: 10px;
  padding: 1%;
}

aside a {
  display: block;
  float: left;
  width: 50%;
}

aside img {
  max-width: 100%;
}

footer {
  margin-top: 10px;
}