杂项 飘浮 (内外边距)

最新推荐文章于 2022-06-13 16:50:51 发布
最新推荐文章于 2022-06-13 16:50:51 发布
阅读量114 收藏 2
点赞数
分类专栏： web 文章标签： css 定位 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50777680/article/details/116772469
版权

absolute
绝对定位，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
1.有祖先 靠近的
2.没有祖先 <body

relative
相对定位，相对于其正常位置进行定位。
1.参照自身 ，原位置保留 (自己走了别人也不能用)

fixed
固定定位，相对于浏览器窗口进行定位。
**

要求案例 实现下图（1）（2）

**
在这里插入图片描述

         ** 分割线       代码+运行结果图**



<html>
<head>
<title>制作网页</title>
<style type="text/css">

.box{
    position: absolute;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -425px;

}
.div1{
    position: relative;
    top: 400px;
    left: 500px;
}
.div5{
    position: fixed;
    top: 500px;
    right: 50px;
}

</style>
</head>

<body>
<div class="box" style="width: 850;height: 800px;background: #666666;border:1px solid#000;">
   <div class="div1"  style="width: 300;height: 100px;background: rgba(255,0,0); float: left;">1</div>
   <div class="div2"  style="width: 500;height: 200px;background: rgba(0,0,255); float: right;">2</div>
   <div class="div3"  style="width: 200;height: 300px;background: rgba(0,255,0); float: right;">3</div>
   <div class="div4"  style="width: 400;height: 400px;background: rgba(0,0,0);   float: right;">4</div>
</div>
<div class="div5"  style="width: 100;height: 400px;background: rgba(66,66,0);">5</div>

</body>
</html>

在这里插入图片描述


<html>
<head>
<title>制作网页</title>
<style type="text/css">
.shangce1{
    float: left;
    top: 20;
    left: 20;
}
.shangce2{
    float: left;
    top: 20;
}
.shangce3{
   float: left;
    top: 20;
}
.zhongjian1{
    float: left;
}
.zhongjian2{
    float:right;
}
.zhongjian3{
    float: right;
}

</style>
</head>

<body>
    <div class="box" style="width: 780;height: 450px;background: rgb(236, 169, 169);border:2px solid#000;">
    <div class="shangce1" style="width: 200;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>1</p></div>
    <div class="shangce2" style="width: 100;height: 300px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>2</p></div>
    <div class="shangce3" style="width: 300;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>3</p></div>
    <div class="zhongjian1" style="width: 400;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>4</p></div>
    <div class="zhongjian2" style="width: 300;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>5</p></div>
    <div class="zhongjian3" style="width: 400;height: 100px;px;background: rgb(255, 255, 255);border:2px solid#000;"><p>6</p></div>
    
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
<style type="text/css">
.shangce1{
position:absolute;
left: 20px;
top: 20px;
}
.shangce2{
position:absolute;
top:20px;
left:140px;
}
.shangce3{
position:absolute;
top:20px;
left:260px;
}
.zhongjian1{
position:absolute;
left:20px;
top:90px;
}
.zhongjian2{
position:absolute;
left:140px;
top:90px;
}
.zhongjian3{
position:absolute;
left:260px;
top:90px;
}
.xiamian1{
position:absolute;
left:20px;
top:160px;
}
.xiamian2{
position:absolute;
left:140px;
top:160px;
}
.xiamian3{
position:absolute;
left:260px;
top:160px;
}
</style>
</head>
<body>
<div class="box" style="width: 380px;height: 230px;background:#F9C;border:2px solid#000;">
<div class="shangce1" style="width: 100px;height: 50px; border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 50px; border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 100px;height: 50px; border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 100px;height:50px;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width:100px;height:50px;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width:100px;height:50px;border:1px solid#000;"><p>6</p></div>
<div class="xiamian1" style="width:100px;height:50px;border:1px solid#000;"><p>7</p></div>
<div class="xiamian2" style="width:100px;height:50px;border:1px solid#000;"><p>8</p></div>
<div class="xiamian3" style="width:100px;height:50px;border:1px solid#000;"><p>9</p></div>
</div>
</body>
</html>

在这里插入图片描述

第2种方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
<style>
    .box{
        padding :10px;
    }
</style>
</head>
<body>
<div class="box" style="width: 380px;height: 230px;background:#F9C;border:2px solid#000;">
<div class="shangce1" style="width: 100px;height: 50px;float:left; margin:10px;border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 50px;float:left; margin:10px;border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 100px;height: 50px;float:left; margin:10px;border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width: 100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width: 100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>6</p></div>
<div class="xiamian1" style="width:100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>7</p></div>
<div class="xiamian2" style="width:100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>8</p></div>
<div class="xiamian3" style="width:100px;height:50px;float:left;margin:10px;border:1px solid#000;"><p>9</p></div>
</div>
</body>
</html>

在这里插入图片描述

未成功版本


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
</head>
<body>
<div class="box" style="width: 740px;height: 430px;background:#F9C;padding:5px;border:2px solid#000;">
<div class="shangce1" style="width: 200px;height: 100px;float:left; margin:5px ;border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 300px;float:left; margin:5px ;border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 300px;height: 100px;float:left; margin:5px ;border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 400px;height:100px;float:left;margin:5px ;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width: 300px;height:100px;float:left;margin:5px ;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width: 400px;height:100px;float:right;margin:5px ;border:1px solid#000;"><p>6</p></div>
</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>制作网页</title>
</head>
<body>
<div class="box" style="width: 740px;height: 430px;background:#F9C;padding:5px;border:2px solid#000;">
<div class="shangce1" style="width: 200px;height: 100px;float:left; margin:5px ;border: 1px solid#000;"><p>1</p></div>
<div class="shangce2" style="width: 100px;height: 300px;float:left; margin:5px ;border: 1px solid#000;"><p>2</p></div>
<div class="shangce3" style="width: 300px;height: 100px;float:left; margin:5px ;border: 1px solid#000;
"><p>3</p></div>
<div class="zhongjian1" style="width: 400px;height:100px;float:left;margin:5px ;border:1px solid#000;"><p>4</p></div>
<div class="zhongjian2" style="width: 300px;height:100px;position:absolute;top: 330px;left: 15px; margin:5px ;border:1px solid#000;"><p>5</p></div>
<div class="zhongjian3" style="width: 400px;height:100px;position:absolute;top: 330px;left: 330px; margin:5px ;border:1px solid#000;"><p>6</p></div>
</div>
</body>
</html>

在这里插入图片描述

neymar116
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是杂项维度？
a6822342的博客
07-20 2273
杂项维度是对低粒度标志和指标的分组。 形象的解释就是将一些具有有限枚举值的字段值拼接在一起作为一行或者是多个字段的可能值不进行拼接而是作为多列组合，最后在杂项维度行中呈现。 事务型商业过程通常产生一系列混杂的、低基数的标志位或状态信息。与其为每个标志或属性定义不同的维度，不如建立单独的将不同维度合并到一起的杂项维度。这些维度，通常在一个模式中标记为事务型概要维度，一般不需要所有属性可能值得笛卡尔积，但应该至少包含实际发生在源数据中得组合值（不需要所有可能值的笛卡尔组合，至少要包括经常发生的几种状态的
bugku ctf 杂项 telnet
qq_42777804的博客
05-17 1745
下载打开 据说之前我学习的wireshark 就可以用到了（可以直接百度下载） wireshark打开 这道题是 telnet 所以搜索 然后查找flag 找到之后 右键 追踪tcp流 发现flag flag{d316759c281bf925d600be698a4973d5} 提交即可 ...
CTF杂项总结
热门推荐
夏日 の blog
02-01 2万+
目录 一、流量分析篇 二、文件头篇 三、压缩包篇 四、图片隐写篇 五、音频隐写篇 六、视频隐写 七、取证 八、Other 参考文章： 一、流量分析篇 通常比赛中会提供一个包含流量数据的 PCAP 文件，有时候也会需要选手们先进行修复或重构传输文件后，再进行分析。 PCAP 这一块作为重点考察方向，复杂的地方在于数据包里充满着大量无关的流量信息，因此如何分类和过滤数据是参赛者...
BUUCTF 杂项——二维码
qq_41696518的博客
06-13 2775
杂项-二维码
CTF杂项知识汇总
SingWeek
07-06 2242
CTF杂项知识汇总文件类型识别 文件类型识别 WinHex 通过winHex程序可以打开查看文件头类型，根据文件头判断出文件类型，linux下可以使用file 文件名来判断文件类型。 常见的文件头类型： |文件类型| 文件头 | |–|--| | | | ...
bugkuctf杂项
qq_43705330的博客
10-13 2431
杂项 这是一张单纯的·图片 拿到图片，先用winhex打开，在最后面发现了Unicode密码key{you are right} 然后这边要用到解密，额，然后解密·，http://tool.chinaz.com/tools/unicode.aspx，在线解密网站 然后得到它 key{you are right} ...
ctf工具-杂项-foremost
dark的博客
09-13 7129
隐藏文件分离工具。 01—foremost安装 在kali中安装： sudo apt-get update sudo apt-get install foremost 02—foremost使用 foremost 123.jpg
笔试面试杂项
m0_37357063的博客
09-15 1万+
目录 1.1升无刻度盒子 2.脑筋急转弯：三个开关三个灯  3.400米环形跑道_顺逆时针来回跑问题 4.一天24小时内，钟表的时针、分针、秒针会重合几次？2次 4.2钟表的时针、分针会重合几次？22次 5.大于6的连续三个整数，其中两个是质数，另一个一定可以被6整除 5.1.判断一个数是否为质数 5.2判断两个数是否互质 5.3求两个数的最大公约数 1.1升无刻度盒子 有一...
CTF杂项题总结（持续更新）
co0ontty的博客
12-24 1万+
图片隐写 博客中题目文件下载地址： https://home.mycloud.com/action/share/db1ed206-5f81-4d3a-b4be-865c5fe78a2c 题目一：图片TIFF 题目文件：ada.jpg 使用binwalk分析图片中的信息如下： 发现在图片中有zip，文件和TIFF信息。zip压缩包解压需要密码。查看一下TIFF信息，打开图片的详细信息部分，查看照片...
Linux驱动开发---杂项设备
智小星的博客
12-09 1705
一、基本概念 Linux设备驱动类型： 字符设备：字符设备是能够像字节流一样被访问的设备。 一般说来对硬件设备 IO 的操作可以归结为字符设备。 常见的字符设备有 led、 蜂鸣器、 串口、 键盘等； 块设备：块设备室通过内存缓冲区访问， 可以随机存取的设备， 一般性的理解就是存储介质类的设备。常见的字符设备有 U 盘、 TF 卡、 eMMC、 电脑硬盘、 光盘等等； 网络设备：可以和其它主机交换数据的设备。常见的以太网设备、WIFI、蓝牙等。 杂项设备： 杂项设备是字符设备的一种，可以自动生.
杂项支持库
07-24
"杂项支持库"通常指的是一个集合，包含了各种不同功能的软件库，这些库可能包含各种编程语言的模块、框架或者工具，旨在为开发者提供便利，帮助他们解决各种项目中的特定问题。这些库可能涵盖了数据处理、网络通信、...
攻防世界Fakezip杂项
11-20
【攻防世界Fakezip杂项】是一道网络安全领域中的挑战，属于攻防世界的Misc类问题。Misc（ Miscellaneous）通常指的是涉及多种技术、需要综合运用知识的题目，这道题目的核心在于理解和处理压缩文件，特别是涉及到...
攻防世界Check杂项
11-20
攻防世界Check杂项，misc。 此题详细解题博客：https://danbaku.blog.csdn.net/article/details/127952250
攻防世界encode杂项
11-20
攻防世界encode杂项，misc。 此题详细解题博客：https://danbaku.blog.csdn.net/article/details/127947807
攻防世界杂项Banmabanma
10-08
攻防世界Banmabanma题目，misc 此题详细解题博客：https://blog.csdn.net/m0_59188912/article/details/127214770
Visual Studio Code 如何保存HTML文件和如何快速生成HTML结构
qq_50777680的博客
05-13 2156
如何保存HTML文件和如何快速生成HTML结构 1.新建一个文件夹 2.点击纯文本，输入html 如图 3.再输入一个！ 敲下tab键 （格式就出来了) OVER
HTML和CSS编程技术 （ Div+CSS页面布局实操 ）
qq_50777680的博客
05-14 1146
实验目的 1.熟悉HTML静态网页编程技术，熟悉HTML各种标记，特别是表单标记 2.熟悉CSS编程技术，掌握CSS来格式化网页、掌握CSS盒式模型 3.掌握DIV+CSS布局和设计网页，掌握CSS设计网页的一般流程 实验内容 1.用DIV+CSS布局（如可分成top, mid, foot, 其中mid再分两大块left和main） 2.分别细化设计每一大块。 3.要中间部分的左边或右边要设计一个小登录表单，并用CSS美化。 实验步骤 1、使用DIV+CSS布局 2、细化每一块 3、美化表单部分 实验结果
用eclipse编写Java Web 启动遇到404问题
qq_50777680的博客
05-27 270
1.窗口 2.首选项
Cookie示例（会话跟踪）
qq_50777680的博客
05-27 228
Cookie示例 示例：使用Cookie保存用户名和密码，当用户再次登录时，在相应的文本栏显示上次登录时输入的信息。 (1) 编写用于接收用户输入的文件，在该例中，没有使用HTML文件而是用一个Servlet来完成此功能，这是因为需要通过Servlet去读取客户端的Cookie,而HTML文件无法完成此功能。Servlet 命名为LoginServlet,代码如下: LoginServlet.java public class LoginServlet extends HttpServlet {
杂项wellshark
最新发布
09-12
您好！对于Wellshark，我了解到它是一种健康和健身的跟踪器，可以帮助用户记录并分析他们的运动、睡眠和饮食习惯。它通常配有一个智能手环和一个手机应用程序，可以监测心率、步数、卡路里消耗等指标，并提供个性化的建议和报告。这是一种智能健身设备，旨在帮助用户更好地管理和改善他们的健康状况。如果您有任何关于Wellshark的具体问题，我会尽力回答。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值