Oma*_*mar 4 html css html5 css3
好吧,我在2001年把html&css倾斜了.我习惯做这样的事情(要创建一个带有"垂直列"布局的网站):
<html>
<head>
<title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
<tr>
<td id="header" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / header -->
<!-- / content -->
<tr>
<td id="col1" name="menu"><!-- content code/php include --></td>
<td id="col2" name="content_left"><!-- content code/php include --></td>
<td id="col3" name="content_right"><!-- content code/php include --></td>
</tr>
<!-- / content -->
<!-- footer -->
<tr>
<td id="footer" colspan="3"><!-- header code/php include --></td>
</tr>
<!-- / footer -->
</table>
</body>
</html>
容易,一切都按照我想要的方式自动对齐,没有css头痛等等.那时候生活很美好.然而,不久前,我读到这种方法不应再使用了.我打算尝试使用一堆div的新方法,但w3c和w3c的验证不喜欢你使用块元素作为内联元素... WTF !!!
所以...我的沮丧让我问你们:
怎么样？如何以"现代方式"完成这样的事情......尽可能简单？html 5有更好的方法吗？
为什么？为什么现在我们不应该使用这种表格方法在网站上获得"垂直列布局"？
HOW?
选项1:Google的"CSS 3列布局".在过去6年左右的时间里,这已经得到了很好的报道,并且有大量的教程.
选项2:Google"CSS框架"并选择一个来构建您的布局.960.gs是一个受欢迎的.
WHY?
理想情况下,您将表格用于表格数据,而css则用于布局页面的其余部分.为什么？那么,理论上,CSS为您提供了更多的灵活性.最好的例子可能是响应式网页设计.在iPhone上,我可能需要2列.在我的iPad上,我可能需要4列.这一切都可以通过CSS来完成,但如果使用表格硬连接HTML,则会变得非常复杂.
下面是我拼凑在一起的基本网格,您可以使用任何规模的网站.您需要使用隐藏溢出或clearfix清除列上的浮动.如果您的项目不需要支持IE7,您可以使用box-sizing边框为您的列添加填充,否则在每列中添加一个额外的元素用于填充.
虽然我可以理解,使用表格制作列非常容易,但这对于布局来说几乎是唯一的.
HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header></header>
<div class="content grid">
<div id="col1" class="col s1of3"></div>
<div id="col2" class="col s1of3"></div>
<div id="col3" class="col s1of3"></div>
</div>
<footer></footer>
</body>
</html>
CSS:
.grid {
}
.grid .col { float: left; }
.grid .col.s1of1 { width: 100%; }
.grid .col.s1of2 { width: 50%; }
.grid .col.s1of3 { width: 33.33333333%; }
.grid .col.s2of3 { width: 66.66666666%; }
.grid .col.s1of4 { width: 25%; }
.grid .col.s3of4 { width: 75%; }
.grid .col.s1of5 { width: 20%; }
.grid .col.s2of5 { width: 40%; }
.grid .col.s3of5 { width: 60%; }
.grid .col.s4of5 { width: 80%; }