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;

        }

    }

}

固定导航条