视频教程观看地址: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/