divcss布局经典实例

admin 2024年02月11日 10:42 35 0

以下是一个简单的 CSS 布局示例，使用 div 元素和 CSS 样式来创建一个基本的网页布局：

HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <title>CSS 布局示例</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="header">
    <h1>欢迎来到我的网站</h1>
  </div>
  <div class="nav">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
  <div class="main">
    <h2>主要内容</h2>
    <p>这是一段主要内容。</p>
  </div>
  <div class="sidebar">
    <h3>侧边栏</h3>
    <p>这是一段侧边栏内容。</p>
  </div>
  <div class="footer">
    <p>版权所有 &copy; 2023</p>
  </div>
</body>
</html>

CSS 代码（styles.css）：

body {
  font-family: Arial, sans-serif;
}

.header {
  background-color: #f8f9fa;
  padding: 20px;
}

.nav {
  background-color: #343a40;
  color: #fff;
}

.nav ul {
  list-style-type: none;
  padding: 0;
}

.nav ul li {
  display: inline;
  margin-right: 10px;
}

.nav ul li a {
  color: #fff;
  text-decoration: none;
}

.main {
  float: left;
  width: 75%;
  padding: 20px;
}

.sidebar {
  float: right;
  width: 25%;
  padding: 20px;
}

.footer {
  background-color: #f8f9fa;
  padding: 20px;
  text-align: center;
}