代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>凯哥学堂小例题</title>
</head>
<style type="text/css">
/*此样式设置的全频透明div*/
div { position: absolute; z-index: 1;
width: 100%;/*按body的可用宽度 按%比的好处就是可以随着窗口大小而改变 */
height: 100%;/*按body的可用高度*/
left: 0%; top: 0%; background-color: #000000; opacity: 0.3; }
div div{ position: absolute; width: 300px; height: 300px; left: 50%; top: 50%; transform: translate(-50%,-50%); /*这里的作用很大
主要就是设置好DIV后 会按照50% 50%方式坐标设置
这样就忘记减去div的高度和宽度了
显示的效果就没有在中间
应该平移窗口的-50% 相当于宽度或高度除以2*/
background-color: white; opacity: 1; }
div div p{ line-height: 200px; text-align: center; color: red; opacity: 1; font-size: 50px;
}
</style>
<body>
<div>
<div>
<p>凯哥学堂</p>
</div>
</div>
</body>
</html>
分享到:
相关推荐
本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`<div>`元素。`<div>`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`<div>`...
我们在制作网页时,有时需要多重div的重叠,每个div添加不同的内容,以实现特殊的层叠效果,这个如何实现,在网上没找到现成的详细的教程,但是可以用现有的...源代码+自己写的教程,希望对初学div+css的朋友有启发。
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...
在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`<div>`元素是一...
本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的关键。我们将探讨不同情况下的居中策略,并结合给出的`juzhong.html`示例文件进行讲解。...
通过上述介绍,我们了解到实现DIV居中的方法有很多种,包括使用`text-align: center;`、`margin-right: auto;`和`margin-left: auto;`等CSS属性,以及使用Flexbox或Grid布局。选择哪种方法取决于具体的应用场景和...
在本文中,我们将详细介绍如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法。 首先,让我们来了解一下实现这种效果所需的技术要点: 1. 使用 CSS 将 div 层设置为绝对定位,并将其宽度和高度设置为 100%。 2....
在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中,实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一:使用 margin:auto 这种方法是最简单的,直接将 DIV 的 margin ...
使用DIV+CSS实现水平垂直居中的优点是可以使网页布局更加灵活和灵活,可以根据需要随时调整DIV元素的位置和大小。此外,使用CSS样式还可以使网页更加美观和简洁。 四、DIV+CSS水平垂直居中的应用场景 DIV+CSS水平...
在网页设计中,"DIV始终居中的半透明弹出层"是一个常见的需求,它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先,`DIV`是HTML中的一个块级元素,常用于创建网页布局结构。在本...
CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法
首先还是那句老话,非常幸运我们现在可以使用CSS3布局。 在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直...
在网页设计中,让元素居中是常见的需求,特别是对于`div`这样的块级元素,垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先,我们要理解CSS布局的基本概念。在网页中,...
创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`fadeIn()`、`fadeOut()`等方法来控制div的可见性,同时通过CSS来定义其样式,如边框、填充、背景色等。以下是一个简单的示例: ```html <div id=...
JS+CSS 控制Img在div中居中显示一部分
CSS+DIV设计实例:实现让多个DIV排列时居中.txt