定位相关属性、锚点连接的建立与使用、(Flash和marquee(滚动字幕)、滚动条)

定位的相关属性

(1)position:static /absolute/relative/fixed

1、static:默认值,无特殊定位,对象遵循HTML原则;

2、absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据html对象(浏览器),而其层叠通过z-index属性定义;

3、relative :相对定位,相对于标签原来的位置进行定位,对依据right,top,left,bottom(相对定位)等属性在正常文档流中偏移位置

4、fixed:固定定位:相对于浏览器定位,脱离文档流;

(2)绝对定位和相对定位的区别

①参照物不同绝对定位的参照物是包含块,相对定位的参照物是元素本身位置;
②绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据空间。

(3)包含块的概念及作用
包含块是绝对定位的基础,包含块就是为绝对定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;
默认状态下,html是一个大的包含块,所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

定义父元素为包含块:给直接父元素添加声明position:relative;

定位元素层叠属性:
z-index : auto | number
检索或设置对象的层叠顺序。
auto:默认值。遵从其父对象
number:无单位的整数值。可为负数
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。此属性仅仅作用于 position 属性值为 absolute/relative/fixed 的对象.

命名锚点链接的应用:

1.命名锚点的作用:在同一页面内的不同位置进行跳转。

2.给元素定义命名锚记名
语法:<标记 id="命名锚记名"> </标记>

3.命名锚记连接
语法:<a href="#命名锚记名称"></a>

元素透明兼容的写法:
Filter:alpha(opacity=50);IE8以下浏览器可以兼容
Opacity:0.5;高版本浏览器可以兼容

Border-radius:10px; 可以写个圆角

flash

1、插入flash

1)语法:

 <object width="value" height="value">
    <embed width="value" height="value" src="flash路径及全称"></embed>
    </object>

2)将flash背景设置为透明

<embed wmode="transparent" />

给标记添加属性:wmode=“transparent”

说明:flash源文件格式.fla,
导出影片为.swf,
创建播放器格式为.exe.
gif格式:.gif

滚动字幕
<marquee
behavior(行为)="scroll(滚动)/alternate(晃动)"direction(方向)=“up(从下向上)/down(从上向下)/left(从右向左)/right(从左向右)”
scrollamount(滚动速度)=“value”height=“value(上下滚动范围)”width=“”(左右滚动范围)>滚动内容

滚动条
Overflow内容溢出时的设置 属性:
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置

visible 默认值。使用该值时,无论设置的"width"和"height"的值是多少,其中的内容无论是否超出范围都将被强制显示。
hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll 无论内容是否超越范围,都将显示滚动条。
auto 当内容超出范围时,显示滚动条,否则不显示。

应用:
1)没有水平滚动条:

<div style="overflow-x:hidden">test</div>

2)没有垂直滚动条

<div style="overflow-y:hidden">test</div>

3)没有滚动条
<div style="overflow-x:hidden;overflow-y:hidden"

style="overflow:hidden">test</div>

4)自动显示滚动条

<div  style="height:100px;width:100px;overflow:auto;">test</div>

自己定义滚动条的颜色
Body {
scrollbar-arrow-color: #f4ae21; /图6,三角箭头的颜色/
scrollbar-face-color: #333; /图5,立体滚动条的颜色/
scrollbar-3dlight-color: #666; /图1,立体滚动条亮边的颜色/
scrollbar-highlight-color: #666; /图2,滚动条空白部分的颜色/
scrollbar-shadow-color: #999; /图3,立体滚动条阴影的颜色/
scrollbar-darkshadow-color: #666; /图4,立体滚动条强阴影的颜色/
scrollbar-track-color: #666; /图7,立体滚动条背景颜色/
scrollbar-base-color:#f8f8f8; /滚动条的基本颜色/
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值