【转】超宽的banner条自适应浏览器大小始终居中的方法

简介: 现在越来越多的人使用宽屏的显示器了,所以传统的1024或者960的宽度banner条也逐渐的不被客户端访客所喜欢,所以现在在网站前端开发中一定要考虑到这一点,但是我们会发现在宽屏浏览器下设计出来的banner在传统的1024的显示器下浏览是会出现横向滚动横条。只要在对应标签插入如下CSS即可解决。 position: absolute;top: 0;left: 50%;margin

在越来越多的人使用宽屏的显示器了,所以传统的1024或者960的宽度banner条也逐渐的不被客户端访客所喜欢,所以现在在网站前端开发中一定要考虑到这一点,但是我们会发现在宽屏浏览器下设计出来的banner在传统的1024的显示器下浏览是会出现横向滚动横条。只要在对应标签插入如下CSS即可解决。

position: absolute;
top: 0;
left: 50%;
margin-left: -960px;//banner图大小的一半
width: 1920px;//图宽
height: 600px;//图高

 

 

目录
相关文章
|
6月前
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
925 0
|
JavaScript
一招教你实现自适应浏览器大小的Echarts饼状图
一招教你实现自适应浏览器大小的Echarts饼状图
360 0
|
6月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
231 0
|
1月前
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
80 0
|
5月前
|
移动开发 前端开发 JavaScript
解决浏览器兼容性问题的方法
解决浏览器兼容性问题的方法
|
4月前
|
移动开发 前端开发 JavaScript
解决浏览器兼容性问题的方法
解决浏览器兼容性问题的方法
|
5月前
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
91 5
|
4月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
4月前
|
JavaScript
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
37 0
|
6月前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集