CSS学习笔记第22天--设置页面背景色

网站建设 · 2020-11-11
4.1.1 设置页面背景色FJgIT米工网
background-color:transparent|colorFJgIT米工网
取值:FJgIT米工网
transparent:默认值。背景透明FJgIT米工网
color:指定颜色FJgIT米工网
FJgIT米工网
4.1.2 设置背景色给页面分块FJgIT米工网
利用background-color我们可以为页面不同栏目进行分块FJgIT米工网
cellpadding与cellspacing 区别FJgIT米工网
(1).cellpadding:FJgIT米工网
从其名称看,此属性与padding类似,cellpadding用来设置单元格中文本内容和边框之间的距离,类似于内边距。FJgIT米工网
(2).cellspacing:FJgIT米工网
cell是单元格的意思,从字面意思是设置单元格之间或者单元格与外围边框的距离,此属性类似于margin外边距。
   <style type="text/css">
    body{
        margin:0px;
        padding:0px;
        text-align:center;
    }
    .container{
        width:800px;
        margin:0 auto;
    }
    .header{
        width:800px;
        height:170px;
        background:url(images/bg.jpg)
    }
 
    .chara{
        font-size:16px;
        background-color:#90bcff;
 
    }
    .leftbar{
        width:200px;
        height:600px;
        background-color:#d4d7c6;
        float:left;
    }
    .content{
        width:600px;
        height:600px;
        background:#e5e5e3;
        float:left;
    }
 
    </style>
</head>
<body>
    <div class="container">
        <div class="header"></div>
        <table width="800px;" cellpadding="2" cellspacing="2" class="chara" align="center">
            <tr>
                <td>首页</td>
                <td>我的博文</td>
                <td>班级故事</td>
                <td>我的收藏</td>
                <td>成长心得</td>
                <td>我爱挑战</td>
                <td>友情链接</td>
            </tr>
        </table>
        <div class="main">
            <div class="leftbar"></div>
            <div class="content"></div>
        </div>
    </div>
    
</body>
FJgIT米工网