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

WBOY
풀어 주다: 2016-06-24 11:22:04
원래의
1135명이 탐색했습니다.

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>
로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!