HTML中CSS样式及Div布局的简单使用

在网页开发中,经常会有将网页切分为不同的局部块,然后再在不同的快中显示不同的内容,如:顶部块、主题内容块、侧边栏信息快、底部信息块等。

使用DIV可以将网页切成不同的块,然后使用CSS样式表定义各不同块的具体显示。一般将div布局与CSS样式分不同文件编写,div切割在html文件中实现,然后将独立的CSS样式表文件加载到html文件中。

下面以源代码及效果图的方式,展示一个简单的网页布局案例。

最终效果图:

182836889.png

说明:将网页分成了上中下三部分,上面顶部(红色),中间部分(黄色)又分为左边的主体内容(蓝色)和右边的侧边栏(灰色)两个子块,下面是底部(绿色)。边缘暗红色的是背景,背景可以指定颜色或是设置背景图片。


要想将网页切割成这样的块,需要在html中使用div标签定义,本例定义块代码如下:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="description" content="this is a web station for alone.">
    <meta name="keywords" content="perfect,home,blog,web,station">
    <title>我的个人站点</title>
    <!-- 在html文件中使用link标签添加为这个文件定制的CSS样式表 -->
    <link rel="stylesheet" type="text/css" href="myweb.css" />
    </head>
    <body>
        <!-- 定义顶部块,并为这个块设定一个名称为head的id值 -->
        <div id="head">
            <h1>这里是顶部栏</h1>
        </div>
        <!-- 定义主体容器块,并为这个块设定一个名称为container的id值 -->
        <div id="container">
            <!-- 在contarner块中定义两个子块,然后分别为这两个块设定名称为main、siderbar的class类 -->
            <div class="main"><h1>这里是主体内容部分</h1></div>
            <div class="sidebar"><h1>这里是侧边栏</h1></div>
        </div>
        <!-- 定义底部块,并为这个块设定一个名称为bottom的id值 -->
        <div id="bottom"><h1>这里是底部</h1></div>
    </body>
</html>

说明:

1.使用上面的代码,虽然可以将页面切成不同的块,但是默认的块没有大小、颜色之分,根本看不出来。

2.为每个div元素设定了一个id或class属性来标识,每个属性值代表对应的元素,在CSS样式表中使用。id值必须唯一,一个id值代表一个元素。但class值可以重复,一个class值表示同名的一类元素。

为了在网页中清晰的分辨各块,需要定义一个CSS样式表myweb.css来定义不同块及元素的显示。

下面的myweb.css文件对上面的html文件里各部分定义了如何显示:

/*在css文件中,默认的html元素可以直接使用名称,这里定义了整个网页body部分的颜色,
是十六进制的RGB表示方法,即图片周边的暗红色。也可以使用哪个url()的方式为body部分
设置背景图片*/
body{
    background-color: #551122;
<!-- background-image: url("../bj.jpg");-->
}
/*html元素的id属性使用#开头。width、herght表示宽与高,大小使用像素表示。
margin表示显示方式,默认靠左,auto设置为居中显示,并设定背景颜色为red*/
#head{
    width: 960px;
    height: 80px;
    margin: auto;
    background-color: red;
}
#container{
    width: 960px;
    height: 500px;
    margin: auto;
    background-color: yellow;
}
/*html元素定义class属性使用点.开头。float设置该块的漂浮属性,在container内向左移,
另一个快siderbar在container内向右移*/
.main{
    float: left;
    width: 700px;
    height: 500px;
    background-color: blue;
}
/*因为main和siderbar在container内,所以两个块的宽度之和不应该超过container的宽度*/
.sidebar{
    float: right;
    width: 240px;
    height: 500px;
    background-color: gray;
}
/*底部块的id值,大小及颜色、居中显示*/
#bottom{
    width: 960px;
    height: 100px;
    background-color: green;
    margin: auto;
}
/*重新定义h1元素的显示,由于h1默认有边距margin-top将顶部间距设为0,
text-align为设置字体的显示位置属性:center是居中显示,font-size定义大小*/
h1{
    margin-top: 0px;
    text-align: center;
    color: white;
    font-size: 35px;
}
/*定义bottom中的h1显示方式,其他的h1字体颜色为white,此处h1颜色为red,大小也改变。
当多处定义了同一个元素时,最精确的生效*/
#bottom h1{
    margin-top: 0px;
    text-align: center;
    color: red;
    font-size: 50px;
}

说明:

1.在css样式表中,html的默认元素可以直接使用,元素的id使用“#”+“id值”表示,元素的class使用“.”+“class值”表示;

2.CSS可用的属性值太多,可以根据手册查询,此处只根据需要使用了宽度、高度、颜色、显示位置等属性;

3.在html中h1...h7有默认的显示形式,可以在CSS中改变其显示属性,并且可以使用精确定位的方式设置不同地方的h1有不同的显示。

根据以上内容,就可以使用Div+CSS为自己的网页布局了。

你可能感兴趣的:(css,div,居中显示,字体设置,web编程)