常用的CSS属性。

html-css09

常用的CSS属性。,第1张

float，css的一种属性，主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

扩展资料

CSS属性

1、整数和实数

在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。

2、长度量

相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800木600的设置下，一个像素的长度就等于屏幕的宽度除以800。

3、百分数量（percentages）

百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

参考资料来源：百度百科-CSS

参考资料来源：百度百科-FLOAT

打开 Dreamweaver

新建 HTML 文档；

修改标题为"跑马灯"

保存为 index.html 文件。

首先，编写跑马灯部分的静态 HTML 代码，把图片排列起来

在 <body>和 </body>标签中添加以下代码：

<div>

　<ul>

<li><img src="img/1.jpg" /></li>

<li><img src="img/2.jpg" /></li>

<li><img src="img/3.jpg" /></li>

<li><img src="img/4.jpg" /></li>

<li><img src="img/5.jpg" /></li>

<li><img src="img/6.jpg" /></li>

<li><img src="img/7.jpg" /></li>

　</ul>

</div>

给上一步的 HTML 代码中的 div 标签增加 class 属性，如下：

　<div class="con">

编写跑马灯部分的 CSS 样式代码，代码放在 <head>和 </head>标签中，如下：

<style type="text/css">

　ul{list-style:nonepadding:0margin:0}

　.con{ width:1105pxheight:225pxoverflow:hiddenborder:2px solid #666margin:10px auto 0 autopadding:5px 0 0 5px}

　.con ul li{ float:leftmargin:0 5px 10px 0}

　.con ul li img{ display:blockwidth:209pxheight:209pxpadding:2pxborder:1px solid #ccc}

</style>

引入 JQuery 库

　<script type="text/javascript" src="jquery-1.11.0.min.js"></script>

引入 Marquee 插件

　<script type="text/javascript" src="marquee2.js"></script>

代码放在 </body>标签前，如图：

给 div 增加 marquee 类

　<div class="con marquee">

保存文件，在浏览器中打开，就可以看到图片开始滚动了。

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向，可以给 div 指定 direction 属性，属性值可以取：

　up 上

　down 下

　left 左

　right 右