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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
134
收藏
