body背景和居中

浮动
1、代码1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container{
            border:solid 1px red;
        }
        .l{
            width: 100px;
            height: 100px;
            background-color: #00ee00;
            border: solid 1px darkblue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="l">1</div>
    <div class="l">2</div>
    <div class="l">3</div>
    <div class="l">4</div>
    <div class="l">5</div>
    <div class="l">6</div>
    <div class="l">7</div>
    <div class="l">8</div>
</div>
</body>
</html>

代码2 

.container 的宽度塌陷了
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container{
            border:solid 1px red;
        }
        .l{
              width: 100px;
              height: 100px;
              background-color: #00ee00;
              border: solid 1px darkblue;
              float: left;
          }
    </style>
</head>
<body>
<div class="container">
    <div class="l">1</div>
    <div class="l">2</div>
    <div class="l">3</div>
    <div class="l">4</div>
    <div class="l">5</div>
    <div class="l">6</div>
    <div class="l">7</div>
    <div class="l">8</div>
</div>
</body>
</html>

 

 


解决浮动塌陷问题: 使用
 .clearflex::after


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container{
            border:solid 1px red;
        }
        .clearflex::after{
            content: '';
            display: block;
            clear: both;
        }
        .l{
              width: 100px;
              height: 100px;
              background-color: #00ee00;
              border: solid 1px darkblue;
              float: left;
          }
    </style>
</head>
<body>
<div class="container clearflex">
    <div class="l">1</div>
    <div class="l">2</div>
    <div class="l">3</div>
    <div class="l">4</div>
    <div class="l">5</div>
    <div class="l">6</div>
    <div class="l">7</div>
    <div class="l">8</div>
</div>
</body>
</html>

 



背景图片练习 
<head> <meta charset="UTF-8">

<title>Title</title>

<
style> /*}*/
body
{ /*body背景特殊*/ /*颜色 url repeat 上边为0 下边为0 撑满*/
background
: url("../aa.jpg") no-repeat 0 0/100%; }

</style>
</head>
<body>
<h1>lorem111</h1>

<p>lorem2222</p> <div>lorem333</div> </body>

 

Body元素的背景

背景颜色

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<style>

        html{
             background-color: #f8efc0;
         }
        /*}*/
        body{
            background:url("../aa.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
        }

    </style>
</head>
<body>
<h1>lorem111</h1>
<p>lorem2222</p>
<div>lorem333</div>
</body>

<style>

        /*html{*/
             /*background-color: #f8efc0;*/
         /*}*/
        /*}*/
        body{
            background:url("../aa.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
        }

    </style>
</head>
<body>
<h1>lorem111</h1>
<p>lorem2222</p>
<div>lorem333</div>
</body>

 

 

居中

行元素使用text-algin:center

 

转载于:https://www.cnblogs.com/chenduzizhong/p/11215936.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值