Gar*_*778 -8 html frameset frame
我的代码是这样的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
Prueba
</title>
</head>
<frameset rows="56px, *, 50px" border="0" framespacing="0" frameborder="NO">
<frame class="header" src="header.html">
<frameset cols="450px, *" border="0" framespacing="0" frameborder="NO">
<frameset rows="*,150px" border="0" framespacing="0" frameborder="NO">
<frame class="frame1" scrolling="auto" src="search_results.html">
<frame class="frame2" scrolling="no" src="info.html">
</frameset>
<frame class="frame3" scrolling="no" src="map.html">
</frameset>
<frame class="footer" scrolling="no" src="footer.html">
</frameset>
</html>
Run Code Online (Sandbox Code Playgroud)
我想删除所有帧并使用表重建它.我尝试了一些东西,但我没有得到我想要的结果.
<table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>
Prueba
</title>
</head>
<frameset rows="56px, *, 50px" border="0" framespacing="0" frameborder="NO">
<frame class="header" src="header.html">
<frameset cols="450px, *" border="0" framespacing="0" frameborder="NO">
<frameset rows="*,150px" border="0" framespacing="0" frameborder="NO">
<frame class="frame1" scrolling="auto" src="search_results.html">
<frame class="frame2" scrolling="no" src="info.html">
</frameset>
<frame class="frame3" scrolling="no" src="map.html">
</frameset>
<frame class="footer" scrolling="no" src="footer.html">
</frameset>
</html>
</table>
Run Code Online (Sandbox Code Playgroud)
那里.
但是认真的.您不希望使用表格进行布局.你也不应该使用框架.
要走的路是使用div.或者新的HTML5元素.
添加到HTML的一些新元素是:
部分元素
分组元素
不使用表格进行布局时的一些好处:
请注意,当您想要使用新的HTML5元素时,您应该设置正确的doctype:
<!DOCTYPE html>
Run Code Online (Sandbox Code Playgroud)
另请注意,"较旧"的浏览器(和IE)不知道新元素.要解决此问题,您可以在文档的头部添加这个简单的JS脚本:
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('time');
</script>
Run Code Online (Sandbox Code Playgroud)
你会得到的是如下:
CSS
?#body { width: 960px; }
aside { width: 450px; float: left; }
.content { margin-left: 450px; }
Run Code Online (Sandbox Code Playgroud)
HTML
<div id="body">
<header>
<h1>Your header</h1>
</header>
<aside>
<p>Aside</p>
</aside>
<div class="content">
<h2>Title</h2>
<p>Some text</p>
</div>
<footer>
<p>Your footer</p>
</footer>
</div> ?
Run Code Online (Sandbox Code Playgroud)
演示
| 归档时间: |
|
| 查看次数: |
135 次 |
| 最近记录: |