layui社區模板主頁框架分析

時間 2019-12-05

標籤 layui 社區模板主頁框架分析简体版

原文原文鏈接

html代碼：css

<!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

/*網頁總體置背景色*/
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;
}