教你怎样用几句CSS代码布局一个网页（二）

前言

超级简单，只是在原基础上加了一些东西。上一篇没看到同学可以点此链接教你怎样用几句CSS代码布局一个网页（一）查看。接下来我们继续昨天的话题，在原基础上加一些布局。

图片来自网络，侵权请联系删除！

示例代码

CSS

body {
    text-align: left;
    margin: 0;
    padding: 0;
    font-family: times;
    color: #464128;
}

/* 文本容器 */
.container {
    margin: 60px auto;
    font-family: inherit;
    width: 750px;
    padding-left: 270px;
    position: relative;
}
img{
    margin: 10px 0 10px 10px;
}
/* 三级标题 */
h3 {
    font-family: inherit;
    margin: 20px 0 0 10px;
}

p {
    font-family: inherit;
    margin: 20px 0 0 10px;
}

.list {
    font-family: inherit;
    position: absolute;
    top: 90px;
    width:270px;
    left: 0px;
    text-transform: lowercase;
    text-align: left;
}

.list .listChild {
    width: 270px;
    font-family: inherit;
}

.list h3 {
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 10px;
    color: #A29D66;
}

.list a {
    text-decoration: none;
    color: #A29D66;
}

.list a:hover {
    color: #000000;
    text-decoration: underline;
}

.list ul {
    margin: 0px;
    padding: 0px;
}

.list li {
    margin: 10px;
    text-align: center;
    list-style-type: none;
}

HTML

<div class="page-wrapper">
    <div class="container">
        <!-- one -->
        <h3>You are Absolutely Unique</h3>
        <p>Enjoy that uniquenesss1. You do not have to pretend in order to seem more like someone else. You do not have to
            lie to hide the parts of you that are not like what you see in anyone else.
        </p>
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1553243576,2482262889&fm=26&gp=0.jpg">
        <p>You were meant to be different. Nowhere, in all of history, will the same things be going on in anyone’s mind,
            soul and spirit as are going on in yours right now.
        </p>
        <p>If you did not exist, there would be a hole in creation, a gap2 in history, and something missing from the plan
            for humankind. Treasure your uniqueness. It is a gift given only to you. Enjoy it and share it!
        </p>
        <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2862225811,18225510&fm=26&gp=0.jpg">
        <p>No one can reach out to others in the same way that you can. No one can speak your words. No one can convey your
            meanings. No one can comfort others with your kind of comfort. No one can bring your kind of understanding to
            another person. No one can be cheerful and light-hearted3 and joyous4 in your way. No one can smile your smile. No
            one else can bring the whole unique impact of you to another human being.
        </p>
        <p>Share your uniqueness. Let it flow out freely among your family and friends, and the people you meet in the rush
            and clutter of living, wherever you are. That gift of yourself was given to you to enjoy and share. Give yourself
            away!
        </p>
        <p>See it! Receive it!</p>
        <p>Let it inform you, move you and inspire you!</p>
        <p>You are unique!</p>
        <aside class="list">
            <div class="listChild">
                <h3>相关文章</h3>
                <nav role="navigation">
                    <li>
                        <a href="https://www.jianshu.com/p/bc6ed6a3df63" class="design-name">You are unique（一）</a>
                    </li>
                    <li>
                        <a href="https://www.jianshu.com/p/9901d49725a4" class="design-name">You are unique（一）</a>
                    </li>
                    <li>
                        <a href="https://www.jianshu.com/u/d79bc23d0d83" class="design-name">You are unique（二）</a>
                    </li>
                    <li>
                        <a href="https://www.jianshu.com/p/faede9059b3c" class="design-name">You are unique（三）</a>
                    </li>
                </nav>
            </div>
        </aside>
    </div>
</div>

效果展示

图1

总结

这个示例比较重要的一个知识点就是定位——position。

(本文适合初学者，如果你是大佬级别的人物，我也欢迎指教！)