Python Web开发：制作门户网站 源代码
来自CloudWiki
Html代码
science.html:
{% 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>
<!-- 头部 -->
<!-- 头部 -->
<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>
<!-- 导航条 -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example"
aria-expanded="false">
<span>导航栏</span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example">
<ul class="nav navbar-nav" style="width:100%;">
<li class="nav-top">
<a href="{% url 'home' %}">首页</a>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
公司简介</a>
<ul class="dropdown-menu">
<li><a href="{% url 'aboutApp:survey' %}">企业概况</a></li>
<li><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
新闻动态</a>
<ul class="dropdown-menu">
<li><a href="{% url 'newsApp:company' %}">公司要闻</a></li>
<li><a href="{% url 'newsApp:industry' %}">行业新闻</a></li>
<li><a href="{% url 'newsApp:notice' %}">通知公告</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
产品中心</a>
<ul class="dropdown-menu">
<li><a href="{% url 'productsApp:robot' %}">
家用机器人</a></li>
<li><a href="{% url 'productsApp:monitoring' %}">
智能监控</a></li>
<li><a href="{% url 'productsApp:face' %}">
人脸识别解决方案</a></li>
</ul>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
服务支持</a>
<ul class="dropdown-menu">
<li><a href="{% url 'serviceApp:download' %}">
资料下载</a></li>
<li><a href="{% url 'serviceApp:platform' %}">
人脸识别开放平台</a></li>
</ul>
</li>
<li class="nav-top" id='science'>
<a href="{% url 'scienceApp:science' %}">科研基地</a>
</li>
<li class="dropdown nav-top">
<a href="#" class="dropdown-toggle on" data-toggle="dropdown">
人才招聘</a>
<ul class="dropdown-menu">
<li><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></li>
<li><a href="{% url 'contactApp:recruit' %}">加入恒达</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 分割线 -->
<div class="line"></div>
<!-- 广告横幅 -->
<div class="container-fluid">
<div class="row">
<img class="img-responsive model-img" src="{% static 'img/science.jpg' %}" alt="科研基地">
</div>
</div>
<div class="container">
<!-- 主体标题 -->
<div class="model-details-title">
科研基地介绍
</div>
<!-- 主体内容 -->
<div class="model-details">
<p>
近二十年来，恒达致力打造“志存高远，一诺千钧”的企业文化，不断吸纳和培养人工智能高精尖人才，
逐步形成了一支技术过硬、乐于钻研、勇于创新的核心技术团队。目前，恒达科研基地分为计算机视觉、
机器人和视觉深度学习三个事业部，已为恒达在人脸识别、物联网平台搭建、机器人导航等高新算法
和模型研究领域打下了坚实基础。未来，恒达将继续坚定不移地投入科研，持续做好团队结构优化
和技术创新升级，力争实现引领全球人工智能发展的未来愿景。
</p>
<img class="img-responsive" style="max-width:700px;" src="{% static 'img/kyjd.jpg' %}">
<h3>研究方向</h3>
<h5>机器人导航：</h5>
<p>
多传感器路径规划、物联网一体化平台、远程人机交互、强化学习控制。
</p>
<h5>人体行为识别：</h5>
<p>
单用户行为识别、人体骨骼大数据分析、鲁棒特征抽取、多用户行为识别。
</p>
<h5>人脸属性识别：</h5>
<p>
人脸检测、属性分析、行人再识别。
</p>
</div>
</div>
<!-- 页脚 -->
<div class="container web-footer">
<!-- 站点地图 -->
<div class="row" id="map-footer">
<div class="col-md-2">
<dl>
<dt>公司简介</dt>
<dd><a href="{% url 'aboutApp:survey' %}">企业概况</a></dd>
<dd><a href="{% url 'aboutApp:honor' %}">荣誉资质</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>产品中心</dt>
<dd><a href="{% url 'productsApp:robot' %}">家用机器人</a></dd>
<dd><a href="{% url 'productsApp:monitoring' %}">智能监控</a></dd>
<dd><a href="{% url 'productsApp:face' %}">人脸识别解决方案</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>服务支持</dt>
<dd><a href="{% url 'serviceApp:download' %}">资料下载</a></dd>
<dd><a href="{% url 'serviceApp:platform' %}">人脸识别开放平台</a></dd>
</dl>
</div>
<div class="col-md-2">
<dl>
<dt>人才招聘</dt>
<dd><a href="{% url 'contactApp:contact' %}">欢迎咨询</a></dd>
<dd><a href="{% url 'contactApp:recruit' %}">加入恒达</a></dd>
</dl>
</div>
<div class="col-md-4" id="wx">
<p>扫描二维码，关注我们</p>
<img class="qrimg" src="{% static 'img/qr.png' %}" alt="wx">
<p>客服热线：<b style="font-size:20px">400 111 2222</b></p>
</div>
</div>
<!-- 版权 -->
<div class="row" id="patent-footer">
<p> © 2019 Python Web企业门户网站开发示例 版权所有 | 苏ICP备19006378号 </p>
</div>
</div>
<script>
$(function () {
$(".dropdown").mouseover(function () {
$(this).addClass("open");
});
$(".dropdown").mouseleave(function () {
$(this).removeClass("open");
});
});
</script>
<script type="text/JavaScript">
$('#{{active_menu}}').addClass("active");
</script>
</body>
</html>
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;
}
/*-------------导航栏------------*/
/* 导航条默认属性设置 */
.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;
}
/*-------------主体------------*/
/* 主题标题 */
.model-details-title{
padding:15px 0px;
font-size:18px;
border-bottom:1px #005197 solid; /* 底部添加蓝色边框 */
color:#005197;
margin-bottom:10px;
margin-top:30px;
}
/* 文字段落 */
.model-details p{
line-height:30px;
text-indent:2em;
text-align:justify;
text-justify:inter-ideograph;
}
/* 主体图像 */
.model-details img{
margin:0px auto;
}
/*-------------页脚------------*/
.web-footer{
width:100%; /* 占满整个浏览器宽度 */
margin-top:30px; /* 设置与上边缘距离 */
}
#map-footer{
background-color:#3A3A3A; /* 对整个站点地图设置背景色灰色 */
}
#map-footer dl{
text-align:center; /* 站点链接文字对齐 */
margin-top:40px; /* 设置表格与上边缘边距 */
}
#map-footer dt{
padding:3px; /* 表格标题内边距为3像素 */
color:#fff; /* 表格标题颜色为白色 */
}
#map-footer dd{
padding:3px; /* 表格内容内边距为3像素 */
}
/* 二维码广告段落 */
#map-footer p{
margin-top:20px;
margin-bottom:10px;
color:#fff;
font-size:16px;
}
#map-footer a{
color:#A6A6A6; /* 站点链接文字颜色设置 */
font-size:13px; /* 站点链接文字大小 设置 */
}
#map-footer a:hover{
color:#fff;
text-decoration:none; /* 去除站点链接鼠标移过时出现的下划线 */
}
#wx{
text-align:center; /* 二维码居中对齐 */
}
.qrimg{
max-width: 170px; /* 二维码最大宽度为170像素 */
}
/*-------------尾部版权------------*/
#patent-footer{
text-align:center;
background-color:#3A3A3A;
}
#patent-footer p{
margin-top:10px;
padding-right:80px;
color:#8d8d8d;
font-size:11px;
}
