浮动案例 | 学习笔记

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

开发者学堂课程【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>

相关文章
|
9月前
谈谈浮动和清除浮动
谈谈浮动和清除浮动
|
10月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
46 0
|
前端开发 JavaScript
CSS实战笔记(十一) 自适应三栏布局
CSS实战笔记(十一) 自适应三栏布局
64 0
|
前端开发
前端学习案例3-三栏布局1 原
前端学习案例3-三栏布局1 原
49 0
前端学习案例3-三栏布局1 原
|
前端开发
前端学习案例4-三栏布局2
前端学习案例4-三栏布局2
50 0
前端学习案例4-三栏布局2
|
前端开发
前端学习案例6-三栏布局4
前端学习案例6-三栏布局4
45 0
前端学习案例6-三栏布局4
|
前端开发
前端学习案例5-三栏布局3
前端学习案例5-三栏布局3
52 0
前端学习案例5-三栏布局3
|
前端开发
前端学习案例1-三栏布局
前端学习案例1-三栏布局
75 0
前端学习案例1-三栏布局
|
前端开发
前端知识案例学习7-元素居中
前端知识案例学习7-元素居中
39 0
前端知识案例学习7-元素居中
|
前端开发
前端项目实战216-拖拽初始盒子设置函数
前端项目实战216-拖拽初始盒子设置函数
52 0