R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。 MUGer, hacker, developer, amateur UI designer, punster, Japanese learner.

【CSS教程第二篇】合理的网页布局

注意:本文发布于 2081 天前,文章中的一些内容可能已经过时。

本篇教程需要事先掌握如何使用DIV元素和基本的CSS。

现在我们要真正来做一个像样的网页了。首先看一下这个布局:

样例

这种布局很常见吧,邮箱、管理系统、个人博客……到处都有它的身影。今天就拿它来练手吧!

首先先建立test.html和test.css,然后在test.html中输入基本的内容:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="test.css">
    <title>这是一个网页</title>
</head>
<body>
</body>
</html>

先用div搭个框架吧。大体上扫一遍,网页主要分为三大块——头部、左边的导航栏、右边的正文。于是我们可以先在body中写三个div:

<body>
    <div id="header"></div>
    <div id="sidebar"></div>
    <div id="article"></div>
</body>

然后再来填充细节。#header中应该有一个标题,可能的话会有一段说明性文字(多用于个人博客)。

<div id="header">
    <h1>这里是标题!</h1>
    <span class="subtitle">我才不会说这里不是副标题呢~</span>
</div>

至于#sidebar,里面会有一个导航栏,这个可以用ul和li来实现:

<div id="sidebar">
    <ul>
        <a href="xxx.html"><li>高大上的主页</li></a>
        <a href="xxx.html"><li>博客里没东西</li></a>
        <a href="xxx.html"><li>我的一些信息</li></a>
        <a href="xxx.html"><li>这个是凑数的</li></a>
    </ul>
</div>

至于#article,你们自己看着办……写完之后可以用浏览器打开看一看,不保证你不崩溃。

——这效果坑爹呢!

——是啊,我们还没开始写CSS呢。

为了定位方便,我打算对三个最大的div使用绝对定位。

对于#header,它与顶端、左端和右端的距离为0,高度看个人感觉,背景颜色嘛,随你怎么写好了。#header里面的文字,配色一定要和#header有反差,不然正常人会觉得很奇怪的。

#header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 130px;
    background-color: #111;
    /* 用color来控制文字颜色 */
    color: white;
}

注意#header里面的内容,与#header左边框要有个空隙,这个看个人感觉吧。

#header * {
    margin-left: 5%;
}

然后是#sidebar,首先要把它的position设成absolute,然后left设为0,top设为#header的高度,宽度和背景色看感觉,但是因为浏览器窗口大小可能不同,所以高度没法直接计算。没关系,我们可以把bottom设为0来解决这个问题。

#sidebar {
    position: absolute;
    top: 130px;
    bottom: 0;
    left: 0;
    width: 20%;
    background-color: #DDD;
}

其实#sidebar里面的ul本来宽度应该为100%,但因为ul默认会在左边加一个40px的padding,所以不能直接设置width,可行的办法有两种:一种是设置padding:none(我用的这种方法),另一种先absolute之后再把left和right都搞成0。高度不太好说,不过可以用line-height:32px来把里面li每一行的高度定为48px。同时我们用list-style-type:none来去除li左边默认的小圆点,然后给li加一个30px的padding-left。a标签会给文字带来超链接的样式,我们可以用color和text-decoration配合起来把它去掉……最神奇的一点来了:用li:hover(这个明天要讲)来设置鼠标滑过li时li的样式,可以是换一个突出一点的背景颜色。

#sidebar ul {
    padding: 0;
    width: 100%;
}
#sidebar li {
    padding-left: 30px;
    line-height: 48px;
    /* 去掉小圆点 */
    list-style-type: none;
}
#sidebar a {
    /* 设置超链接文字样式 */
    color: #333;
    font-weight: bold;
    text-decoration: none;
}
#sidebar li:hover {
    /* 背景高亮 */
    background-color: #EEE;
}

至于#article,依照惯例先设position为absolute,然后top为#header的高度,left为#sidebar的宽度,bottom和right都设为0,最好再设个20px的padding不然会不好看。其余的还是大家自己看着办……然后可以输入非常非常多的内容,然后你会发现被坑了……

整个网页出现了滚动条,而不是我们想要的#article出现滚动条。没关系,设置#article的overflow为auto就可以解决这个问题了。

作业:

①尝试使用border属性给li定义外边框、li:active选择器让li在被点击时再切换一次背景色。

②实现另一种网页布局,其中黑色部分仅有一行,蓝色部分为页面标题。

作业

今天就先到这里吧。

版权声明:除文章开头有特殊声明的情况外,所有文章均可在遵从 CC BY 4.0 协议的情况下转载。
上一篇: 【CSS教程第一篇】随心所欲挪元素
下一篇: 【CSS教程第三篇】绚丽的特效

这是我们共同度过的

第 1553 天