Django打造大型企业官网（三）

四、前端首页

4.1.导航条实现

（1）templates/new/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知了课堂</title>
    <link rel="stylesheet" href="../../dist/css/index.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1239817_3xfonheuqlv.css">
</head>
<body>
    <header class="header">
        <div class="container">

            <div class="logo-box">
                <a href="/"></a>
            </div>

            <ul class="nav">
                <li class="active"><a href="/">资讯</a></li>
                <li><a href="/">创业课堂</a></li>
                <li><a href="/">企业服务</a></li>
                <li><a href="/">搜索</a></li>
            </ul>

            <div class="auth-box">
                <i class="icon-person iconfont"></i>&nbsp;&nbsp
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>

        </div>
    </header>
</body>
</html>

阿里云图标网站：https://www.iconfont.cn/

搜索person-->>添加入库-->>添加至项目-->>编辑图标-->>放大-->>仅保存-->>查看在线链接

（2）src/css/init.scss

清除浏览器默认样式

html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:;padding:;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:;}
body{background:#fff;}
a,a:hover{color:#333;}

（3）src/css/constants.scss

放一些常量

$pageWidth: 1170px

（3）src/css/index.scss

@import "init.scss";
@import "constants.scss";

.header{
    width: 100%;
    height: 64px;
    background: #3a3a3a;
    .container{
        width: $pageWidth;
        height: 100%;
        margin: 0 auto;
        overflow: hidden;

        .logo-box{
            width: 140px;
            height: 49px;
            background: url("https://www.xfz.cn/static/build/images/logo.png") no-repeat;
            margin-top: 8px;
            float: left;

            a{
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .nav{
            margin-left: 128px;
            float: left;

            li{
                float: left;
                margin-right: 40px;
                line-height: 64px;
                height: 64px;
                box-sizing: border-box;
                font-size: 22px;
                a{
                    color: #fff;
                }

                &.active{
                    border-bottom: 5px solid #5c87d9;
                }
            }
        }

        .auth-box{
            float: right;
            line-height: 64px;
            height: 64px;
            color: #fff;

            .iconfont{
                color: #fff;
                font-size: 20px;
            }

            a{
                color: #fff;
                font-size: 22px;
            }
        }
    }
}

导航条效果

4.2.主题盒子布局

templates/news/index.html

<div class="main">
        <div class="wrapper">
            <div class="news-wrapper"></div>
            <div class="sidebar-wrapper"></div>

        </div>

    </div>

src/css/index.scss

.main{
    width: 100%;
    margin-top: 84px;

    .wrapper{
        width: $pageWidth;
        margin: 0 auto;
        background: green;
        height: 1000px;
        overflow: hidden;

        .news-wrapper{
            float: left;
            width: 798px;
            height: 500px;
            background: yellowgreen;
        }

        .sidebar-wrapper{
            float: right;
            width: 356px;
            height: 500px;
            background: deeppink;
        }
    }
}

固定导航条

src/css/index.scss

.header{
    width: 100%;
    height: 64px;
    background: #3a3a3a;
    position: fixed;
    left:;
    right:;
    top:;

效果