HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

  • 时间:2018-12-21 23:08 作者:恒创信息 来源:恒创信息 阅读:1472
  • 扫一扫,手机访问
摘要:今天这篇文章我们来说一下css的浮动属性(float),给块状元素增加float属性可以使其转变为行内元素,也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。(1)float使用语法css的float主要有3个属性值none、left、right,默
HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

今天这篇文章我们来说一下css的浮动属性(float),给块状元素增加float属性可以使其转变为行内元素,也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。

(1)float使用语法

css的float主要有3个属性值none、left、right,默认为none;具体的使用如下所示:

float:none; (不使用浮动)

float:left; (靠左浮动)

float:right; (靠右浮动)

(2)float使用案例

我们通过案例来实际演练一下float元素的使用技巧。

1、float:left的使用练习

我们这里创立一个导航条,导航条包含首页、关于我们、新闻中心、案例展现等栏目名称。具体的网页代码以及显示效果就如下图所示:

HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

由上图可以看出默认的样式是竖排显示的,但是我们常见的网页导航条都是横排显示的,这时候我们即可以使用float属性来使块状元素转变为行内元素,并让居左显示。

这里我们创立一个宽度为980px的导航条,给子元素(li)增加float的属性并对齐进行填充(padding)以及外间距(margin)的润色。具体的网页代码以及显示效果就如下图所示:

HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

网页中的显示效果:

HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

2、float:right的使用练习

float:right顾名思义用于元素靠右对齐,我们来看下面的一个例子,我们随便写一篇文字,而后文字中插入一张图片并使图片右对齐。

HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

我们再网页中可以看到图片已经浮动到网页的右侧中去了。

HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单

好了,本篇文章就给大家说到这里,大家可以注意看下我们使用float之后会出现什么问题,下边文章我们会给大家讲解如何清理float带来的负面影响。


每日金句:你不能拼爹的时候,你就只能去拼命!喜欢我的文章的小伙伴记得关注一下哦,每天将为你升级最新知识。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部