小编给大家分享一下bootstrap经典网页布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

HTML代码

<divclass="logo">logo</div><divclass="container-fluid"><divclass="rowmain"><divclass="col-md-3nav">nav</div><divclass="col-md-9content"><divclass="content-body">content</div></div></div></div>CSS样式

代码分为格式化代码(用于清除不同浏览器兼容性问题)

布局代码(用于界面布局的代码)

<style>/*淘宝CSS格式化代码*/body,h2,h3,h4,h5,h6,h7,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}h2,h3,h4,h5,h6,h7{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:couriernew,courier,monospace;}small{font-size:12px;}ul,ol{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}legend{color:#000;}fieldset,img{border:0;}button,input,select,textarea{font-size:100%;}table{border-collapse:collapse;border-spacing:0;}/*布局CSS代码*/body,html{background:#EAEEF2;width:100%;height:100%;color:lightblue;}.container-fluid{background:aquamarine;height:100%;}.logo{background:black;font-size:40px;padding-left:20px;height:60px;min-height:60px;width:100%;position:fixed;top:0;right:0;z-index:100;}.nav{background:white;font-size:30px;height:100%;width:15%;float:left;position:relative;margin-right:-100%;box-shadow:0px2px3px2pxrgba(0,0,0,0.1);}.content{height:100%;width:85%;margin-left:15%;}.content-body{padding-left:15px;padding-right:15px;background:white;height:100%;font-size:300px;box-shadow:0px0px10pxrgba(0,0,0,0.3);overflow:auto;}.main{background:#F8F8F8;height:100%;padding-top:68px;padding-bottom:6px;}</style>

以上是“bootstrap经典网页布局”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！