对HTML/CSS来说是全新的。我已经做了顶部图像/标志,和头部。我如何得到像图片(3列)那样的文本格式?我只尝试使用有3列的表。然而,我认为它的风格更难考虑到它是一张桌子。如最大列宽/高度等。
提前谢谢!
单击以获取图像
我建议您在语义上保持正确,不要对任何事情都使用DIV标记。所讨论的文本是段落文本,因此应该在P标记中。
这适用于问题的三栏部分。它的优点是正确使用HTML标记的语义,并使用CSS生成类似表格的格式,而不需要犯上世纪90年代那样实际使用表格的错误。
编辑:另一个注释。您会发现CSS float属性有它的用途。然而,当你使用它的时候,你也会发现过度使用它会使你的布局变得更加复杂,并导致你最终开始拔头发。display table type属性是我在不久的过去做了几年前端工作后比较喜欢的。
<html>
<head>
<style type="text/css">
.row {
display: table-row;
}
.cell{
display: table-cell;
vertical-align: top;
width: 33.33%;
}
</style>
</head>
<body>
<div class="row">
<p class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus blandit neque dapibus volutpat. Donec et dapibus leo. Ut at sodales magna, quis varius lacus. Ut sapien enim, fermentum eu egestas sed, pretium vel dolor. Nullam congue odio ut sem volutpat, ac dictum mi mattis. Quisque in purus sollicitudin nisl dapibus bibendum a a quam. Sed tristique augue nisi, quis interdum odio aliquet in. Aliquam tristique, dolor sed suscipit lobortis, eros enim mattis purus, vitae consectetur ante est nec libero. Aenean semper, ipsum eget venenatis eleifend, erat erat dignissim mi, non lacinia justo lorem at tortor. Aenean et erat suscipit velit porta placerat nec sit amet augue. Nulla non sem non tellus pellentesque ornare. Vivamus volutpat eget lacus eu dignissim. Sed venenatis euismod tempus. </p>
<p class="cell">Integer euismod felis et elit dapibus laoreet. Pellentesque et massa vitae orci pharetra imperdiet. Proin ultricies velit erat, a semper arcu volutpat eu. Morbi feugiat sapien non nisi faucibus elementum. Curabitur sed justo et enim maximus tempus. Donec posuere gravida justo sit amet dignissim. Etiam vestibulum mauris eros, vitae blandit justo pellentesque nec. Ut varius mattis volutpat. </p>
<p class="cell">Nulla vulputate ipsum leo, ut ornare massa malesuada et. Donec metus enim, viverra id diam a, luctus sagittis turpis. Etiam euismod, ex id convallis tristique, odio tellus placerat nunc, in dapibus risus massa non nulla. In placerat lectus tortor, vel gravida leo pharetra eget. Donec mollis facilisis pharetra. Nulla commodo quam tellus, eget hendrerit nisi aliquet id. Duis sagittis enim eu sodales bibendum. Maecenas tincidunt id mauris vitae ultricies. </pclass="inline">
</div>
</body>
</html>
对不起,我忘了回答你的第二个问题。你可以用它,然后应用你想要的图形设计。只是不要忘记设置宽度等于100%。此外,重要的是,你想要固定的位置或不。你可以在我提到的网站里面找到所有的东西。如果还有什么事我很乐意帮忙。祝你好运
只需输入此样式
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
}
把这个代码放在图像代码下面,
<div class="column">
<p>It occurs in a wide range in sub-Saharan Africa</p>
</div>
<div class="column">
<p>The Indian subcontinent to Southeast and East Asia..</p>
</div>
<div class="column">
<p>The leopard is one of the five extant </p>
</div>