CSS基础网页编辑

CSS8：

<style>
    .article,
    .aside {
        float: left
    }
    
    .article {
        width: 40%;
        background: black;
        height: 900px;
        color: white;
    }
    
    .aside {
        width: 60%;
        height: 900px
    }
    
    img {
        height: 100%;
        width: 100%
    }
    
    #div {
        margin: 35% 50px;
    }
    
    h1 {
        font-size: 50px;
    }
</style>
<div class="article">
    <div id="div">
        <h1>Alice.</h1>
        <p>Lorem ipsum dolor sit </p>
    </div>
</div>
<div class="aside">
    <img src="https://static1.bcjiaoyu.com/7c6df0490bd86a401c7237d69ea01440_n.png-1200x800" />
</div>

效果为:

。。。。。。。。。。手动划线
啦啦啦啦啦啦
。。。。。。。。。。

<style>
    .column1,
    .column2,
    .column3 {
        float: left;
    }
    
    .column1 {
        width: 50%;
        height: 900px;
    }
    
    .column1 div,
    .column2 div,
    .column3 div {
        padding: 10px;
    }
    
    .column2,
    .column3 {
        width: 25%;
        height: 900px;
    }
    
    button {
        background: #2B73B7;
        border: none;
        color: white;
        height: 50px;
        width: 120px;
    }
</style>
<div class="container">
    <div class="column1">
        <div>
            <h2>Meacenas luctus</h2>
            <p>Pellentesque lectures gravida blandit</p>
        </div>
        <p>This is <strong>Low-Down</strong>nghjngjsztrghbbvnggghshztfhbk gblf bhgbipxnbiuvbnjvbnngiprgbnngjb nlbnjkvcbn lxhbgptub[urfbgjnhjbnghptughtghthoftelapbh</p>
        <button>ETIAM posuere</button>
    </div>
    <div class="column2">
        <div class="title">
            <h2>Marius Vuluputure</h2>
        </div>
        <img src="https://static1.bcjiaoyu.com/bac6d8a780aa161dad20d1169466ae43_o.jpg-282x150" />
        <p>ujgvfligbvflaiygbvvvvvvgvb</p>
        <button>ETIAM posuere</button>
    </div>
    <div class="column3">
        <div class="title">
            <h2>Tsvgv Mgilagf</h2>
        </div>
        <img src="https://static1.bcjiaoyu.com/e86514468fa80e95b13db4dca98d77dd_a.jpg-282x150" />
        <p>ujgvfligbvflaiygbvvvvvvgvb</p>
        <button>ETIAM posuere</button>
    </div>

</div>

效果为：

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
啦啦啦啦啦啦啦啦啦啦
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

<style type="text/css">
    * {
        padding: 0px;
        margin: 0px
    }
    
    #col1 {
        background: url("https://static1.bcjiaoyu.com/ad9d3d1d32741743f26b6ee2c3479273_g.jpg-1400x788") right center;
        height: 600px;
        width: 100%;
    }
    
    #col2 {
        background: url("https://static1.bcjiaoyu.com/ec45983f2f00c685f15c86f2058e99fe_h.jpg-1400x788") left center;
        height: 600px;
        width: 100%;
    }
    
    #col3 {
        background: url("https://static1.bcjiaoyu.com/c26e0994bded6c5e223ce256ca8e1121_f.jpg-1400x788") right center;
        height: 600px;
        width: 100%;
    }
    
    h1 {
        color: #1ABC9C;
        padding: 100px 100px 0px 150px;
    }
    
    p {
        padding: 0 100px;
        text-align: right
    }
    /* 文字排列方式 */
    
    .wrap1 div {
        height: 600px;
        width: 50%;
        background: #FFFFFF;
    }
    
    .wrap2 div {
        height: 600px;
        width: 50%;
        background: #FFFFFF;
        float: right;
    }
</style>
<div id="col1" class="wrap1">
    <div>
        <h1>Ipsum Iroem sed magna</h1><br>
        <p>This is a random passenage which is written by the creator.I hope I have more time to learn tip by tip.I hope I could do what I love to do someday.</p>
    </div>
</div>
<div id="col2" class="wrap2">
    <div>
        <h1>Ipsum Iroem sed magna</h1><br>
        <p>This is a random passenage which is written by the creator.I hope I have more time to learn tip by tip.I hope I could do what I love to do someday.</p>
    </div>
</div>
<div id="col3" class="wrap1">
    <div>
        <h1>Ipsum Iroem sed magna</h1><br>
        <p>This is a random passenage which is written by the creator.I hope I have more time to learn tip by tip.I hope I could do what I love to do someday.</p>
    </div>
</div>

效果为：

到最后了到最后啦。结束
以上就是近期的一些一些学习笔记
初学，查看源代码也很方便，但还是想写个博客记录一下嘿嘿。
以后也要努力努力再努力！！！