Rumah >hujung hadapan web >html tutorial >div+css布局之固定浮动布局_html/css_WEB-ITnose
div+css布局之固定浮动布局_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 12:29:391190semak imbas
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;} 效果如下：
这种布局的好处是：由于固定了div的宽和高，所有改变浏览器窗口的大小不是影响到div的显示。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：div+css的浮动常出现的问题以及解决办法_html/css_WEB-ITnoseArtikel seterusnya：DIV+CSS+JS树形菜单,可以刷新不改变菜单_html/css_WEB-ITnose