【4】网站搭建:导航栏与页脚 |
您所在的位置:网站首页 › 导航栏代码怎么打 › 【4】网站搭建:导航栏与页脚 |
原文出处:https://jzfblog.com/detail/42,文章的更新编辑以此链接为准。欢迎关注源站文章!一、前言
经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作,但我选择的方法是使用Bootstrap框架,还有给每个网页都添加一段导航栏代码会显得特别冗余,所以这里还涉及到一个模板继承的知识点,我将模板继承知识写在了Django入门: (第八天) 模板定义与继承,方便查阅。 那么有了模板继承的知识以后,就可以给整个站点设计一个公共的代码部分-导航栏,将模板页面加入到路径中,修改settings.py文件,设置TEMPLATES的DIRS值。 'DIRS': [os.path.join(BASE_DIR, 'templates')], 二、引入bootstrap做完上面这一步,接下来一个知识点就是静态文件的处理,它包括css,js,图片,这些都属于静态文件,那么同样,静态文件处理部分内容也在Django入门: (第十一天) 处理静态文件详细说明,这里我给出我的路径。 base.css文件存放路径 /mainsite/static/blog/css/base.css bootstap文件存放路径 /mainsite/static/bootstrap-3.3.7将这些都准备工作都做好以后,就可以开始编写base.html页面了,因为引入了静态资源处理,就需要在base.html开头处加上 {% load static from staticfiles %}静态文件需要在head标签引入: 三、导航栏样式现在可以编写body体内的代码了,主要是用到bootstap框架,简单的介绍也在移动端库和框架,不过还是建议查看bootstap的文档:Bootstrap中文文档,内部介绍的更为详细还有例子解释,在组件的右边有导航栏的使用方法,这个都可以根据自己需要的功能自行分析添加,所以我就直接贴出我的导航栏部分代码。 蒋振飞的博客 {# #} {# 博客首页 #} 博客首页 {# 博客列表 #} 博客列表 {# 博客分类 #} 博客分类 {# 日期归档 #} 日期归档 {# 关于我 #} 关于我 {# 搜索框 #}这是我的导航栏排布,可以根据功能自己添加相应的模板页面和功能处理,其中用户登录和注册留到后面介绍用户操作再作解释。 四、页脚样式导航栏已添加成功,那么还缺少页脚功能,如关于本站信息和网站备案号等。页脚其实有很多种方法,而且注意不是将页脚完全固定到窗口底部一直显示,而是可以跟随滚动条滚动。我使用的是position定位的方法,还有一种叫做负margin的方法,比如说下面这个是一个html文件的导航栏,内容,页脚。 在使用position定位的时候,注意要将body采用绝对定位,而且padding-bottom的高度一定要大于页脚内容的高度。 body{ min-height:100%; position:absolute; padding-bottom: 30px; /*需要 >= footer的height值*/ } .footer{ height:30px; position:absolute; bottom:0px; }以下是我的页脚代码: 关于本站1.基于Django+Bootstrap开发 2.主要发表本人的技术笔记与随笔 3.本站于2018-5-30开始建站 建议反馈1.欢迎注册评论 2.可在相应的博文底下评论 3.发邮件到[email protected] 欢迎联系:1378482556 :https://github.com/XiaoFei-97 Welcome to visit my website © Jack Jiang 赣ICP备18008471号导航栏与页脚部分base.css如下: body{ margin-top: 50px!important; background-color: #4cae4c; margin-bottom: 2em; font-size: 2em; min-height:100%; position:absolute; width: 100%; padding-bottom: 10em; } .footer{ width: 100%; position: absolute; bottom: 0; } .website-info{ overflow: hidden; background-color: #e7e7e7; padding-left: 10%; } .website-info h4{ padding-bottom: 3px; color: #424242; font-weight: bold; border-bottom: 1px solid #aaa; } .about, .response, .contact{ float: left; margin-right: 10%; margin-left: 2% ; font-size: 0.75em; } .about p, .response p, .contact p{ margin-bottom: 0.2em; } .copyright{ text-align: center; padding: 0.5em 0; background: #4F5893; color: #e7e7e7; bottom: 10em; } .copyright a{ color: #fff; margin-left: 1em; } .copyright a:hover{ color: cyan; }原文出处:https://jzfblog.com/detail/47,文章的更新编辑以此链接为准。欢迎关注源站文章! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |