网站导航免费论文 原创论文 论文搜索 作业答案 网学软件 学术大家 资料中心 会员中心 问题解答 定作论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 设计资源 > DIVCSS技术 > 正文
div+css中float用法
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 佚名 来源: 网络 发布时间: 10/08/22

div+css中float用法

div+css中float认识及css float用法

float是什么意思?
float是浮动,翻译成中文也是浮动意思。进入对应css手册中float手册了解float基本信息。

float的作用
通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。

float语法:
float : none | left |right

参数值:
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边

接下来我们来通过一个div+css实例讲解float使用技巧。 copyright myeducs.cn 网学

DIV CSS实验一
Css样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。
myeducs.cn CSS案例演示最终效果图如下
float实例示意图

1、首先我们设置一个最外层的宽度为300px,高度为200px的css命名为box的css选择器代码如下(知识点px是什么意思)
.box{width:300px; height:200px;}

2、设置box内的文字内容部分css样式命名为yangshi,并设置背景为蓝色,宽度为120px,居右浮动
.yangshi{ width:120px; float:right; background:#0066FF;}

3、设置图片居左浮动div+css样式
img { float: left;}

4、body内的div布局,代码如下

 <div class="box">
<div class="yangshi">我是myeducs.cn 网站,测试内容</div>
<img src=/uploadfile/201008/22/49145220581.gif" />
</div>

说明:这里img标签是链接外部图片,图片名为demo.gif

copyright myeducs.cn 网学

最终演示结果截图
css float实例

copyright myeducs.cn 网学

CSS实验二
接下来我们演示使用div+css让这里小图片居右(上个例子是居左),蓝色背景文字内容区居左(上个例子是居右)(扩展css 居中)。这里我们只需要改变yangshi的float:right;为float:left和图片css样式img { float: left;}为img { float: right;}
CSS代码如下:

 .box{width:300px; height:200px;}
.yangshi{ width:120px; float:right; background:#0066FF;}
img{ float:left;}

html中的css代码和内容不变
最终演示结果截图如下:
 

div+css中fllat实例展示图

希望通过以上两个css实例对你认识float有帮助。希望大家多少实际操作实践试试!

  • 上一篇资讯: css 注释_css注解
  • 下一篇资讯: css font _ css 文字
  • 浏览:
    版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
    Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
    湘ICP备09003080号