方法有很多种,是我就采用以下几种方式之一:
方式一: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样式分三种,内部样式,内联样式和外部样式。外部样式,顾名思义,也就是通过<link />引入的css样式文件,而内部样式呢,主要是放在<style></style>中的样式,而内联样式,就是直接嵌入标签的,充当标签的一个属性,使用style='这里写样式' 来实现。他们的优先级是内联样式的优先级最高,其次判断内部和外部样式的优先级得看它们在html中出现的位置,一般来说,越靠后的优先级也就越高。
css是英文Cascading Style Sheets的缩写。
它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
它包含3种类型,内部样式,行内样式和外部样式表三种
作用的效果是按顺序从下到上,相同样式下面的会覆盖原有样式,除特殊情况外,一般都是行内样式>内部样式>外部样式。
以div为例
行内样式写法:
在style里面写样式
<div style="height:30pxbackground:#f00"></div>
内部样式:
在head标签内加入style标签,在标签内写样式:
<style>
div{height:30pxbackground:#f00}
</style>
外部样式是建立一个新文件后缀名为.css
举个例子:
建立style.css文件放在项目根目录下:
在里面写入
div{height:30pxbackground:#f00}
然后保存,在html的head标签内调用样式
<link rel="stylesheet" type="text/css" href="style.css" />