css浮动

最新推荐文章于 2025-05-27 21:13:42 发布
最新推荐文章于 2025-05-27 21:13:42 发布
阅读量104 收藏
点赞数
文章标签： css servlet html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhu1243961271/article/details/127061866
版权

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>小米</title>

        <link rel="stylesheet" type="text/css" href="小米样式.css"/>

    </head>

    <body>

        <div id="d5">

            <div id="d5-zhong">

                <div class="d5-d1">

                    <div class="d5-d2">

                        <h2 class="d5-h1">手机</h2>

                        <ul>

                            <li>查看更多></li>

                        </ul>

                    </div>

                    <div class="d5-d2-left">

                        <img src="./img/1 (5).webp" >

                    </div>

                    <div class="d5-d2-right">

                        <ul>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (8).webp" >

                            <p>Xiaomi MIX Fold</p>

                            <p class="d5-l1-p1">超轻薄折叠机身设计,小米自研微水..</p>

                            <p class="d5-l1-p2">8999元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (4).webp" >

                            <p>Redmi K50至尊版</p>

                            <p class="d5-l1-p1">骁龙8+│1.5K高清直屏

                            </p>

                            <p class="d5-l1-p2">2999元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (6).webp" >

                            <p>Xiaomi 12S Ultra</p>

                            <p class="d5-l1-p1">这真徕卡|专业徕卡影橡

                            </p>

                            <p class="d5-l1-p2">5999元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (3).webp" >

                            <p>Xiaomi 12S Pro</p>

                            <p class="d5-l1-p1">骁龙8+旗舰处理器|徕卡影像

                            </p>

                            <p class="d5-l1-p2">4699元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (7).webp" >

                            <p>Xiaomi 12S</p>

                            <p class="d5-l1-p1">小尺寸性能旗舰|徕卡影像

                            </p>

                            <p class="d5-l1-p2">3999元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (9).webp" >

                            <p>Xiaomi 12 Pro天玑版</p>

                            <p class="d5-l1-p1">全球首发天玑9000+|叶脉冷泵散热系.

                            </p>

                            <p class="d5-l1-p2">3999元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (1).webp" >

                            <p>Redmi Note 11T PrO+</p>

                            <p class="d5-l1-p1">天玑8100|真旗舰芯

                            </p>

                            <p class="d5-l1-p2">1999元起</p>

                            </a></li>

                            <li class="d5-l1"><a href="">

                            <img src="./img/1 (2).webp" >

                            <p>Redmi Note 11T Pro</p>

                            <p class="d5-l1-p1"> 天玑8100|真旗舰芯

                            </p>

                            <p class="d5-l1-p2">1599元起</p>

                            </a></li>

                        </ul>

                    </div>

                </div>

    </body>

</html>

zhu1243961271
关注
深入理解 CSS 浮动（Float）：详尽指南
2301_79175212的博客
10-03 2702
在学习 CSS 布局时，你可能经常会听到“浮动”这个词。虽然现代布局工具如 Flexbox 和 Grid 已经成为主流，但float仍然是 CSS 里一个非常重要的属性。它不仅在一些特定场景中有用，还为我们理解布局的运作原理提供了基础。本文将详细介绍float的用法、常见应用及其对文档流的影响，带你逐步掌握这个经典但重要的布局工具。CSS 浮动（float）是一种将元素从其正常文档流中移出，并使其向左或向右浮动的布局方式。浮动元素的周围内容会环绕其周围，常用于图文混排和简单的多列布局。虽然float。
CSS浮动
qq_69347371的博客
10-29 989
浮动、布局、清除浮动
css 浮动
WJXYCWCXY的博客
03-25 1184
float浮动，浮动的影响及解决方法，万能解决浮动问题
CSS 浮动
m0_52861684的博客
08-28 5373
CSS浮动。
CSS浮动、清除浮动
2302_80916083的博客
10-15 1575
为了防止浮动溢出现象的出现而进行的CSS处理,叫作清除浮动。清除浮动即清除掉元素 float 属性。使用清除浮动不仅能够解决页面错位的现象,还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。浮动可以使元素向左或向右移动，其周围的元素也会重新排列。float属性定义元素在哪个方向浮动,任何元素都可以浮动，而浮动元素就会变成一个块状元素。父盒高度塌陷后，会影响父盒兄弟盒的布局。浮动的元素会脱离文档流，漂浮在文档流上方，在文档流中不占位置，后边的元素向前移动。
CSS浮动讲解
m0_73593563的博客
01-29 1271
例如：将div2添加左浮动，就会发现div3变矮了，其实是div2脱离了标准流，div1，div3，div4还在标准流里，所以他们自上而下依次排列，div3向上移动占据了div2的位置，重新形成了一个标准流。同理，div2，div3浮动，不在属于标准流，div4会向上移动与div1重新形成一个标准流，由于设置的是右浮动，页面右边为头，所以从左往右来说 div2会排列在div3后面。从图中不难看出即使div1和div2宽度完全可以在一行内承载得下，但div2也不会排在div1后面，这就是标准流中的div。
浅谈CSS浮动的特性
09-24
CSS浮动是网页布局中一种常见的技术，主要用于创建文字环绕效果或者多列布局。浮动特性主要体现在以下几个方面： 1. **盖不住的文本**：当一个元素浮动后，它不会覆盖其后的文本内容，而是文本会自动围绕这个浮动...
css浮动 float属性详解
11-21
【CSS浮动(float属性)详解】 一、浮动的概念 浮动（float）是CSS布局中的一个重要概念，它使得元素能够脱离正常文档流，向左或向右移动，直至其边框接触到包含框或另一个浮动元素的边框。这个特性最初设计是为了...
CSS浮动详解及其解决方案
10-09
内容概要：本文档全面讲解CSS浮动概念，浮动规则、实际应用及解决方案。详细讲述了通过使用float属性进行左右布局的基本方法，包括浮动的基础、浮动的常见规则以及在各种布局场合的应用示例，并着重解决了由浮动引发...
javascript-9.CSS 浮动.html
01-10
CSS浮动是Web开发中的一个重要概念，主要用于布局设计，它允许元素脱离正常的文档流，从而达到并排排列的布局效果。这种技术在制作网页时极为常见，特别是在创建那些需要复杂排列元素的布局时。当元素设置为浮动后，...
用 Deepseek 写的 html+js 密码生成器
weixin_42581036的博客
05-22 756
这是一个功能全面的密码生成器，使用HTML和JavaScript实现。用户可以通过滑块设置密码长度（4到64位），并选择包含的字符类型，如小写字母、大写字母、数字和符号。此外，用户还可以选择避免密码中出现重复字符。生成的密码会显示在输入框中，并附带一个密码强度指示条，根据密码长度和使用的字符类型显示强度。用户还可以一键复制生成的密码到剪贴板。该工具具有响应式设计，适配不同屏幕尺寸，适合需要生成安全密码的用户使用。
CSS闯关指南：从手写地狱到“类”积木之旅｜得物技术
SmartCodeTech的博客
05-26 642
CSS开发经历了从纯手写时代到现代原子化框架的演进历程。早期手写CSS存在代码冗余、命名冲突、维护困难等问题；Sass/Less等预处理器通过变量和嵌套提升了代码复用率；CSS Modules和BEM规范解决了作用域污染；CSS-in-JS实现了样式与组件绑定。而原子化CSS（如Tailwind、UnoCSS）通过预设实用类组合样式，大幅提升开发效率和设计一致性，但也面临学习曲线和可读性挑战。技术选型应结合实际需求，平衡灵活性、维护性和开发体验，在代码严谨性和开发效率间寻找最优解。
Vue+css实现扫描动画效果（使用@keyframes scan）
蓝胖子的博客
05-23 366
Vue+css实现扫描动画效果（使用@keyframes scan）annimation
div或button一些好看实用的 CSS 样式示例
最新发布
qq_19891197的博客
05-27 84
2：磨砂玻璃效果（适合现代UI）
13. CSS定位与伪类/伪元素
bighead的博客
05-27 797
定位选择微调位置用relative固定导航用fixed子元素相对于父元素定位用absolute+relative组合伪类与伪元素伪类用于元素状态变化(如:hover)伪元素用于元素特定部分样式(如::first-letter)显示控制需要保留空间时用visibility不需要保留空间时用display。
东方仙盟_灵颜妙手——表单样式——仙盟创梦IDE
cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件
05-26 382
让我们积极投身于技术共享的浪潮中，不仅仅是作为受益者，更要成为贡献者。无论是分享自己的代码、撰写技术博客，还是参与开源项目的维护和改进，每一个小小的举动都可能成为推动技术进步的巨大力量。
el-table设置自定义css
weixin_43869439的博客
05-27 121
【代码】el-table设置自定义css。
CSS outline属性
0.0的博客
05-23 432
CSS的outline属性用于在元素外部绘制一条线，不影响布局，常用于焦点或选中状态的视觉反馈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值