div css制作网页实战笔记心得-前端开发

下面是详细的“div css制作网页实战笔记心得”的完整攻略：

下面是详细的“div css制作网页实战笔记心得”的完整攻略：

1.什么是div和css？

1.1 div是什么？

div是HTML中一个标签，它代表一个没有具体含义的元素容器，可以用来把网页内容划分成不同的块。我们可以在CSS中为它定义样式，使它的外观和行为与其它元素不同。

1.2 CSS是什么？

CSS（Cascading Style Sheets）翻译为层叠式样式表，是一种用来定义网页样式的语言。通过CSS，我们可以为网页元素定义外观、位置、动画等特性，让网页更加美观和易于操作。

2.如何用div和css制作网页？

2.1 HTML基本结构

HTML是整个网页的骨架，它定义了网页的结构。以下是一个典型的HTML结构：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页标题</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>网页标题</h1>
  </div>
  <div class="content">
    <p>这是内容区域。</p>
  </div>
  <div class="footer">
    <p>版权所有</p>
  </div>
</body>
</html>

上面的代码中，<html>标签包围整个网页内容，<head>标签包围了一些网页元数据（例如标题、样式表等），<body>标签包围网页的实际内容。<div>标签用来划分不同的内容区块，在CSS中为每个div指定样式。

2.2 CSS样式表书写

在HTML中引用一个CSS样式表，在<head>标签中使用<link>标签，例如:

<link rel="stylesheet" href="style.css">

这样会把当前目录下的“style.css”文件作为样式表导入到HTML页面里。下面是一个简单的样式表例子：

.header {
  background-color: #ccc;
  height: 60px;
  text-align: center;
  line-height: 60px;
}

.content {
  background-color: #f5f5f5;
  padding: 20px;
}

.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

上面的CSS样式表定义了三个类（class）.header、.content、.footer。这些类分别对应上面HTML中的三个<div>标签。在CSS中，我们可以为不同的类定义不同的外观和行为，使页面变得美观、易于操作等。

3.示例说明

3.1 示例1：网页布局

下面是一个比较完整的示例，它演示了如何用div和CSS创建一个网页的布局效果。请参考下面HTML和CSS代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页布局示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <h1>网页布局示例</h1>
    <ul>
      <li><a href="#">链接1</a></li>
      <li><a href="#">链接2</a></li>
      <li><a href="#">链接3</a></li>
    </ul>
  </div>
  <div class="content">
    <div class="aside">
      <h2>侧边栏</h2>
      <ul>
        <li><a href="#">侧边栏链接1</a></li>
        <li><a href="#">侧边栏链接2</a></li>
        <li><a href="#">侧边栏链接3</a></li>
      </ul>
    </div>
    <div class="main">
      <h2>主要内容</h2>
      <p>这里是主要内容，可以放一些文章或者图片等。</p>
    </div>
  </div>
  <div class="footer">
    <p>版权所有</p>
  </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

.header {
  background-color: #ddd;
  height: 60px;
  line-height: 60px;
  text-align: center;
}

.header h1 {
  display: inline-block;
  font-size: 24px;
  margin-right: 30px;
}

.header ul {
  display: inline-block;
  list-style: none;
}

.header li {
  display: inline-block;
  margin-right: 20px;
}

.header li a {
  color: #333;
  text-decoration: none;
}

.content {
  display: flex;
  margin-top: 20px;
}

.aside {
  background-color: #eee;
  width: 250px;
  height: 400px;
  padding: 20px;
}

.aside h2 {
  font-size: 18px;
}

.aside ul {
  margin-top: 10px;
}

.aside li {
  margin-bottom: 10px;
}

.aside li a {
  color: #333;
}

.main {
  flex: 1;
  background-color: #f5f5f5;
  padding: 20px;
}

.footer {
  background-color: #333;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
}

上面的代码展示了一个常见的网页布局模式。其中，<div class="header">表示网页的头部，<div class="content">表示网页的正文内容，包括一个侧边栏和主要内容区块，<div class="footer">表示网页的底部。CSS中的样式则定义了这些元素的外观和布局特性，例如背景颜色、字体大小、间距等。

3.2 示例2：网页导航栏

下面是一个简单的示例，它演示了如何用CSS实现一个简单的网页导航栏。具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网页导航栏示例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="navbar">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </div>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

.navbar {
  background-color: #333;
  height: 60px;
  line-height: 60px;
}

.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  float: left;
  margin-right: 20px;
}

.navbar li:last-child {
  margin-right: 0;
}

.navbar li a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  border-bottom: 3px solid transparent;
}

.navbar li a:hover {
  border-bottom-color: #fff;
}

上面的代码中，<div class="navbar">表示网页导航栏，包括一个无序列表（<ul>）和若干个列表元素（<li>），每个列表元素包含一个超链接（<a>）。CSS样式表定义了这些元素的外观和排列方式，使网页导航栏更加美观和易于操作。其中，float: left 风格使得 li 元素左浮动，border 属性使得鼠标划过时链接底部呈现一条边框，为导航栏增强了焦点状态。