网页footer背景(stick footer布局)
今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小
先说一下开始的做法:
1.footer底部加background,并设置其大小
2.footer里面添加div,写内容
问题:内容总是在最上面,如果使用margin或者padding则要指定一个固定值,万一哪天换了背景岂不是要重新设置?
于是百度,然后结合自己的思考找到了解决办法:
padding-top: 410px;
background: url('./img/footer.jpg') no-repeat center;
background-size: 100%;
background-position:top center;
原理,padding内部可以填充内容,比如背景图片,所以把footer的padding-top顶上去,就可以让背景图片也跟着上去了,当然还有background也要变成top,利用padding是透明的原理,实现了这个功能
小伙伴们,你们想到了吗
网页footer背景(stick footer布局)的更多相关文章
- css 中 stick footer 布局实现
做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...
- stick footer布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...
- 前端-带header和footer的双栏布局
目标是实现如上图带header和footer的双栏布局,其中右侧sidebar是固定宽度,左侧content是自适应: https://www.zybuluo.com/dengzhirong/note ...
- SEO为什么要求网页设计师用DIV+CSS布局网页?
问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+C ...
- stick footers布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...
- css经典布局—stick footer布局
html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...
- Stick footers布局总结
一.Sticky footers解释 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如 ...
- css+div网页设计(二)--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- sharepoint 2010 页面添加footer方法 custom footer for sharepoint 2010 master page
转:http://blog.csdn.net/chenxinxian/article/details/8720893 在sharepoint 2010的页面中,我们发现,没有页尾,如果我们需要给页面添 ...
随机推荐
- python文件处理-读、写
Python中文件处理的操作包括读.写.修改,今天我们一起来先学习下读和写操作. 一.文件的读操作 例一: #文件读操作 f = open(file="first_blog.txt" ...
- PHP网站
1.NetBeans 解决PHP调试问题:https://netbeans.org/ 支持PHP调试的版本 2. http://document.thinkphp.cn/manual_3_2.html ...
- 04-nginx日志管理
做了几年PHP,老板.经理没说让我管过日志这东西.一般牵涉到日志运维这主要是运维的工作.但是这一章节主要是以拔高性质为主.分析日志的管理方式.PHP程序员不能光靠PHP成为高手,PHP不就if els ...
- SpringMVC 课程第一天
SpringMVC第一天 框架课程 1. 课程计划 第一天 1.SpringMVC介绍 2.入门程序 3.SpringMVC架构讲解 a) 框架结构 b) 组件说明 4.SpringMVC整合My ...
- Marr的视觉计算理论
Marr的视觉计算理论立足于计算机科学,系统地概括了心理物理学.神经生理学.临床神经病理学等方面已取得的所有重要成果,是迄今为止最为系统的视觉理论.Marr 的视觉计算理论虽然在细节甚 ...
- 跨平台的图形软件Dia
一款非常不错的软件Dia,软件很小,免费.好用.跨平台(linux.windows.mac).可导出多种格式图片,除了流程图.UML建模图,还可以绘制其他很多图. ubuntu下可以直接通过命令行su ...
- 微信WeixinJSBridge API 屏蔽右上角分享等常用方法
WeixinJSBridge这个API有几个功能还是相当有用的,比如: 1.隐藏微信网页右上角的按钮(...按钮):开发者可以用这个功能来禁止当前页面被分享 2.隐藏微信网页底部的导航栏(比如前进后退 ...
- Python3 Scrapy + Selenium + 阿布云爬取拉钩网学习笔记
1 需求分析 想要一个能爬取拉钩网职位详情页的爬虫,来获取详情页内的公司名称.职位名称.薪资待遇.学历要求.岗位需求等信息.该爬虫能够通过配置搜索职位关键字和搜索城市来爬取不同城市的不同职位详情信息, ...
- 方向ajax(http long request实现实时通信)
现在我们就要通过这种方法来实现实时通信,先说一下原理: 客户端发起一个ajax长链接查询,然后服务端就开始执行代码,主要是检查某个文件是否被更新,如果没有,睡一会(sleep),醒来接着检查 如果客户 ...
- 卡2-SLAM
---恢复内容开始--- 1.下载 首先需要从github上Git以下两个包: git clonehttps://github.com/ros-perception/open_karto(开源的kar ...