Django打造大型企业官网

Posted 2022-01-06 derek1184405959

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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,menumargin:0;padding:0;
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,detailsdisplay:block;
tableborder-collapse:collapse;border-spacing:0;
caption,thtext-align:left;font-weight:normal;
html,body,fieldset,img,iframe,abbrborder:0;
i,cite,em,var,address,dfnfont-style:normal;
[hidefocus],summaryoutline:0;
lilist-style:none;
h1,h2,h3,h4,h5,h6,smallfont-size:100%;
sup,subfont-size:83%;
pre,code,kbd,sampfont-family:inherit;
q:before,q:aftercontent:none;
textareaoverflow:auto;resize:none;
label,summarycursor:default;
a,buttoncursor:pointer;
h1,h2,h3,h4,h5,h6,em,strong,bfont-weight:bold;
del,ins,u,s,a,a:hovertext-decoration:none;
body,textarea,input,button,select,keygen,legendfont:12px/1.14 arial,\\5b8b\\4f53;color:#333;outline:0;
bodybackground:#fff;
a,a:hovercolor:#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;

导航条效果

技术图片

以上是关于Django打造大型企业官网的主要内容，如果未能解决你的问题，请参考以下文章

Django打造大型企业官网

超细讲解Django打造大型企业官网（知了课堂）

项目部署

Django超细讲解与开发大型企业官网2018

Django2.1视频教程

首页第一条排名“品牌新官网”升级，(百度打造企业思域阵地)