Python Web开发：制作门户网站页面头部

来自CloudWiki
跳转至： 导航， 搜索

制作页面头部

编写<head>部分

{% load staticfiles %}
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>恒达科技|{% block title %}{% endblock %} </title>
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css/style.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>

<body>
    <!-- 头部 -->
</body>
</html>

其中，其他为bootstrap自带文件，style.css文件为自定义文件以方便个性化样式设置。

头部logo图片和带图标的说明文字

在body添加如下代码： 

 
    <!-- 头部 -->
    <div class="container top">
        <div class="row">
            <div class="col-md-6">
                <a>
                    <img class="img-responsive" src="{% static 'img/logo.jpg' %}">
                </a>
            </div>
            <div class="col-md-3 hidden-xs">
                <a class="phone ant">
                    <span class="glyphicon glyphicon-phone"></span>电话：400 1111 0000    
                </a>
            </div>
            <div class="col-md-3 hidden-xs">
                <a class="mail ant">
                    <span class="glyphicon glyphicon-envelope"></span>邮箱：hengda@126.com
                </a>
            </div>
        </div>
    </div>

外部div: 

container类：限定宽度，适用于响应式布局
top类：后期在style.css中新建的

内部div: 

 用栅格分为三部分：col-md-6，col-md-3，col-md-3

图标样式： 

 phone，mail 采用了提供的小图标。
 自定义样式ant

自定义样式

static/css/style.css: 

/*-------------头部------------*/
/*头部边距*/
.top {
    margin-top: 10px;
}

/*电话图标*/
.phone {
    color: #666;
    float: right;
}

/*邮箱图标*/
.mail {
    color: #666;
    float: right;
}

/*取消小图标的下划线*/
.ant:link {
    text-decoration: none;
}

.ant:visited {
    text-decoration: none;
}

.ant:hover {
    text-decoration: none;
}

.ant:active {
    text-decoration: none;
}

运行项目，通过浏览器访问：http://127.0.0.1:8000/scienceApp/science/

注意修改CSS时，浏览器可能不能立即显示，可以清理一下浏览器缓存：https://jingyan.baidu.com/article/c35dbcb0e7084e8917fcbc7e.html

Python21042402.png

导航栏

使用[Python Web开发：基于Django模板的静态资源配置]中的导航栏代码即可，将导航栏<nav></nav>部分复制到<body>标签内，查看效果

接下来编辑style.css ，对导航栏样式进行微调： 

/*-------------导航栏------------*/
/* 导航条默认属性设置 */
.navbar-default {
    margin-bottom: 0px;
    /* 底部边距调整为0 */
    border: 0px;
    /* 去掉边框 */
    background-color: #e7e7e7;
    /* 设置导航栏背景色 */
    margin-top: 30px;
    /* 设置导航栏的上边距 */
}

/* 导航栏栏目激活时属性 */
.navbar-default .navbar-nav .active a,
.navbar-default .navbar-nav .active a:hover,
.navbar-default .navbar-nav .active a:focus {
    background-color: #005197;
    /* 背景色设置为深蓝色 */
    color: #fff;
    /* 前景文字颜色设置为白色 */
}

/* 一级菜单鼠标移过时属性 */
.navbar-default .navbar-nav li a:hover {
    color: #fff;
    background-color: #005197;
}

/* 一级菜单单击展开时属性 */
.navbar-default .navbar-nav li.open a.on {
    color: #fff;
    background-color: #005197;
}

/* 下拉菜单内边距 */
.dropdown-menu {
    padding: 0px;
}

/* 二级菜单标签属性 */
.dropdown-menu li a {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #777;
    text-align: center;
}

/* 一级菜单宽度和文字对齐方式 */
.nav-top {
    width: 14%;
    text-align: center;
}

/* 导航栏与横幅的分割线 */
.line {
    height: 3px;
    width: 100%;
    background: #005197;
}

保存文件并查看效果。

现在只能点击时才能打开下拉菜单，添加以下代码，滑过时也可以添加： 

    <script>
        $(function () {
            $(".dropdown").mouseover(function () {
                $(this).addClass("open");
            });
            $(".dropdown").mouseleave(function () {
                $(this).removeClass("open");
            });
        });
    </script>
    <script type="text/JavaScript">
        $('#{{active_menu}}').addClass("active");
    </script>

Python21042403.png

取自“http://www.openbrains.net/mediawiki/index.php?title=Python_Web开发：制作门户网站页面头部&oldid=25907”