【笔记】浮动属性float的应用06——浮动内联列表项

最新推荐文章于 2022-03-20 21:44:48 发布
最新推荐文章于 2022-03-20 21:44:48 发布
阅读量365 收藏 1
点赞数
分类专栏： 笔记

第1步 - 从简单的无序列表开始

在本练习中，我们想要一个简单的无序列表并将其转换为水平导航栏。

我们将从一个简单的无序列表开始。UL使用ID选择器（id =“navlist”）进行样式设置。在本教程中，使用了一个明显的名称来帮助说明这一点，但可以使用任何名称。但是，最好根据类别的含义来命名类，而不是它们的外观。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		
	</style>
</head>
<body>
	<ul id=navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

第2步 - 删除子弹

要删除HTML列表项目符号，请将“list-style-type”设置为“none”。为了定位特定的UL，我们使用“ul＃navlist”，否则页面上的所有UL都会受到影响。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			list-style-type:none;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

第3步 - 删除填充和边距

标准HTML列表具有一定量的左缩进。每个浏览器的金额各不相同。有些浏览器使用填充（Mozilla，Netscape，Safari），其他浏览器使用边距（Internet Explorer，Opera）来设置缩进量。

要在所有浏览器中一致地删除此左缩进，请将“UL”的填充和边距都设置为“0”。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;/*new codes*/
			margin:0;/*new codes*/
			list-style-type:none;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

第4步 - 显示内联

要强制列表成一行，请应用“display：inline;” 到“李”。要定位特定列表，我们使用“ul＃navlist li”。这意味着我们希望在UL中定位LI元素，使用名为“navlist”的ID进行样式设置。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

第5步 - 浮动“a”状态

当列表项转换为内联时，它们的左边缘有一定量的填充，无法删除。要使列表项彼此相邻而没有任何间隙，必须将它们设置为“float：left”。在这个阶段，我们无法看到差距已经结束。

浮动元素时也需要宽度 - 除非它是图像。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;/*new codes*/
			width:5em;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

 

第6步 - 添加背景颜色

此时，可以应用背景颜色和文本颜色。有许多颜色组合可以使用。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;/*new codes*/
			background-color:#036;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

步骤7 - 将填充添加到“a”状态

要将每个列表项放入框中，我们需要将填充添加到“a”状态。在这种情况下，我们使用简写规则。顶部和底部的填充设置为0.2em，左侧和右侧的填充设置为1em。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

第8步 - 删除文本修饰

此时，您可能希望删除文本下划线。通常的做法是导航不要有下划线，因为它们的位置和其他反馈机制使它们更明显地成为链接。但是，您应该知道修改标准超链接行为（例如下划线）可能会让某些用户感到困惑，他们可能没有意识到该项是链接。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

步骤9 - 添加边框以分隔列表项

边框设置在列表项的右侧以将它们分开。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;/*new codes*/
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

第10步 - 添加翻转颜色

使用“a：hover”设置第二种背景颜色，作为翻转状态。如果您现在滚动列表，您将看到翻转工作。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;
		}
		ul#navlist li a:hover {/*new codes*/
			background-color:#369;
			color:#fff;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

步骤11 - 浮动UL

要将整个列表放入导航栏，我们需要为UL着色并将其拉伸到浏览器窗口的整个宽度。在我们这样做之前，我们需要将“float：left”应用于UL - 否则它将不会显示。因此，将float应用于UL并将宽度设置为“100％”。

浮动元素时也需要宽度 - 除非它是图像。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
			float:left;/*new codes*/
			width:100%;/*new codes*/
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;
		}
		ul#navlist li a:hover {
			background-color:#369;
			color:#fff;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

步骤12 - 向UL添加背景颜色

此时，可以将背景颜色和文本颜色应用于UL。有许多颜色组合可以使用。

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		ul#navlist {
			padding:0;
			margin:0;
			list-style-type:none;
			float:left;
			width:100%;
			color:#fff;/*new codes*/
			background-color:#036;/*new codes*/
		}
		ul#navlist li {
			display:inline;
		}
		ul#navlist li a {
			float:left;
			width:5em;
			color:#fff;
			background-color:#036;
			padding:0.2em 1em;
			text-decoration:none;
			border-right:1px solid #fff;
		}
		ul#navlist li a:hover {
			background-color:#369;
			color:#fff;
		}
	</style>
</head>
<body>
	<ul id="navlist">
		<li><a href="#">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
	</ul>
</body>
</html>

效果图如下：

二木成林
关注
专栏目录
CSS 浮动应用实例，列表横向显示(导航)
houyanhua1的专栏
10-30 2479
new document *{margin:0; padding:0;} .nav{ width:100%; height:48px; background:url(index_x.jpg) repeat-x 0 -100px; margin-top:100px;} ul,li{list-style-type:none;} ul{ width:980px;
html div浮动效果,【html】【6】div浮动float
weixin_36323601的博客
06-03 2463
我想 当看完上面的必看链接，拥有一定的基础后也得7天左右，记住 一定要看完，知道它都有什么，没学会不要紧，哪怕只是有个简单的概念也行，随着后续的使用慢慢深入学习，现在开始div布局。必看参考：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.htmlhttp://paranimage.com/css-float-attribute/ht...
浮动布局-基于display:inline-block的列表布局
Zhangxi
04-11 1250
列表浮动布局的局限 列表浮动布局就是指通过使用float属性，让列表元素依次排列的布局（通常是左浮动，float:left）。这是相当常见的也是目前最最主流的列表布局方式，所以这里就不吃咸鱼蘸酱油——多此一举show代码了。 对于浮动局部的局限性，想必同行们都知道，就是每个列表元素的高度必须要一致，否则就会像是俄罗斯方块一样，“锯齿相错”，例如一个左浮动列表布局，如果第一行有个列表高度
CSS浮动练习之列表浮动
fujiaxu666的博客
03-14 807
善用浮动的特性。 浮动元素会脱离标准流（脱标）。 浮动的元素会在一行内显示并且元素顶部对齐。 浮动的元素会具有行内块元素的特性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co.
浮动布局 VS 基于display:inline-block的列表布局
逸少
07-14 559
一、一抹前言 没有爱的日子，时间如指尖细沙，不知不觉就流逝了。写“CSS float浮动的深入研究、详解及拓展(一)”和“CSS float浮动的深入研究、详解及拓展(二)”似乎就在不久前，然而相隔差不多有一年之久了。文章最后留下了“浮动布局更好的替代方案是什么？”后文再介绍的预告。 由于自己肚子中的货物不足以撑起一篇足够质量的文章，所以关于“浮动布局更好的替代方案是什么？”的文章
浮动属性float的应用源码
12-01
本笔记将深入探讨`float`的原理、应用及其源代码实例。 一、`float`属性概述 `float`属性最初被引入用于创建图文混排的效果，允许元素在文本流中向左或向右移动，而周围的文本会围绕其流动。这在早期网页设计中用于...
2021-07-14-css浮动和定位课堂笔记
tubulvxing1的博客
07-15 494
7月14日课堂笔记 1. 浮动（float） 1.1 css布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em等 浮动 让盒子从普通流中浮起来,主
Web前端开发笔记-----13.float浮动、position定位
m0_51546204的博客
03-03 217
Web前端开发笔记-----13.float浮动、position定位 文章目录Web前端开发笔记-----13.float浮动、position定位一、float浮动1.float浮动概念和原理2.清除float浮动二、position定位1.relative相对定位2.absolute绝对定位3.fixed绝对定位4.sticky黏性定位5.z-index定位层级三、定位小练习实现下拉菜单 一、float浮动 1.float浮动概念和原理 文档流：   文档流是文档中可显示对象在排列时所占的位置。 f
div css制作网页实战笔记心得
09-27
本文将围绕一个网友在实际工作中遇到的问题和解决方案展开，主要探讨了Div+CSS在实现网页布局时的一些关键知识点，特别是关于`float`属性的兼容性问题，以及如何处理浮动元素的影响。 首先，`float`属性是CSS中的一...
CSS的文本、列表、背景、浮动属性说明
一无是处的博客
03-20 271
css常见的四大元素属性说明
CSS中元素内容的浮动属性float
张波的技术积累
01-09 1639
在网页中使用浮动属性，可以更改块元素的默认显示方式，将原本换行显示的块元素同行显示，通过使用浮动元素和盒模型中的各种属性，可以对各种页面元素进行布局。  1. 元素的浮动属性float      用来定义块元素的浮动方式，在浮动属性中，可以使用4种属性值，分别为static，absolute，fixed和relative，        float: none | left | right
CSS BASIC 浮动、显示和列表
wangboyujiayou的博客
11-02 171
1、浮动 1、定位 普通流定位(文档流定位) 浮动定位 相对定位 绝对定位 固定定位 2、浮动定位 1、特征 1、浮动元素 会被排除在文档流之外-脱离文档流，不占据页面空间，其他未浮动元素要上前补位 2、浮动元素会停靠在父元素的左边或右边，或平级的其他已浮动元素的边缘上 3、浮动元素依然位于父元素之内，并且只会在当前行内浮动 4、浮动定位解决的问题------让多个块级元素在一行内显示 2、语法：...
元素浮动float
weixin_46025563的博客
02-23 475
定义和用法 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。 注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。就好好比在宽度只有10...
浮动
mkijn的博客
04-11 178
传统网页布局的三种方式 1.普通流（标准流/文档流） 2.浮动 3.定位 为什么需要浮动 浮动可以改变元素标签默认的排列方式。 最经典的应用：可以让多个块级元素一行内排列显示。 浮动 float属性用于创建浮动框，将其移动到一遍，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 div{ float: none;/*默认*/ float: left;/*元素向左浮动*/ float: right;/*元素向右浮动*/ } 浮动特性 1.浮动元素会脱离标准流（脱标）。 2.浮动的元素会一行内显示并且
列表导航栏----浮动提示框
tianjun2012的专栏
12-09 1486
话不多说，上图看效果如下： 下面看下前端的代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
css浮动
zt199718的博客
10-13 177
浮动解析 定义 浮动是一种使元素脱离文档流的方法，会使元素向左或向右移动，其周围元素也会重新排列。float，往往是用于图像的，但是他在布局时也同样非常有用。 原理 使当前元素脱离普通文档流，相当于浮动起来一样，浮动的框可以左右移动，直至它的的外边缘遇到包含框或者另一个浮动框的边缘。 清除浮动 给浮动元素末尾添加一个空元素，并设置clear:both 给父元素设置overflow或者display:table 使用伪元素 .box:after{ display:block; height:0; c
HTML学习笔记：盒子模型、浮动与响应式布局
在CSS中，`float`属性可以设置为`left`或`right`，让元素向左或向右浮动，以便与其他元素对齐。需要注意的是，浮动元素会脱离正常文档流，可能引发布局问题，此时可以使用`clear:both`来清除浮动。 路径是HTML中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值