浮动案例 | 学习笔记

简介: 快速学习浮动案例。

开发者学堂课程【CSS 快速掌握浮动案例】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9189


浮动案例


内容简介

一 、浮动案例


一 、浮动案例

浮动就是允许一些元素的块级元素,自动挪动到它那一行的一侧,并且其他内容向下流动

案例重要代码:

/*通用选择器来去除HTML中所有标签的默认内填充与外边距,它就不会影响到我们的排版布局*/

*{

Margin:0px;

Padding:0px;

}

/*css代码中的第一步:都是清除 HTML 标签的默认内填充与外边距*/

.nav ul{

/*将列表前面的项目符号去除*/

List-style:none;

}

.nav ul li{

/*把每一个 li 标签进行向左浮动

Li标签它本来是块状元素,将其浮动就可以让每一个 li 排列成一行

*/

Float:left;

/*给每一个 li 标签设置一个宽度*/

Width120px

Text-align:center;

/*将文本居中*/

HTML代码:

<div class=“nav”>

<ul>

<li><a href =“#”>网站栏目</a></li>

<li><a href =“#”>网站栏目</a></li>

<li><a href =“#”>网站栏目</a></li>

<li><a href =“#”>网站栏目</a></li>

<li><a href =“#”>网站栏目</a></li>

相关文章
|
10月前
|
前端开发 JavaScript API
如何让元素在页面中完美居中?看这篇文章就够了!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
10月前
|
前端开发 JavaScript API
如何实现两栏布局?这篇文章告诉你所有的细节!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
6月前
|
前端开发
前端基础(十一)_Float浮动、清除浮动的几种方法
本文介绍了浮动的概念、属性、特性以及清除浮动的几种方法,并通过实例演示了如何使用CSS实现元素的浮动和处理浮动带来的问题。
165 3
|
7月前
|
容器
探索浮动布局的原理与实践
探索浮动布局的原理与实践
|
前端开发
前端学习案例3-三栏布局1 原
前端学习案例3-三栏布局1 原
77 0
前端学习案例3-三栏布局1 原
|
前端开发
前端学习案例2-三栏布局之position
前端学习案例2-三栏布局之position
110 0
前端学习案例2-三栏布局之position
|
前端开发
前端学习案例4-三栏布局2
前端学习案例4-三栏布局2
86 0
前端学习案例4-三栏布局2
|
前端开发
前端学习案例6-三栏布局4
前端学习案例6-三栏布局4
94 0
前端学习案例6-三栏布局4
|
前端开发
前端学习案例5-三栏布局3
前端学习案例5-三栏布局3
108 0
前端学习案例5-三栏布局3