css如何实现英文对话排版

html-css023

css如何实现英文对话排版,第1张

方法有很多种，是我就采用以下几种方式之一：

方式一：table布局

这种左右分别对齐的排版，第一反应用table。我知道肯定有人开始鄙视我，说什么年代了还在用table。但是，我想说的是table也是标准标签之一，把标签用在合适的地方，就是对标签最优的利用，不是吗?

*{

    margin: 0

    padding: 0

}

.personName{

    text-transform: uppercase

} <table>

    <tr>

        <td valign="top">

            <span class="personName">Georage：</span>

        </td>

        <td valign="top">

            <p>This is a good day.</p>

            <p>This is a good day.</p>

        </td>

    </tr>

    <tr>

        <td valign="top">

            <span class="personName">Ken：</span>

        </td>

        <td valign="top">

            <p>This is a good day.</p>

            <p>This is a good day.</p>

        </td>

    </tr>

</table>

方式二：利用dl标签

*{

    margin: 0

    padding: 0

}

.personName{

    text-transform: uppercase

    float: left

    width: 80px

    clear: left  /* 清除左浮动 */

}

.words{

    float: left

}

.dailog{

    overflow: hidden /* 可以清除浮动 */

    margin-bottom: 20px

    line-height: 24px

    font-size: 14px

}

<dl class="dailog">

    <dt class="personName">

        Georage:

    </dt>

    <dd class="words">

        <p>This is a good day.</p>

        <p>This is a good day.</p>

    </dd>

    <dt class="personName">

        Ken:

    </dt>

    <dd class="words">

        <p>This is a good day.</p>

        <p>This is a good day.</p>

    </dd>

</dl>

方式三：可以利用 ul 或者 ol 标签，方法类似 方式二。

方式四：可以全用div，具体也类似方式二，这里就不罗列了。

一些详细的样式就不写了，这里只写了主要的样式，仅供参考。

css是英文Cascading Style Sheets的缩写。

它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。