做一个常规的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图能够完整的拼起来,不会变形。
转载于:https://www.cnblogs.com/cherishli/p/6579585.html
做一个常规的banner图——负边距的使用、banner图的拼法相关推荐
- 2020 用html做一个简单的时间显示(12小时制)
用前端html做一个简单的时间显示(12小时制) 如图所示 显示年月日.时间.上下午以及星期几 功能: 1. 此代码解决时间比如秒数 为单数时,在前面补0 //值小于10时,在前面补0 functio ...
- CSS布局奇淫巧计之-强大的负边距
负的边距好像能减小元素在文档流中的尺寸一样,但事实上,它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因此位置也就发生变化了. 实例: 因为P为block元素且没有 ...
- html中设置负边距的意义,css负边距之详解
自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史.正因为此,从那以后CSS布局成为了优雅代码的代名词. 对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功.这就 ...
- 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)
大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
- Tableau必知必会之学做一个实用的热图日历
这种图表我们就叫它热图日历,通过方形展示具体日期,通过颜色呈现该日期的数值多少. 通常我们可以将它用作仪表板上的筛选器,来查看月.周.日的详细情况,通过它可以很容易查看具体到每一天的情况. 为方便学习 ...
- scratch(图形化编程工具)做一个贪吃蛇的游戏(包含视频讲解+源码)!
用scratch做一个贪吃蛇游戏! 下边上视频讲解: 代码部分,开始按钮: 开始界面文字动画: 结束页面文字动画: 蛇头代码: 蛇身代码: 食物代码: 好了,今天的教程就分享到这里吧. 本篇文章完整代 ...
- VUE如何快速做一个轮播图
1. 第三方插件 https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper -- ...
- 做一个前端网页送给女朋友~轮播图+纪念日
文章目录 1. 轮播图框架 2. 轮播图大盒子实现 1. 盒子及图片的可视化 2. 将图片重叠起来并放入轮播图盒子中 ...相对定位与绝对定位 3. 添加左右按钮 4. 点击按钮跳转图片 5. 鼠标离 ...
- 十行代码,我用Python做一个迷你版的美图秀秀!
美图秀秀相信大家都不陌生,大家只要操作美图秀秀,就可以P掉图片中脸上的一些瑕疵,让人变得更加的美丽.今天小编就带领大家来借助Python和Flask来实现一个美图秀秀的网页设计,大家只需要通过网页上传 ...
最新文章
- 重磅直播|中科慧眼崔峰博士详解深度相机原理及其应用
- 有史以来的第一个脚本 找出三个数的最大数字
- 首次使用Cesium加载3D数据成功
- 【Linux】6.服务器会话的screen用法
- frome here on out
- SAP Commerce Cloud Spartacus UI 的高阶 reducer 设计
- 中国AI人才缺口500万,10本硬核技术书带你上车
- UGUI——基本组件
- 如何对CentOS FTP服务配置 - 51CTO.COM
- 针对PostgreSQL的Linux下XFS文件系统优化。
- pandas的基本函数
- mapbox之点击图斑更换图斑图片
- python json格式转换后,中文乱码
- Python函数不定长参数之*args与**kwargs
- MySQL 中的定时任务
- HTML中使背景图片自适应浏览器大小
- MIUI12或android11找不到QQ文件的问题
- python代码画樱花教程-python画樱花树代码 具体代码介绍
- 练习题:打印26个小写字母
- seekbar自定义android,Android自定义SeekBar实现视频播放进度条
热门文章
- 【Mac】tar 打包指定目录并排除某些目录或文件
- ZOJ 1450 Minimal Circle 点集的最小圆覆盖
- QT实现图像处理-傅立叶变换、傅立叶反变换、平滑、锐化与模板匹配
- [react] 如何解决引用类型在pureComponent下修改值的时候,页面不渲染的问题?
- react学习(67)--git 屏蔽文件不被追踪
- [html] 页面导入样式时,使用link和@import有什么区别?
- [css] 你认为sass和less的最大区别是什么呢?你喜欢哪个?为什么?
- [vue-cli]不用vue-cli,你自己有搭建过vue的开发环境吗?流程是什么?
- 前端学习(1780):前端调试之快速转存站点的方法
- 前端学习(1615):前端系列实战课程之javascript简介