浮动案例 | 学习笔记

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

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

相关文章
|
iOS开发
uView的u-datetime-picker限制开始的年月日后ios显示不出来
uView的u-datetime-picker限制开始的年月日后ios显示不出来
571 0
IDEA 降级gradle插件教程
IDEA 降级gradle插件教程
1724 0
IDEA 降级gradle插件教程
|
关系型数据库 MySQL PHP
【thinkphp知识】thinkphp 使用union链式操作合并两个或多个 SELECT 语句的结果集,新增不存在的字段,并赋予默认值
【thinkphp知识】thinkphp 使用union链式操作合并两个或多个 SELECT 语句的结果集,新增不存在的字段,并赋予默认值
252 0
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
358 0
|
网络安全 Python
vscode远程连接修改python解释器路径 - 蓝易云
以上就是在VSCode中修改Python解释器路径的步骤。希望这个指南能帮助你解决问题。
811 2
|
人工智能 Java 大数据
【HTML5+Springboot】农产品质量溯源大数据管理系统源码
【HTML5+Springboot】农产品质量溯源大数据管理系统源码
814 0
|
存储 前端开发 JavaScript
uniapp项目实战系列(4):服务的异步请求,请求服务的二次封装
uniapp项目实战系列(4):服务的异步请求,请求服务的二次封装
568 0
|
存储 中间件 API
fastadmin框架token验证
fastadmin框架token验证
661 0
|
JavaScript
fastadmin如何在列表的操作中添加其他按钮
fastadmin如何在列表的操作中添加其他按钮
389 0