首页 >web前端 >html教程 >请问这种背景黑框固定的效果如何实现的?是css还是js_html/css_WEB-ITnose

请问这种背景黑框固定的效果如何实现的?是css还是js_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:22:041197浏览

http://mindhacks.com/

需用电脑访问,手机看不到效果,请问这种背景黑框固定的效果如何实现的?不管右侧浏览器滚动条如何滚动,黑色背景边框都不变,我研究了半天没想明白,是css还是js?请大神指导!


回复讨论(解决方案)

通过CSS实现的,手机看不到效果的原因是响应式页面

原理如下:
设置body的背景色为#1a1a1a 深灰,这样左右的黑框就有了
然后通过伪类选择器:before & :after实现上下的黑框,定位设置为fixed相对浏览器窗口定位,设置一定的高度,这样上下的黑框也有了

你试试下面简化的样式就明白了

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>body:before {		background: inherit;		content: "";		display: block;		height: 21px;		left: 0;		top:0;		position: fixed;		width: 100%;		z-index: 99;}body:after {		background: inherit;		content: "";		display: block;		height: 21px;		left: 0;		bottom:0;		position: fixed;		width: 100%;		z-index: 99;}body {		background:#1a1a1a;}#div1 {	margin:21px;	background:#fff;	max-width:1320px;}</style></head><body><div id="div1">    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div>    <div>我是内容我是内容</div></div></body></html>

非常感谢呀,以前没用过before和after,多谢,请问这两个是不是都是CSS的标签,需要浏览器支持?

<!doctype html><html lang="en"><head>	<meta charset="UTF-8" />	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />	<title> 页面名称 </title><style type="text/css">body {	border: 20px solid rgb(25,25,25);	padding: 0px;	margin: 0px;}body:before {	content: "";	background-color: rgb(25,25,25);	position: fixed;	left: 0;	top: 0;	width: 100%;	height: 20px;}body:after {	content: "";	background-color: rgb(25,25,25);	position: fixed;	left: 0;	bottom: 0;	width: 100%;	height: 20px;}#div {	width: 100%;	height: 2000px;}</style></head><body><div id="div"></div></body></html>

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn