HTML+CSS编写静态网站-16 使用div

来源：互联网发布：编辑部的故事知乎编辑：程序博客网时间：2024/05/17 11:33
视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015我们已经学习了CSS的基本语法，现在，让我们基于这些知识来创建网站。随着我们讲解的深入，我们将学习更多选择器，属性和值。上节课。我们只是临时添加例子用于介绍css，现在，让我们删除掉之前创建的样式代码。接下来，我们来创建一个独立的样式表文件。因此，我们将通过：文件=》新建，来创建一个新文件。然后保存，我们将它称为main.css，并且把它放在我们之前创建的css文件夹中 ：那么， 在我们开始在main.css中编写代码之前，我们要确保将它被添加到我们的HTML文件中。所以，这将非常类似于我们以前写的CSS代码。我只需要复制normalize.css行，并粘贴到它下面，然后把名字改为main.css：       <head><meta charset = "utf-8" ><title>bangge | oxoxwork</title><link rel="stylesheet" href="css/normalize.css">              <link rel="stylesheet" href="css/main.css"><style>我们保存下。这里，由于CSS的层叠的特性，我们的main.css放在normalize.css之后。这样的话，如果遇到相同的选择器，它就会覆盖的内容。如果没有遇到相同的，那么，它还是会保持normalize.css的内容，这正是我们想要的。现在让我们跳转到我们的main.css。这里为了确保我们的CSS被正确包括，所以我们尝试加一个变化。这里我选择body元素，然后将背景颜色更改为橙色。所以，我将输入background-color并将其更改为orange：body{       background-color:orange;}如果我们保存文件并刷新我们的预览，您可以看到整个页面的背景已更改为橙色：所以我们就可以确实main.css已经正确地包含在我们的HTML文件中。现在，我不想让我的body背景颜色为橙色，我们按下Ctrl + A，然后把这段代码都删掉。假如现在，我想删除在我们的链接上的下划线，我不想看到有下划线的链接。所以我要选择我们页面上的所有anchor元素，我将键入属性text-decoration并将其设置为none：a{       text-decoration:none;}如果我保存，回到浏览器，并刷新。你会看到，我们的背景颜色改为默认的白色，并且在我们的链接上不再有任何下划线。接下来，让我们开始组织我们的布局。我们需要添加一些标记，用来包装我们的内容的主要部分。为了做到这一点，我们首先要切换到我们的HTML文件，然后，创建一个叫做div的元素，div是一个没有任何语义元素。实际上，它是我们封装或划分一组元素的一种方式。让我们在header元素之后打开我们的div，在我们的header和section之间，我们将键入div：       <div><header>然后我们将在我们的footer和body之间关闭这个div标签。       </footer>       </div>这里需要缩进div里面的所有代码。这将有助于保持我们的代码可读性，而且不影响代码的功能。在实际的网站中，页面上肯定有很多个div，所以我们需要根据它的功能更具体地识别这个div。所以我们打开div标签，在这里，我要键入一个空格，然后我将添加一个id属来标识它。我们把id命名为wrapper，所以这个id属性将唯一标识div元素。       <body>       <div id="wrapper"><header>所以现在如果我们保存并切换到我们的main.css，我们可以输入#号，后面的id的名称。wrapper，然后我们可以使用花括号：a{text-decoration:none;} #wrapper{}这里就可以为我们刚刚创建的div元素定义样式了。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/div/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/div/
阅读全文
0 0