layui社区模板主页框架分析

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>
View Code

 

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;
}
View Code

 显示效果

posted @ 2017-03-20 12:27  青春无语  阅读(4629)  评论(0)  编辑  收藏  举报