AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

CSS浮动的应用

2017-11-12 752
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >瀑布流布局效果</ title >
     < link  href = "style.css"  rel = "stylesheet"  type = "text/css" >
</ head >
< body >
     < div  id = "div1" >
         < ul >
             < li >< img  src = "1.jpg" ></ li >
             < li >< img  src = "2.jpg" ></ li >
             < li >< img  src = "3.jpg" ></ li >
         </ ul >
         < ul >
             < li >< img  src = "4.jpg" ></ li >
             < li >< img  src = "5.jpg" ></ li >
             < li >< img  src = "6.jpg" ></ li >
         </ ul >
         < ul >
             < li >< img  src = "7.jpg" ></ li >
             < li >< img  src = "8.jpg" ></ li >
             < li >< img  src = "9.jpg" ></ li >
         </ ul >
     </ div >
</ body >
</ html >


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
     margin: 0px;
     padding: 0px;
}
 
li{
     list-style: none;
}
 
#div1{
     width: 950px;
     height: auto;
     margin: 20px auto;
}
 
ul{
     width: 250px;
     float: left;
}


本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1772847

文章标签：
前端开发
关键词：
CSS应用
CSS浮动
CSS浮动应用
科技小能手
目录
相关文章
你都不懂
|
5月前
|
前端开发
5.CSS学习（浮动）
【7月更文挑战第29天】
你都不懂
42 4
众所周知
|
29天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
59 7
龙大吉
|
29天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度；图标字体则以字体形式呈现图标，便于调整样式。文章分析了两者的优缺点及应用场景，并提供了应用技巧和注意事项，旨在帮助开发者提升页面性能，改善用户体验。
龙大吉
24 5
东方睿赢
|
29天前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论，旨在帮助开发者更好地理解和运用媒体查询，提升移动端用户体验。
东方睿赢
45 4
雨溪-yuxi
|
1月前
|
前端开发
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性，包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流，向左或右排列，周围元素随之调整。文章还详细讲解了清除浮动的方法，如使用clear属性、设置父元素高度、利用overflow属性、伪元素等，以解决因浮动导致的布局问题。最后，强调了浮动在创建复杂布局时的作用，并预告后续内容。
雨溪-yuxi
37 2
那年春天
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨，我们可以更好地理解和应用它们，为网页设计和开发带来更丰富、更灵活的样式效果。同时，要注意在实际应用中根据具体情况合理选择和使用伪类选择器，以达到最佳的设计效果和用户体验。
那年春天
50 2
夏天49597
|
6月前
|
前端开发 容器
CSS基础-浮动：float与清除浮动
【6月更文挑战第9天】本文介绍了CSS中的`float`属性，用于创建多列布局和图文混排，但会导致浮动塌陷和元素重叠问题。为解决这些问题，文章探讨了`clear`属性的四种清除浮动方法，包括`clear`属性、空元素、伪元素和`overflow`方法。随着Flexbox和Grid布局的兴起，它们在某些场景下替代了浮动，但理解浮动原理仍是布局基础。掌握浮动和清除浮动技巧对构建稳定布局至关重要。
夏天49597
83 5
一缕微风绕指柔
|
2月前
|
前端开发 开发者 UED
CSS技术的演变与应用
【10月更文挑战第11天】CSS技术的演变与应用
一缕微风绕指柔
25 0
小徐在进步
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍，主要解决多个`&lt;div&gt;`标签在同一行显示的问题，即一个在左边，另一个在右边。文中介绍了标准流、浮动及flex布局的概念，重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法，包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法，并提供了示例代码帮助理解。
小徐在进步
44 6
游客fz577umxdejsg
|
4月前
|
前端开发
酷炫表单，触感未来：HTML与CSS动画的创新应用！
酷炫表单，触感未来：HTML与CSS动画的创新应用！
游客fz577umxdejsg
55 1

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    66
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    94
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    59
  • 4
    HTML5/CSS3粒子效果进度条代码
    72
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    143
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    59
  • 7
    CSS外边距重叠：原理、结果
    56
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    67
  • 9
    CSS常见用法 以及JS基础语法
    70
  • 10
    css设置内嵌样式阴影
    77

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)