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

前言

真的超级简单，包你一写就会。

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

代码

CSS

body {
    margin: 100px 0 0 0;
    padding: 0;
    text-align: center;
    font-family: "times";
}

#container {
    position: relative;
    padding: 0;
    width: 750px;
    margin: 0 auto;
    text-align: left;
}

h1 span,
h2 span,
h3 span,
#contentBox p.p span {
    display: block;
    color: #E69800;
}

HTML

<div id="container">
    <h1><span>Have Only One Life</span></h1>
    <h2><span>by int</span></h2>
    <h3><span>Tip1</span></h3>
    <div id="contentBox">
        <p class="p">
            <span>
                There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug
                them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only
                one life and one chance to do all the things you want to do.
            </span>
        </p>
    </div>
    <!-- 第二点 -->
    <h3><span>Tip2</span></h3>
    <div id="contentBox">
        <p class="p">
            <span>
                May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you
                human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it
                probably hurts the other person, too.
            </span>
        </p>
    </div>
    <!-- 第三点 -->
    <h3><span>Tip3</span></h3>
    <div id="contentBox">
        <p class="p">
            <span>
                The happiest of people don’t necessarily have the best of everything;they just make the most of everything that
                comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have
                tried,for only they can appreciate the importance of people
            </span>
        </p>
    </div>
</div>

效果图

图1

总结

本文涉及的东西不多，都是些基础知识。涉及到的基础如下

display:block;//块状布局
position: relative;//相对定位
font-family: "times";//字体
text-align: center;//父级居中对齐
text-align: left;//子级居中对齐
margin: 0 auto;//外边距 上边0 其他右下左自动
padding: 0;//内边距为0
width: 750px;//容器宽度
color: #E69800;//颜色

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