基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码

这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。

以下是一个简单的基于HTML和CSS的广州介绍旅游网页设计样例。这个例子包含了一些基本元素，如导航、banner、内容区域和联系信息等。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>广州简介</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  header {
    background-color: #4CAF50;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
  nav {
    float: left;
    width: 200px;
    background-color: #f2f2f2;
    padding: 20px;
  }
  nav ul {
    list-style-type: none;
    padding: 0;
  }
  nav ul a {
    text-decoration: none;
    color: black;
    display: block;
    padding: 6px 12px;
    border-bottom: 1px solid #cccccc;
  }
  section {
    margin-left: 210px;
    padding: 20px;
  }
  footer {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
</head>
<body>
 
<header>
  <h1>广州简介</h1>
</header>
 
<nav>
  <ul>
    <li><a href="#">广州概览</a></li>
    <li><a href="#">历史文化</a></li>
    <li><a href="#">自然地理</a></li>
    <li><a href="#">旅游资源</a></li>
  </ul>
</nav>
 
<section>
  <h2>广州概览</h2>
  <p>广州，简称“广”，是中国广东省的省会，国家重要的经济社会发展中心和重要的港口城市，同时也是中国西部地区的经济中心和对外贸易的重要门户。</p>
  <!-- 其他内容区段 -->
</section>
 
<footer>
  <p>版权所有 © 广州介绍</p>
</footer>
 
</body>
</html>

这个简单的网页展示了如何使用HTML创建基本的页面结构，并通过CSS为页面元素添加样式。这个例子也展示了如何使用<header>, <nav>, <section>, 和 <footer>等HTML5语义元素来增强页面的可访问性和可维护性。

基于HTML+CSS制作一个简单的家乡网页制作作业，广州介绍旅游网页设计代码学生个人html静态网页制作成品代码

评论已关闭

推荐阅读