HTML+CSS编写静态网站-28 调整标题和导航

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

这节课，我们来修复标题和导航的问题。现在，在页面的最顶部有一些白色的空白。这是因为第一级标题设置了margin，然后，这里又没有足够的空间。

所以让我们来到HEADING，然后我们选择header。首先，我要把它浮动到左边。然后设置边距，使顶部为0，右边为0，底部为30像素，左边为0。然后我们将设置填充，类似地，我们将使用四个值;所以5像素，然后0，0，0。

 
 
/* **************************************

HEADING

************************************** */

 

header{

       float:left;

       margin:0 0 30px 0;

       padding:5px 0 0 0;

}
如果你不记得这4个值分别代表哪边。其实，只要记住从顶部开始，然后顺时针走。所以是顶部，右边，底部，左边。

现在，让我们更详细地解释这段代码。浮动到左边没有任何实际的用处，至少到目前为止，但是以后，当我们应用桌面布局的样式时。它才会起作用。

然后，设置底部边距是为了保持标题与其他内容在底部分离。最后，我们在顶部添加了一些填充。

那么，有了这些设置还不够。我们还需要将顶部设置100％的宽度：

 
 
header{

float:left;

margin:0 0 30px 0;

padding:5px 0 0 0;

       width:100%;

}
因为它现在是一个浮动的元素，这意味着它没有一个显式的宽度了。我们想特别制定这个元素横跨整个header，所以我们设置了100％的宽度。

现在，让我们刷新页面。顶部的空白消失了。

修改完标题之后，现在让我们看看导航。现在我们的导航是一个无序的列表。因此，我们实际上要使用和我们在画册中类似的技术，画册也是一个无序的列表。

所以，首先，我要选择无序列表元素，并在左右设置一些边距，删除任何其他填充，然后删除列表项目符号。

所以，让我们来到NAVIGATION，在nav元素里面，我们有我们的无序列表ul，然后我们设置想要的样式：

我们设置list-style为none，这样就可以去除项目符号。然后我们将margin设置为零和10个像素，因此顶部和底部为0，左侧和右侧为10像素。然后我们将padding设置为0：

 
 
/* **************************************

NAVGATION

************************************** */

nav{

text-align:center;

padding:10px 0;

margin:20px 0 0;

}

 

nav ul {

       list-style:none;

       margin:0 10px;

       padding:0;

}
现在，我要使用一个以前没有使用过的新属性，它被称为display。默认情况下，每个元素都有一个display属性，它通常被设置为block或inline。block将占用页面中的空间，它和section，div类似，会自动的为同级元素换行。inline大多只是文本。例如，当我们在段落中添加一个anchor元素时，它不会将同级的其它的元素换行，它们只是出现在同一行。这里，我们实际上要使用另一个属性，叫做inline-block。这将使得这些项并排放置，就像inline一样，但是它们会保留block的功能，例如具有宽度和高度。所以，让我们说nav，li，display:inline-block。

 
 
nav ul {

list-style:none;

margin:0 10px;

padding:0;

}

 

nav li {

       display:inline-block;

}
现在让保存和刷新页面看看：

你看，现在我们所有的链接都在同一整齐的行。换句话说，它们彼此一致，但它们仍然具有一些block属性。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/title-nav/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/title-nav/