html右侧浮动菜单,HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单
原标题: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的使用练习
我们这里创建一个导航条,导航条包含首页、关于我们、新闻中心、案例展示等栏目名称。具体的网页代码以及显示效果就如下图所示:
由上图可以看出默认的样式是竖排显示的,但是我们常见的网页导航条都是横排显示的,这时候我们就可以使用float属性来使块状元素转变为行内元素,并让居左显示。
这里我们创建一个宽度为980px的导航条,给子元素(li)添加float的属性并对齐进行填充(padding)以及外间距(margin)的润色。具体的网页代码以及显示效果就如下图所示:
网页中的显示效果:
2、float:right的使用练习
float:right顾名思义用于元素靠右对齐,我们来看下面的一个例子,我们随意写一篇文字,然后文字中插入一张图片并使图片右对齐。
我们再网页中可以看到图片已经浮动到网页的右侧中去了。
好了,本篇文章就给大家说到这里,大家可以注意看下我们使用float之后会出现什么问题,下边文章我们会给大家讲解如何清除float带来的负面影响。
你不能拼爹的时候,你就只能去拼命!返回搜狐,查看更多
责任编辑:
html右侧浮动菜单,HTML+CSS:css元素浮动详解,使用浮动制作导航栏菜单相关推荐
- css改变伪元素color_jQuery教程 改变css伪元素样式详解
本篇教程介绍了jQuery教程 改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
- HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签 实现目的: 制作导航栏菜单 代码分析: 基本样式清除 无序列原点删除 下划线删除 文字默认居中 a标签设置块级元素 伪类选择器对a状态修饰 分步实 ...
- HTML+CSS 完成顶部导航栏菜单制作
导航栏针对一切网址都很重要,文中关键详细介绍了HTML+CSS 完成顶端导航栏菜单制作,具备一定的参考价值,感兴趣的小伙伴们能够参照一下 导航栏的制作: 技术要求: CSS HTML各类标签 实现目的 ...
- CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解
原文网址:CSS之排列系列--块级元素.内联元素.内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客 简介 本文介绍CSS的块级元素(block).内联元素(inline)和内联块元素(inl ...
- CSS相对定位和绝对定位详解
CSS相对定位和绝对定位详解 如果,说浮动, 关键在一个 "浮" 字上面, 那么 我们的定位,关键在于一个 "位" 上. PS: 定位是我们CSS算是数一数二难 ...
- css样式继承规则详解
css样式继承规则详解 一.总结 一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解 发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
最新文章
- react 合并数组_React 数组合并去重,实现请求三遍返回三组数据的合并去重。
- Exp3 免杀原理与实践 20154320 李超
- boost::all_degree_centralities用法的测试程序
- thymeleaf引入css js写法
- 【COGS1752】 BOI2007—摩基亚Mokia
- python安装不了jupyter_python学习笔记——Windowns下Python3之安装jupyter
- 2016级算法第六次上机-D.AlvinZH的学霸养成记V
- [c++primer][12]类
- 【渝粤教育】国家开放大学2018年春季 0092-22T民法 参考试题
- SRE 到底是什么?
- 积分营销系统的优势知多少
- 神经网络各种评判指标
- wps中的格式化快捷键
- 网易云音乐APP(基于APICloud平台)
- 一文读懂 Linux 下单机实现百万并发的内核黑科技:连接跟踪(Conntrack)
- QT编程错误解决——error: no matching function for call to
- 【完整教程】nginx反向代理wss,实现不修改服务器端websocket代码加密通讯请求
- 3.python数据分析处理库pandas(学习笔记)
- vue实现图片滑动验证功能——功能实现
- PADS布线问题【同网络不能够连线】【不能够任意放置过孔】
热门文章
- 全国计算机2014年等级考试,2014年全国计算机等级考试
- 求助:使用jCreator编写一个applet小程序
- c4droid中c语言编译器,c4droid怎么安装 c4droid安装教程及使用说明
- 如何理解计算机中信息的概念,信息(汉语词汇)_百度百科
- spire抽取ppt图片java_Java 在PPT中添加、提取SmartArt图形
- 解决谷歌浏览器图片保存为JFIF格式的问题
- 远程PLC监控调试,PLC通用中转服务器,多客户端tcp中转服务器源代码
- 【EHub_tx1_tx2_E100】Ubuntu18.04 + ROS_ Melodic + 万集716 单线激光 测试
- DataStage记录
- python中的xor运算