html从零开始7：文档流、浮动、清除浮动，定位【搬代码】

文档流

1
2
3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    img{
        width: 300px;
        height: 300px;
    }
    </style>
</head>
<body>

    <span>我们一起看美女</span>
    <img src="3.jpg" alt="">
    <p>大家好，我是    p标签</p>
    <img src="3.jpg" alt="">
    <img src="3.jpg" alt="">
</body>
</html>

4

浮动

4
5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
    img{
        width: 300px;
        height: 300px;
        float: left;
    }
    .box1{
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: right;
    }
    .container{
        width: 400px;
        height: 400px;
        background-color: blueviolet;
    }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="container"></div>

    <img src="3.jpg" alt="">
    <img src="3.jpg" alt="">
</body>
</html>

6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
   div{
    width: 300px;
    height: 300px;
    float: left;
   }
   .box1{
    background-color: antiquewhite;
   }
   .box2{
    background-color: red;
   }
   .box3{
    background-color: blue;
   }

   ul li{
    float: left;
    margin: 0 40px;
   }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
    </ul>
</body>
</html>

7
8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container{
            width: 700px;
            height: 700px;
            background-color: forestgreen;
        }
   div{
    width: 300px;
    height: 300px;
    float: left;
   }
   .box1{
    background-color: antiquewhite;
   }
   .box2{
    background-color: red;
   }
   .box3{
    background-color: blue;
   }

   ul li{
    float: left;
    margin: 0 40px;
   }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    </div>

    <ul>
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
    </ul>
</body>
</html>

10

清除浮动

9
11
12
13

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container{
            width: 500px;
            /* height: 500px; */
            background-color: forestgreen;
            overflow: hidden;
            clear: both;
        }
        
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 5px;
            float: left;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color: blue;
            clear: both;/*清除浮动影响*/
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="test"></div>
    </div>
</body>
</html>

伪对象

/*伪对象方式*/
        .container::after{
            content: "";
            display: block;
            clear: both;
        }

14

定位

15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: relative;
            left: 200px;
            top: 100px;
        }
    </style>
</head>
<body>

    <div></div>
</body>
</html>

16
17

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
            position: absolute;/*absolute 绝对定位*/
            left: 100px;
            top: 200px;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: bisque;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: darkcyan;
            position: absolute;/*absolute 绝对定位*/
            left: 50px;
            top: 100px;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

18
19

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;/*固定定位*/
            right: 100px;
            bottom: 100px;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;/*绝对定位*/
            left: 0;
            top: 0;
        }
        h3{
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <h3>好好</h3>
    <h3>好好</h3>
    <h3>好好</h3>
    <h3>好好</h3>
    <h3>好好</h3>
    <h3>好好</h3>
</body>
</html>

20
21
有父级定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: #888;
            position: relative;/*有父级定位*/
            margin-left: 100px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(120, 5, 228);
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
    </div>
</body>
</html>

22
无父级定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        .container{
            width: 200px;
            height: 200px;
            background-color: #888;
            /* position: relative;有父级定位 */
            margin-left: 100px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(120, 5, 228);
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
    </div>
</body>
</html>

23
24

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        
        .box1{
            width: 100px;
            height: 100px;
            background-color: rgb(120, 5, 228);
            position: absolute;
            z-index: 2;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            z-index: 1;
        }
    </style>
</head>
<body>
    
        <div class="box1"></div>
        <div class="box2"></div>
    
</body>
</html>

26

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/388258.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++类和对象-继承-＞基本语法、继承方式、继承中的对象模型、继承中构造和析构顺序、继承同名成员处理方式、继承同名静态成员处理方式、多继承语法、菱形继承

C++类和对象-继承-＞基本语法、继承方式、继承中的对象模型、继承中构造和析构顺序、继承同名成员处理方式、继承同名静态成员处理方式、多继承语法、菱形继承

#include<iostream> using namespace std; //普通实现页面 //Java页面 //class Java //{ //public: // void header() // { // cout << "首页、公开课、登录、注册...&#xff08;公共头部&#xff09;" << endl; // } // voi…
阅读更多...
Phobos捆绑某数控软件AdobeIPCBroker组件定向勒索

Phobos捆绑某数控软件AdobeIPCBroker组件定向勒索

前言 Phobos勒索病毒最早于2019年被首次发现并开始流行起来&#xff0c;该勒索病毒的勒索提示信息特征与CrySiS(Dharma)勒索病毒非常相似&#xff0c;但是两款勒索病毒的代码特征却是完全不一样&#xff0c;近日笔者在逛某开源恶意软件沙箱的时候发现了一款Phobos勒索病毒捆绑…
阅读更多...
sql语句学习(一)--查询

sql语句学习(一)--查询

【有道云笔记】基本sql语句2—查询基础 数据库表结构 DROP TABLE IF EXISTS class; CREATE TABLE class (id int(11) NOT NULL AUTO_INCREMENT,class_num varchar(11) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL COMMENT 班级号,class_name varchar(255) CHARACTE…
阅读更多...
第24讲投票管理实现

第24讲投票管理实现

投票管理实现 后端&#xff1a; package com.java1234.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.java1234.entity.*; import com.java1234.service.…
阅读更多...
QEMU使用步骤

QEMU使用步骤

1、安装虚拟机环境&#xff1a;ubuntu-16.04.7-desktop-amd64.iso,下载地址&#xff1a;Index of /ubuntu-releases/16.04.7/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 2、安装gcc-linaro-7.3.1-2018.05-x86_64_arm-linux-gnueabihf.tar.xz到/opt目录&#xf…
阅读更多...
SECS/GEM的HSMS通讯？金南瓜方案

SECS/GEM的HSMS通讯？金南瓜方案

High Speed SECS Message Service (HSMS) 是一种基于 TCP/IP 的协议&#xff0c;它使得 SECS 消息通信更加快速。这通常用作设备间通信的接口。 HSMS 状态逻辑变化&#xff08;序列&#xff09;&#xff1a; 1.Not Connected&#xff1a;准备初始化 TCP/IP 连接&#xff0c;但尚…
阅读更多...
第十九篇【传奇开心果系列】Python的OpenCV库技术点案例示例：文字识别与OCR

第十九篇【传奇开心果系列】Python的OpenCV库技术点案例示例：文字识别与OCR

传奇开心果短博文系列 系列短博文目录Python的OpenCV库技术点案例示例系列 短博文目录前言一、OpenCV 文字识别介绍二、图像预处理示例代码三、文字区域检测示例代码四、文字识别示例代码五、文字后处理示例代码六、OpenCV结合Tesseract OCR库实现文字识别示例代码七、OpenCV结…
阅读更多...
【Cocos入门】物理系统(物理碰撞)

【Cocos入门】物理系统(物理碰撞)

物理碰撞 物理引擎默认是关闭状态以节省资源开销。开启方法和之前的普通碰撞类似&#xff1a;cc.director.getPhysicsManager().enabled true但有一个区别&#xff0c;物理引擎的开启必须放在onLoad函数内运行&#xff0c;否则不生效。 物理碰撞组件也同样具有碰撞回调函数。…
阅读更多...
9 个管理 Windows 硬盘的最佳免费磁盘分区软件 [2024 排名]

9 个管理 Windows 硬盘的最佳免费磁盘分区软件 [2024 排名]

管理分区可能是一项具有挑战性的任务。当您想到删除、缩小、移动、磁盘分区或合并分区等方面时&#xff0c;您会认为它们是很难做到的事情。然而&#xff0c;虽然 Windows 自己的磁盘管理可以处理大部分问题&#xff0c;但它无法处理管理分区的所有方面。 这时候优质的磁盘管理…
阅读更多...
半导体通讯SECS-I是什么？

半导体通讯SECS-I是什么？

SECS-I&#xff08;Semi Equipment Communications Standard 1 Message Transfer&#xff09;是一个定义如何发送和接收通信内容&#xff08;Content&#xff09;的协议。此标准定义了通过RS-232C传输介质进行通信内容的发送和接收规约。 其主要特点如下&#xff1a; 1.使用RS2…
阅读更多...
android 控制台输出 缺失

android 控制台输出 缺失

问题 android 控制台输出内容缺失 详细问题 笔者进行android开发&#xff0c;期望控制台打印Log日志或是输出内容 Log.i("tag","content");或 System.out.println("content")但是实际上&#xff0c;上述内容并没有按照笔者期望打印 解决方…
阅读更多...
84 CTF夺旗-PHP弱类型异或取反序列化RCE

84 CTF夺旗-PHP弱类型异或取反序列化RCE

目录 案例1&#xff1a;PHP-相关总结知识点-后期复现案例2&#xff1a;PHP-弱类型对比绕过测试-常考点案例3&#xff1a;PHP-正则preg_match绕过-常考点案例4&#xff1a;PHP-命令执行RCE变异绕过-常考点案例5&#xff1a;PHP-反序列化考题分析构造复现-常考点涉及资源&#xf…
阅读更多...
2024.02.14作业

2024.02.14作业

1. 请编程实现二维数组的杨辉三角 #include <stdio.h> #include <stdlib.h> #include <string.h>int main() {int n;scanf("%d", &n);int a[n][n];memset(a, 0, sizeof(a));a[0][0] 1;for (int i 1; i < n; i){for (int j 0; j < i …
阅读更多...
tick数据、盘口数据、成交明细数据详解

tick数据、盘口数据、成交明细数据详解

近期开始学习订单薄策略(order book strategy)、订单流策略(order flow strategy)&#xff0c;理清数据是第一步。 一、成交明细数据 用各个软件进行看盘&#xff0c;除了分时、k线最常用外&#xff0c;盘口数据/成交明细也会显示出来&#xff0c;下图是螺纹主力shfe.rb2401 …
阅读更多...
auto关键字详讲

auto关键字详讲

目录 1.问题思考 2.auto关键字介绍 3. 早期auto的缺陷&#xff1a; 4.什么叫自动存储器&#xff1f; 5. c标准auto关键字 5.1auto的使用细节 5.2 auto什么时候不能推导变量的类型呢&#xff1f; 5.3基于范围的for循环 5.3.1范围for的用法 5.3.2 范围for的使用条件 6.…
阅读更多...
C语言学习day14：跳转语句

C语言学习day14：跳转语句

今天学习的跳转语句主要是三种&#xff1a; break continue goto 上一篇文章已经说过了break和continue break&#xff1a;结束这个循环 continue&#xff1a;结束当前的循环迭代&#xff0c;进行下一次的迭代 看看二者代码的区别 代码&#xff08;break&#xff09;&am…
阅读更多...
奔跑吧小恐龙（Java）

奔跑吧小恐龙（Java）

前言 Google浏览器内含了一个小彩蛋当没有网络连接时&#xff0c;浏览器会弹出一个小恐龙&#xff0c;当我们点击它时游戏就会开始进行&#xff0c;大家也可以玩一下试试&#xff0c;网址&#xff1a;恐龙快跑 - 霸王龙游戏. (ur1.fun) 今天我们也可以用Java来简单的实现一下这…
阅读更多...
Nodejs 第三十七章（连表and子查询）

Nodejs 第三十七章（连表and子查询）

子查询 子查询&#xff08;Subquery&#xff09;&#xff0c;也被称为嵌套查询&#xff08;Nested Query&#xff09;&#xff0c;是指在一个查询语句中嵌套使用另一个完整的查询语句。子查询可以被视为一个查询的结果集&#xff0c;它可以作为外层查询的一部分&#xff0c;用…
阅读更多...
Spring Boot 笔记 015 创建接口_更新文章分类

Spring Boot 笔记 015 创建接口_更新文章分类

1.1.1 实体类id增加NotNull注释&#xff0c;并做分组校验 1.1.1.1 定义分组 1.1.1.2 实体类中指定校验项属于哪个分组 如果说某个校验项没有指定分组,默认属于Default分组 分组之间可以继承, A extends B 那么A中拥有B中所有的校验项package com.geji.pojo;import com.faste…
阅读更多...
linux安装mysql8且初始化表名忽略大小写

linux安装mysql8且初始化表名忽略大小写

mysql8下载地址 MySQL8.0安装步骤 1、把安装包上传到linux系统&#xff0c;解压、重命名并移动到/usr/local/目录&#xff1a; cd ~ tar -xvf mysql-8.0.32-linux-glibc2.12-x86_64.tar.xz mv mysql-8.0.32-linux-glibc2.12-x86_64/ mysql80/ mv mysql80/ /usr/local/2、在M…
阅读更多...
最新文章

Copyright @ 2022~2023