学习布局（10）简单布局

 CSS:

     .arc-list {
            width: 800px;
            padding: 15px 30px;
        }

        .arc-list dl {
            border-bottom: 1px dotted red;
        }

        .arc-list dt {
            float: left;
            width: 250px;
            height: 180px;
            padding: 25px;
        }

        .arc-list dd {
            padding: 25px 0;
            float: right;
            width: 470px;
            height: 180px;
        }

        .arc-list span {
            margin-right: 40px;
            color: #777;
        }

        .arc-list div {
            margin-bottom: 20px;
        }

        .arc-list h2 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }

        .arc-list dt img {
            width: 250px;
            height: 180px;
            border-radius: 15px;
        }

        .arc-list p {
            height: 70px;
            color: #777;
            line-height: 24px;
        }

 HTML：

<div class="arc-list">
        <dl class="clearfix">
            <dt><img src="../images/ev1.png" alt="自然风光"></dt>
            <dd>
                <h2>JavaScript网页脚本语言</h2>
                <div>
                    <span>时间: 2019年9月10日</span>
                    <span>文章类别: 自然美景 </span>
                </div>
                <p>
                    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。
                    它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。
                </p>
            </dd>
        </dl>
        <dl class="clearfix">
            <dt><img src="../images/ev1.png" alt="自然风光"></dt>
            <dd>
                <h2>Java</h2>
                <div>
                    <span>时间: 2011年9月10日</span>
                    <span>文章类别: 编程语言 </span>
                </div>
                <p>
                    Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、
                    指针等概念，因此Java语言具有功能强大和简单易用两个特征。
                </p>
            </dd>
        </dl>
    </div>