HTML_CSS学习:浮动

ops/2024/11/22 22:00:38/
htmledit_views">

一、浮动简介

相关代码:

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动_简介</title><style>div{width: 600px;height: 400px;background-color: #1c80d9;}img{float: right;/*margin-right: 0.5em;*/}.test::first-letter{font-size: 80px;float: left;}</style>
</head>
<body><div><img src="../pictures/喜羊羊.jpg" alt="" style="width: 200px;height: auto;">lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quodlorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quod.</div><hr><div class="test">The quick brown fox jumps over the lazy dog, while the eager beaver builds a sturdy dam and the proud peacock displays its vibrant plumage. A clever crow steals a shiny ring from the sleeping cat, as the noisy crowders chatter in the bustling city square. The brave knight slays the fearsome dragon with his trusty sword, and the joyful children play in the sunny meadow. The graceful swan glides on the serene lake, while the mischievous monkey swings from tree to tree. The diligent bee collects nectar from the colorful flowers, as the majestic eagle soars high in the clear blue sky. The talented artist captures the beauty of nature on her canvas, and the wise owl watches over the peaceful forest. The ambitious entrepreneur launches a successful startup, while the skillful chef prepares a delicious feast for the hungry guests. The curious kitten explores its new surroundings, as the faithful dog guards its owner’s home.</div></body>
</html>

显示结果:

二、元素浮动后的特点

相关代码:

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素浮动后的特点</title><style>.outer{width: 800px;height: 400px;padding: 10px;background-color: #5dcd2d;text-align: center;}.box{font-size: 20px;padding: 10px;}.box1{background-color: red;}.box2{background-color: blue;float: left;/*width: 200px;*//*height: 200px;*/}.box3{background-color: yellow;float: left;}</style>
</head>
<body><div class="outer"><div class = "box box1">盒子1</div><div class = "box box2">盒子2</div><div class = "box box3">盒子3</div></div></body>
</html>

显示结果:

三、浮动小练习

相关代码:

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动小练习</title><style>.outer{width: 500px;background-color: #47c447;border: 1px solid black;}.box{width: 200px;height: 200px;background-color: red;border: 1px solid black;margin: 10px;float: left;}.box1{height: 230px;}/*.box1{*//*    float: left;*//*}*/</style>
</head>
<body><div class="outer"><div class = "box box1">1</div><div class = "box box2">2</div><div class = "box box3">3</div></div><div style="background-color: #999ff0">The quick brown fox jumps over the lazy dog, while the eager beaver builds a sturdy dam and the proud peacock displays its vibrant plumage. A clever crow steals a shiny ring from the sleeping cat, as the noisy crowders chatter in the bustling city square. The brave knight slays the fearsome dragon with his trusty sword, and the joyful children play in the sunny meadow. </div></body>
</html>

显示结果:

四、浮动后的影响

相关代码:

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动后的影响</title><style>.outer{width: 500px;background-color: #47c447;border: 1px solid black;}.box{width: 100px;height: 100px;background-color: red;border: 1px solid black;margin: 10px;/*float: left;*/}.box1,.box2,.box3{float: left;}</style>
</head>
<body><div class="outer"><div class="box box0">0</div><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div>
<!--        <div class="box box4">4</div>--></div>
<!--    <div style="background-color: #999ff0">The quick brown fox jumps over the lazy dog, while the eager beaver builds a sturdy dam and the proud peacock displays its vibrant plumage. A clever crow steals a shiny ring from the sleeping cat, as the noisy crowders chatter in the bustling city square. The brave knight slays the fearsome dragon with his trusty sword, and the joyful children play in the sunny meadow. The graceful swan glides on the serene lake, while the mischievous monkey swings from tree to tree. The diligent bee collects nectar from the colorful flowers, as the majestic eagle soars high in the clear blue sky. The talented artist captures the beauty of nature on her canvas, and the wise owl watches over the peaceful forest. The ambitious entrepreneur launches a successful startup, while the skillful chef prepares a delicious feast for the hungry guests. The curious kitten explores its new surroundings, as the faithful dog guards its owner’s home. The powerful ocean waves crash against the rocky shore, and the gentle breeze whispers through the leaves of the ancient trees. The adventurous traveler explores remote villages in search of hidden treasures, while the playful dolphin leaps through the waves of the vast ocean. </div>--></body>
</html>

显示结果:

五、解决浮动后的影响

相关代码:

html"><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>解决浮动后的影响</title><style>.outer{width: 500px;background-color: #47c447;border: 1px solid black;/*第一种解决方案*//*height: 122px;*//*第二种解决方案*//*float: left;*//*第三种解决方案*//*overflow: scroll;*/}.box{width: 100px;height: 100px;background-color: red;border: 1px solid black;margin: 10px;/*float: left;*/}.box1,.box2,.box3,.box4{float: left;}/*.box4{*//*    !*display: inline-block;*!*//*    !*height: 260px;*!*//*    !*clear: left;*!*//*    display: inline;*//*    clear: both;*//*    !*消除左侧浮动兄弟带来的影响*!*//*}*/.box5{clear:both;}.mofa{/*第四种*/clear: both;}.outer::after{content: '';display: block;clear: both;}</style>
</head>
<body><div class="outer">
<!--        <div class="box box0">0</div>--><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div>
<!--        <div class="box box5">5</div>-->
<!--        <div class="mofa"></div>--></div><div style="background-color: #999ff0">The quick brown fox jumps over the lazy dog, while the eager beaver builds a sturdy dam and the proud peacock displays its vibrant plumage. A clever crow steals a shiny ring from the sleeping cat, as the noisy crowders chatter in the bustling city square. The brave knight slays the fearsome dragon with his trusty sword, and the joyful children play in the sunny meadow. The graceful swan glides on the serene lake, while the mischievous monkey swings from tree to tree. The diligent bee collects nectar from the colorful flowers, as the majestic eagle soars high in the clear blue sky. The talented artist captures the beauty of nature on her canvas, and the wise owl watches over the peaceful forest. The ambitious entrepreneur launches a successful startup, while the skillful chef prepares a delicious feast for the hungry guests. The curious kitten explores its new surroundings, as the faithful dog guards its owner’s home. The powerful ocean waves crash against the rocky shore, and the gentle breeze whispers through the leaves of the ancient trees. The adventurous traveler explores remote villages in search of hidden treasures, while the playful dolphin leaps through the waves of the vast ocean. </div></body>
</html>

显示结果:

六、浮动布局小练习

相关代码:

html"><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>浮动布局小练习</title><style>*{margin: 0;padding: 0;}.leftfix{float: left;}.rightfix{float: right;}.clearfix::after{content: '';display: block;clear: both;}.container{width: 960px;margin: 0 auto;text-align: center;}.logo{width: 200px;}.banner1{width: 540px;/*margin-left: 20px;*//*margin-right: 20px;*/margin: 0 10px;}.banner2{width: 200px;}.logo,.banner1,.banner2{height: 80px;line-height: 80px;background-color: #c9c9c9;}.meun{height: 30px;background-color: #c9c9c9;margin-top: 10px;}.item1,.item2{width: 368px;height: 198px;line-height: 198px;border: 1px solid #000;margin-right: 10px;}.content{margin-top: 10px;}.item3,.item4,.item5,.item6{width: 178px;height: 198px;line-height: 198px;border: 1px solid #000;margin-right: 10px;}.bottom{margin-top: 10px;}.item7,.item8,.item9{width: 198px;height: 128px;line-height: 128px;border: 1px solid #000;}.item8{margin: 10px 0;}.footer{height: 60px;background-color: #c9c9c9;line-height: 60px;margin-top: 10px;}</style>
</head>
<body><div class="container">
<!--        头部--><div class="page-header clearfix"><div class="logo leftfix">logo</div><div class="banner1 leftfix">banner1</div><div class="banner2 leftfix">banner2</div></div>
<!--        菜单--><div class="meun">菜单</div>
<!--        内容区--><div class="content clearfix"><div class="left leftfix">
<!--                上--><div class="top clearfix"><div class="item1 leftfix">栏目一</div><div class="item2 leftfix">栏目二</div></div>
<!--                下--><div class="bottom"><div class="item3 leftfix">栏目三</div><div class="item4 leftfix">栏目四</div><div class="item5 leftfix">栏目五</div><div class="item6 leftfix">栏目六</div></div></div><div class="right rightfix"><div class="item7">栏目七</div><div class="item8">栏目八</div><div class="item9">栏目九</div></div></div>
<!--        页脚--><div class="footer">页脚</div></div></body>
</html>

显示结果:


http://www.ppmy.cn/ops/32481.html

相关文章

CCF PTA 2023年5月C++天空之城的树

【问题描述】 拉姆达人在修建天空之城时&#xff0c;主要是依赖巨大的飞行石去维持悬空状态&#xff0c;依赖强壮的大树去作为建筑 物的框架&#xff0c;假设大树是一棵有 n(n≤10 3)个结点的二叉树。给出每个结点的两个子结点编号&#xff08;均不超 过 n&#xff09;&#x…

蓝桥杯练习系统(算法训练)ALGO-950 逆序数奇偶

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 老虎moreD是一个勤于思考的青年&#xff0c;线性代数行列式时&#xff0c;其定义中提到了逆序数这一概念。不过众所周知我们…

《MySQL45讲》读书笔记

重建表 alter table t engine InnoDB&#xff08;也就是recreate&#xff09;&#xff0c;而optimize table t 等于recreateanalyze&#xff0c;让表大小变小 重建表的执行流程 建立一个临时文件&#xff0c;扫描表 t 主键的所有数据页&#xff1b;用数据页中表 t 的记录生…

图片合称为视频

import cv2 import os def pic_video(args_input_path,folder_path,output_video_path): count 1 image_files [os.path.join(folder_path, file) for file in os.listdir(folder_path) if file.endswith(‘.png’)] img cv2.imread(image_files[0]) height img.shape[0] w…

Python实战开发及案例分析(2)——单目标优化

在Python中&#xff0c;进行单目标优化主要涉及定义一个优化问题&#xff0c;包括一个目标函数和可能的约束条件&#xff0c;然后选择合适的算法来求解。Python提供了多种库&#xff0c;如SciPy、Pyomo、GEKKO等&#xff0c;用于处理各种优化问题。 案例分析&#xff1a;使用 …

grpc拦截器+metadata进行接口统一校验

grpc拦截器metadata进行接口统一校验 hello.protoproto生成go文件命令client.go方法一&#xff1a;自定义拦截器&#xff0c;实现统一参数校验方法二&#xff1a;使用grpc内置拦截器&#xff0c;需要自定义结构体&#xff0c;实现credentials.PerRPCCredentials接口中的方法 se…

Redis简介

Redis 是一个开源的高性能键值对存储系统&#xff0c;它支持多种类型的数据结构&#xff0c;如字符串&#xff08;strings&#xff09;、列表&#xff08;lists&#xff09;、哈希&#xff08;hashes&#xff09;、集合&#xff08;sets&#xff09;、有序集合&#xff08;sort…

arm 交叉编译 thumb 与 arm 指令的方法

arm 交叉编译 thumb 与 arm 指令的方法 本文实现了在 x86 的 ubuntu 的机器上&#xff0c;使用 arm-linux-gnueabihf-gcc 交叉编译链工具&#xff0c;编译出在 arm 开发板上可以运行的 thumb 指令集的可执行文件。后续会使用 vscode 使用网络进行远程调试。 1. 编译器 arm-li…