html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="reset.css" rel = "stylesheet" type="text/css"> </head> <body> <div class="header"> i am header </div> <div class="main"> i am main <div class="wrap"> i am wrap <div class="content"> i am content </div> </div> <div class="edge"> i am edge </div> </div> <div class="footer"> <p><a href="http://fly.layui.com/">Fly社区</a> 2017 © <a href="http://www.layui.com/">layui.com</a> </p> <p> <a href="http://fly.layui.com/jie/3147.html" target="_blank">产品授权</a> <a href="http://fly.layui.com/jie/8157.html" target="_blank">获取Fly社区模版</a> <a href="http://fly.layui.com/jie/2461.html" target="_blank">微信公众号</a> </p> </div> </body> </html>
css代码：
/*网页整体置背景色*/ html{ background-color: #e2e2e2; } /*html reset*/ blockquote, body, button, dd, div, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); } /*网页体给一个80px的top margin*/ html body { margin-top: 80px; } /*头部部分：固定定位，总在最前，left 0，top 0，宽度100%，高度65，背景色*/ .header { position:fixed; z-index: 10000; left:0; top:0; width:100%; height:65px; background-color:#393D49; } /*主内容固定宽度布局1080px，margin 左右auto 居中对齐*/ .main{ width: 1080px; min-height: 600px; margin: 0 auto 15px; /*border: 2px solid green*/ } /*左浮动，宽度同父div*/ .wrap { float: left; width: 100%; min-height: 300px; } /*主内容区，给一个右边的margin，两栏布局的左边部分*/ .content { margin-right: 347px; } /*右边侧边栏，左浮动，这样就跑到了 wrap的左边，已经出到main的外面去了，所以给一个 -336px的margin-left 这里的relative 用来定位 edge里面的元素，取相对于我的意思*/ .edge { position: relative; float: left; top: 0; width: 336px; margin-left: -336px; } /*line-height和text-align是设置footer内的内容的，line-height用来指定p元素之间的间距，text-align，让内容水平居中对齐*/ .footer { margin: 50px 0 0; padding: 20px 0 30px; line-height: 30px; text-align: center; color: #737573; border-top: 1px solid red; }
显示效果
