Css控制层在中间以及右下角显示(附…

最新推荐文章于 2023-01-07 12:45:00 发布
最新推荐文章于 2023-01-07 12:45:00 发布
阅读量1.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovejesuslove/article/details/50943664
版权
这篇博客介绍了如何使用CSS和JavaScript来实现网页元素在屏幕中间以及右下角显示。通过调整CSS的position属性和利用JavaScript动态计算窗口大小，可以确保元素始终定位正确。同时，文章还提供了不同定位方式的示例代码，包括居中、右下角等，并提到了在IE6中的兼容性处理。
摘要由CSDN通过智能技术生成

1.css

<style type="text/css">
<!--
#cao {
 background-color: #3366FF;
 height: 200px;
 width: 200px;
 position: fixed;
 top:50%;
 left:50%;
 margin-left:-100px;
 margin-top:-100px;
}
body,td,th {
 font-size: 12px;
 text-align: center;
}
-->
</style>
<body>
<div id="cao">CAO888</div>
</body>
2.js:

<style type="text/css">
<!--
#cao {
 background-color: #3366FF;
 height: 200px;
 width: 200px;
 position: fixed;
}
body,td,th {
 font-size: 12px;
 text-align: center;
}
-->
</style>
<script language=javascript>
function changeIt() {
var myobj=document.getElementByIdx("cao");
var bodyhh=document.body.clientHeight;
var bodyww=document.body.clientWidth;
var objhh=myobj.clientHeight;
var objww=myobj.clientWidth;
myobj.style.top=(bodyhh-objhh)/2;
myobj.style.left=(bodyww-objww)/2;
}
</script>
<body onresize="changeIt()" onload="changeIt()">
<div id="cao">CAO888</div>
</body>
3.css右下角：

<style type="text/css">
       
    
     #div2{bottom:3px; right:0px;position:fixed;}

</style>

 

   <form id="form1" runat="server">
    <div id="div1" onclick="this.style.display='none';document.getElementByIdx('div2').style.display='';" > </div>
<div id="div2" onclick="this.style.display='none';document.getElementByIdx('div1').style.display='';" style="background:#fff url(http://www.wholesale-retailer.com/zzz_js/old/bbb.gif) no-repeat;cursor:pointer;width:20px;height:200px; display:none;"> </div>
太强大了~

 

记下网址：http://www.sosuo8.com/article/show.asp?id=1578

 

完美示例：

<%@ Page Language="C#" CodeFile="DivTest.aspx.cs" Inherits="DivTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
   
    <style type="text/css">
       
    
     #div2{b

最低0.47元/天 解锁文章
lovejesuslove
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中让图片悬浮于右下角,css – 你可以在其父div的右下角浮动一个div并在其周围环绕文字吗？...
weixin_39978257的博客
06-18 1116
没有看到那里的演示 – 或者任何人使用伪元素(由于它的样式而不是内容在语义上更正确)所以让我发帖然后：Demotext#parent:before {content: '';height: 35%;float: right;}#parent div {width: 130px;height: 65%;float: right;clear: right;}在这种特殊情况下,当涉及响应性时,有两个方面...
div在右下角浮动
02-22
浮层 广告 div右下角浮动 右下角浮动 浮动窗口。 兼容性良好。 很好用漂亮的东西。值得研究。
css如何使图片在右下角,这个右下角折角用css怎么画出来？
weixin_29468281的博客
08-03 1461
可以通过伪类的border-color来实现。HTMLCSS.bg{padding:10px;background: #262a67}.paper{background:#00b5e9;width:500px;height:500px;position: relative;}.paper:before{content:"";position: absolute;right:0;bottom:0;d...
css float布局--右侧上部固定下部自适应大小
liudanyang_21的博客
06-14 203
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>...
css控制固定在左下，右下，左上角的漂浮层
coding
09-04 4316
主题：使用CSS控制一个固定在左下，右下，左上角的漂浮层 其他说明： 此 Demo 未作浏览器兼容性测试(兼容在IE7，IE8，firefox，safari，opera，google chrome，360 browser) 源码：  (修正後的代碼，可兼容IE6，以及解決IE6中頁面滾動時抖動問題，仿天涯底部固定漂浮导航,天涯是用纯CSS写法，實現固定層：DEMO。)
将html标签在浏览器居中显示的css样式
09-28
首先，CSS中的定位属性包括相对定位（relative）、绝对定位（absolute）以及固定定位（fixed），这些属性可以帮助我们精确控制元素在页面中的位置。在上述内容中，使用了绝对定位来使HTML标签居中。绝对定位是相对于...
CSS background 控制显示图片的一部分
09-25
其中，`background`属性是CSS中的一个重要部分，允许我们控制元素的背景，包括背景颜色、背景图像、以及如何显示这些图像。本篇文章将深入探讨如何使用`background`属性来控制显示图片的一部分，从而实现一图多用的...
CSS3实现八方向云台遥控器样式
04-22
它通常由一个中央按钮（通常是播放/暂停按钮）和围绕其周围的八个方向按钮组成，分别代表上、下、左、右以及四个对角线方向。为了构建这个布局，我们可以使用CSS的`position`属性，结合相对定位和绝对定位来确定每个...
Arctext弧形文字效果插件（CSS3&jQuery）
05-23
同时，通过CSS3的animation属性，可以控制文字动画的播放速度、方向和次数，创造出流畅的动态效果。 接下来，我们讨论jQuery，这是一个广泛使用的JavaScript库，简化了JavaScript的DOM操作、事件处理、动画和Ajax...
css3实现3d凹凸按钮.zip
07-03
1. **CSS3伪类选择器**：在实现3D按钮时，我们通常会用到`:hover`、`:active`和`:focus`等伪类选择器，来改变按钮在不同状态下的样式，比如鼠标悬停、点击或获取焦点时的外观。 2. **CSS3边框与边框半径**：3D按钮...
div css中如何让li和span标签的日期在右侧显示，解决的方法
weixin_30443731的博客
03-27 1428
在网上找了一下，一共有三种方法，这里简单的记录一下，希望对，遇到这样问题的新手朋友有所帮助，同时也算是自己学习div css的有一定经验，分享给大家啊！ 方法一：标签a加左浮动,span加右浮动 这个方法应该比较简单，并且对于像我这样的新手一看就懂，大概样式就是 <li><a style="float:left;">内容</a> <...
可关闭与最小化的右下角浮动广告代码
weixin_34072637的博客
08-21 165
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title...
HTML笔记
weixin_45839775的博客
12-16 725
去除ul标签中的小圆点：list-style：normal; 去除链接中的下划线：text-decoration: none; 背景图片居中：background: url(“图片地址”) no-repeat(图片是否平铺) center（背景定位） top; 1. 圆角边框 在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变成圆角了。 *语法格式：border-radius：length;* 圆角矩形：范围在0~”高度的一半“px之间浮动、 圆的设置：正方形的高度或者宽度的一半即可 rad.
CSS：浮动float做文字环绕图片效果
tiandaochouqin_1的博客
02-28 2489
&lt;div&gt; 1111111111111 222222111111 &lt;img src=" " alt=" " style="float:right"&gt; 1111111111111 &lt;div&gt; 浮动可以让元素转为 行内块 元素
HTML实现右下角闪烁弹窗
yushun的博客
01-07 1476
HTML实现右下角闪烁弹窗
com.sun.jdi.internalException:Unexpected JDWP Error:103////Method threw 'java.lang.IllegalArgumentEx
管浩然的博客
07-28 7064
retrofit2+RxJava2 的一些坑今天开发新项目,本着积极向上的学习态度,经过多番考虑我决定使用retrofit2 + RxJava2来做为我的网络请求……神说:你的想法非常好 先看一下我的 依赖配置 compile 'com.squareup.retrofit2:retrofit:2.1.0' compile 'com.squareup.retrofit2:convert
http://www.funnygames.us/search/?s=balance
weixin_30405421的博客
02-25 217
http://www.funnygames.us/search/?s=balance http://article.yeeyan.org/view/116885/154154 10个步骤：如何成为iPhone游戏开发者 http://article.yeeyan.org/view/30504/348877 没钱没名的独立游戏开发者如何推销他们的游戏 http:...
markdown基本操作
mrl_3366的博客
01-31 230
MarkDown基本操作 简介 markdown编辑器除了txt文本特有的一些功能,还支持添加标题 列表(有序\无序) 图片(本地\远程) 文本(加粗\斜体\删除线) 分割线 表格 各种语言的代码块,操作便捷,可以极大的帮助我们编写博客 快捷方式 撤销 ctrl/command + z 重做 ctrl/command + y 加粗 ctrl/command + b 斜体 ctrl/command + i 无序列表 ctrl/command + shift + u 有序列表 ctrl/command +
Python实现的QQ空间3366小游戏彩色砖块的辅助工具
weixin_34233618的博客
09-07 290
由于女朋友每天玩这个小游戏，每天挑战我……囧，只好写了一个辅助工具帮我自动满分，最后的结果是大家一起满分……本人不是程序员，请大家指正。 主要使用了PIL模块和pymouse模块，一个做图像识别，另一个做自动点击，这个小工具只在我的电脑，Python2.5+XP下测试通过。 #-*-coding:utf-8-*- #这...
css 在 div 右下角 增加图片
最新发布
06-08
要在 div 右下角增加图片，可以使用以下 CSS 代码： ```css div { position: relative; } div::after { content: ""; position: absolute; bottom: 0; right: 0; background-image: url("your-image-url"); width: 50px; /* 设置图片宽度 */ height: 50px; /* 设置图片高度 */ } ``` 这段代码中，我们首先将 div 元素的 position 属性设置为 relative，以便后续在其中创建绝对定位的伪元素。然后，使用 ::after 伪元素在 div 的右下角插入一张图片，通过 bottom 和 right 属性来设置其位置。最后，通过设置 width 和 height 属性来调整图片的大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值