Html 将表格布局转换为CSS布局
我需要一些帮助，使这个布局只与Html 将表格布局转换为CSS布局,html,css,layout,Html,Css,Layout,我需要一些帮助，使这个布局只与div和css一起工作 <table> <tr> <td colspan="2">Header</td> </tr> <tr> <td>Side Bar</td> <td> <table> <tr>
divcss<table>
<tr>
<td colspan="2">Header</td>
</tr>
<tr>
<td>Side Bar</td>
<td>
<table>
<tr>
<td>Top Menu</td>
</tr>
<tr>
<td>Main Content</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Footer</td>
</tr>
</table>
标题
侧栏
顶部菜单
主要内容
页脚
<div id="page">
<div id="main-header"></div>
<div>
<div id="side-bar"></div>
<div>
<div id="top-nav"></div>
<div id="main-content"></div>
</div>
</div>
<div id="main-footer"></div>
</div>
但是我有点迷恋CSS。这就是我想到的：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 16px;
}
#wrapper {
width: 80%;
min-width: 500px;
margin: 10px auto;
background: rgb(200,200,200);
}
#wrapper header h1 {
text-align: center;
background: #BADA55;
}
#wrapper nav ul {
list-style: none;
font-size: 0;
text-align: center;
background: red;
}
#wrapper nav ul li {
display: inline-block;
font-size: 16px;
padding: 1em 2em;
}
#wrapper aside {
float: left;
width: 30%;
background: blue;
}
#main_content {
float: right;
width: 70%;
background: green;
}
#wrapper footer {
clear: both;
background: black;
color: white;
}
</style>
</head>
<body>
<section id="wrapper">
<header>
<h1>Main Header</h1>
<nav>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
</header>
<section id="main_content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<aside>
<h3>Sidebar</h3>
<p>Sidebar content</p>
</aside>
<footer>
<p><small>Footer Information</small></p>
</footer>
</section>
</body>
</html>
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体大小：16px；
}
#包装纸{
宽度：80%；
最小宽度：500px；
利润率：10px自动；
背景：rgb（200200）；
}
#包装头h1{
文本对齐：居中；
背景：#BADA55；
}
#包装机导航{
列表样式：无；
字号：0；
文本对齐：居中；
背景：红色；
}
#包装器nav ul li{
显示：内联块；
字体大小：16px；
填料：1米2米；
}
#包装纸{
浮动：左；
宽度：30%；
背景：蓝色；
}
#主要内容{
浮动：对；
宽度：70%；
背景：绿色；
}
#包装页脚{
明确：两者皆有；
背景：黑色；
颜色：白色；
}
主割台
- 链接
- 链接
- 链接
- 链接
- 链接
佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯·普莱斯特拉特·埃利芬德·利奥。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、精粹葡萄汁调味品、红莓汁、豆豉箭叶。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi、tincidunt quis、accumsan porttitor、facilisis luctus、metus
边栏
边栏内容
页脚信息
div