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

时间 2020-01-18

标签 html css 样式 div 布局简单使用栏目 HTML 繁體版

原文原文链接

在网页开发中，常常会有将网页切分为不一样的局部块，而后再在不一样的快中显示不一样的内容，如：顶部块、主题内容块、侧边栏信息快、底部信息块等。
css

使用DIV能够将网页切成不一样的块，而后使用CSS样式表定义各不一样块的具体显示。通常将div布局与CSS样式分不一样文件编写，div切割在html文件中实现，而后将独立的CSS样式表文件加载到html文件中。html

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

最终效果图：ide

说明：将网页分红了上中下三部分，上面顶部（红色），中间部分（×××）又分为左边的主体内容（蓝色）和右边的侧边栏（灰色）两个子块，下面是底部（绿色）。边缘暗红色的是背景，背景能够指定颜色或是设置背景图片。布局

要想将网页切割成这样的块，须要在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>

说明：this

1.使用上面的代码，虽然能够将页面切成不一样的块，可是默认的块没有大小、颜色之分，根本看不出来。url

2.为每一个div元素设定了一个id或class属性来标识，每一个属性值表明对应的元素，在CSS样式表中使用。id值必须惟一，一个id值表明一个元素。但class值能够重复，一个class值表示同名的一类元素。htm

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

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

/*在css文件中，默认的html元素能够直接使用名称，这里定义了整个网页body部分的颜色，
是十六进制的RGB表示方法，即图片周边的暗红色。也可使用哪一个url()的方式为body部分
设置背景图片*/
body{
    background-color: #551122;
<!-- background-p_w_picpath: 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为本身的网页布局了。