做一个常规的banner图——负边距的使用、banner图的拼法
在这之前，首先要了解如何设置块级元素在块级元素水平居中
方法：
水平居中
垂直居中
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css"> .div1{
width: 200px;
height: 200px;
/*background-image: url(img/002.png);*/
background-color: green; border:10px dotted red; background-clip: padding-box;
position: relative;
overflow: hidden; }
.div2{
width: 100px;
height: 100px;
background-color: palevioletred;
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
} </style>
</head>
<body>
<!---->
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
效果图：
掌握了上边的方法，我们就可以做个比较标准的banner图了。
下边是一个没有被切的banner 图的做法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#zb_banner{
width: 100%;
height:345px;
position: relative;
/*background-position: -260px 0px;*/
overflow: hidden;
}
#zb_banner .c_ban{
width: 1920px;
height: 345px;
background-image: url(../img/a01d20c11e264df890bd3e629e2420b0.jpg);
background-repeat: no-repeat;
position: absolute;
left: 50%;
margin-left: -960px; } </style>
</head>
<body>
<section id="zb_banner">
<div class="c_ban">
</div>
</section>
</body>
</html>
效果图如下：
最大化下的状态：
缩小窗口后的效果：
因为现在主流最大的显示屏是1920的，所以banner图一般也做成1920的，被切开的话，放到一个宽度1920的div里边就可以了，不用调整图的大小。只有这么设置才会不会因为浏览器窗口大小的变化而影响banner图的居中位置，也可以使被切开的banner图能够完整的拼起来，不会变形。
做一个常规的banner图——负边距的使用、banner图的拼法的更多相关文章
- css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- css负边距之详解(子绝父相)
来源 | http://segmentfault.com 原文 | The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- 做一个会PS切图的前端开发
系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...
- 使用ArcMap做一个1:5000标准分幅图并编号
实现这个project,十进制度.渔网工具.Excel if/Text函数.挂接Excel表.空间连接.投影这些知识是必须的.看懂本篇博文也就意味着大概掌握了以上知识. 坐标数据设置与编号标准依据&l ...
- 做一个vue轮播图组件
根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...
- (Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议 (图)
(Android+IOS)正在做一个新闻App,做的差不多了,听听大家的建议! 新闻采集器做好了,前端展示APP界面感觉还不是很好,还需要改进改进,希望发布(Android和IOS版本)前听听大家的建 ...
- 做一个 App 前需要考虑的几件事
做一个 App 前需要考虑的几件事 来源:limboy的博客 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...
- 做一个App前需要考虑的几件事
本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...
随机推荐
- MyBatis:学习笔记(1)——基础知识
MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...
- "the hypervisor is not running" 故障
在我们日常服务器管理中,常常会遇到创建虚拟机,如果在一台新部署的 Hyper-V 上新建一个 Virtual Machine 时,出现错误信息:"The virtual machine co ...
- Jackson注解学习参考（转）
转:http://wong-john.iteye.com/blog/1753402 以下内容摘录.翻译自https://github.com/FasterXML/jackson-annotations ...
- Untiy文档总结（1）-Profiling
这段时间上班了,不是什么大公司,虽说很闲但是不能断了学习,就开始看优化有关的文档,虽说自己英语渣的要死,但也要读下去,逼着自己翻译完了,里面有抄Unity圣典的,但自己是看Unity5.5文档写的,只 ...
- The 15th UESTC Programming Contest Preliminary G - GC?(X,Y) cdoj1564
地址:http://acm.uestc.edu.cn/#/problem/show/1564 题目: G - GC?(X,Y) Time Limit: 3000/1000MS (Java/Others ...
- 数据库dbutils
common-dbutils.jarQueryRunnerupdate方法:* int update(String sql, Object... params) --> 可执行增.删.改语句* ...
- 【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法
好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了 于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下 ...
- IOS开发创建开发证书及发布App应用(七)——在iTunes创建填写应用基本信息
7.在iTunes创建填写应用基本信息 依旧打开苹果的开发者网站 https://developer.apple.com/ 点击Member,如下图 (注意,下面的图示是登录之后的) 点击iTunes ...
- GDOI2014模拟pty爬山（mountain）
pty爬山(mountain) 在Pty学校附近,有一座名之为岳之麓的高山.Pty很喜欢和(哔--)一起爬山.山的平面模型如下:山由一个顶点集:A1,A2-An给定,保证Ai的x单调递增.我们将Ai和 ...
- 性能测试培训：定位jvm耗时函数
性能测试培训:定位jvm耗时函数 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...