开发者学堂课程【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 标签设置一个宽度*/
Width
:120px;
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>