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

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7870

Java教學

1649

CakePHP 教程

1407

Laravel 教程

1301

PHP教程

1244

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。