CSS第二节

div做页面布局的建议

把整个网页从上到下分成若干块（一般分三块：头，中间，尾部）,每一块都按下面的思路

先写第一层，可以设置背景色，或者高度和垂直居中（line-height保证内容不超出高度），不设高度，这个div的高度由内容撑起来

再写第二层，这个可以设置一个宽度=像素的值，这样整个内容就在这个区域内，如果页面宽度太小，页面下方会出现滚动条，不会造成内容混乱

第三次可以开始写你的内容，可以继续用div或者别的标签，宽度可以用百分比，也可以用像素，如果用了float，要使用clear

<body>
<div class="lv1" style="background-color: #dddddd;height: 48px;line-height: 48px;">
    <div class="lv2" style="width: 800px;">
        <div style="width: 30%;float: left;">左边的内容</div>
        <div style="width: 70%;float: left;">中间的内容</div>
        <div style="clear: both;"></div>
    </div>
</div>

CSS样式重用

可以给一个标签设置多个class值，可以为每个class应用一个样式，标签有多个class,就可以应用多个样式

要设置多个class，只需在class名间加空格即可

<style>
            如果整个页面的宽度 > 900px时：
            {
                .c{
                   共有 
                }
                .c1{
                    独有
                }
            }
            
            .c2{
                独有
            }
        </style>

实例如下：

.c1 {
    background-color: aliceblue;
    height: 40px;
    width: 60px;
}

.c2 {
    width: 40px;
}

.c3 {
    border: 1px pink dotted;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link rel="stylesheet" href="common.css"/>
</head>
<body>
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3">c3</div>
    <div class="c1 c2">c1 c2</div>
    <div class="c1  c3">c1  c3</div>
    <div class="c1 c2 c3">c1 c2 c3</div>

</body>
</html>

img标签的优化

div做页面布局的建议

猜你喜欢