fixedFloat.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>固定浮动布局-三列</title><link rel="stylesheet" style="text/css" href="style2.css"></head><body> <div id="header"><h1>上标题</h1></div> <div id="body"> <div id="navl">左导航</div> <div id="main">中内容</div> <div id="navr">右导航</div> </div> <div id="footer"><p>下版权</p></div></body></html>
style.css
/* CSS Document */*{ margin:0; padding:0;}body{ margin:10px;}#header{ border:1px solid black; width:600px; height:60px; margin:0 auto; margin-bottom:10px;}#header h1{ height:60px; line-height:60px; font-size:16px; text-align:center;}#body{ width:600px; margin:0 auto;}#navl{ border:1px solid black; width:150px; height:500px; float:left; margin-bottom:10px; background:lightcyan;}#main{ border:1px solid black; width:294px;/*边框也算一个像素*/ height:500px; float:left; margin-bottom:10px; background:lightblue;}#navr{ border:1px solid black; width:150px; height:500px; float:right; margin-bottom:10px; background:lightyellow;}#footer{ border:1px solid black; width:600px; height:60px; line-height:60px; margin:0 auto; text-align:center; clear:both;}The effect is as follows:
The advantage of this layout is that since the width and height of the div are fixed, changing the size of the browser window does not affect the display of the div.
Ranking of the top ten formal trading platforms
How to unlock android permission restrictions
The difference between header files and source files
Implementation method of js barrage function
What are the operators in Go language?
What are the linux deletion commands?
How to solve illegalargument exception
What are the development tools?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
