• 第8天 定位

    position 定位属性，检索对象的定位方式；

    一、语法：position：static /absolute/relative/fixed

    取值：

    1、static：默认值，无特殊定位，对象遵循HTML原则；

    2、absolute：绝对定位，将对象从文档流中拖离出来，使用left/right/top/bottom等属性相对其

    最接近的一个并有定位设置的父元素进行绝对定位；如果不存在这样的父对象，则依据body对象(浏览器)，而其层叠通过z-index属性定义；

    3、relative ：相对定位，对象不可层叠，将依据right，top，left，bottom（相对定位）等属性在正常文档流中偏移位置；

    4、fixed：(固定定位)未支持，对象定位遵从绝对定位方式（absolute）；但是要遵守一些规范；

    二、绝对定位和相对定位的区别

    1、参照物不同绝对定位的参照物是包含块，相对定位的参照物是元素本身位置；

    2、绝对定位将对象从文档流中拖离出来因此不占据空间，相对定位不破坏正常的文档流顺序无论是否进行移动，元素仍然占据原来的空间。

    三、包含块的概念及作用

            包含块是绝对定位的基础，包含块就是为决定定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比 长度的参考；

            默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。

    定义元素为包含块：给绝对定位元素的父元素添加声明position：relative；

    四、命名锚点链接的应用

    定义：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。

    命名锚点链接的应用：

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

    2)给元素定义命名锚记名

    语法：<标记   id="命名锚记名">    </标记>

    3)命名锚记连接

    语法：<a href="#命名锚记名称"></a>

    五、定位元素层叠属性：

    z-index : auto | number

    检索或设置对象的层叠顺序。

    auto：默认值。遵从其父对象

    number:无单位的整数值。可为负数

    说明：

    1）较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
    此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。

    三、圆角切图

    1、纯css 书写

    2、切图拼接；

    四、Flash和marquee(滚动字幕)

    1、插入flash

    1）语法：

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

    说明：flash源文件格式.fla,

    导出影片为.swf,

    创建播放器格式为.exe.

    gif格式：.gif

    2）将flash背景设置为透明

    <param name="wmode" wmode="transparent" />

    给<embed>标记添加属性：wmode="transparent"

     

    3）IE中不显示flash,可做如下操作：

    A.下载安装flash player;

    B.打开IE浏览器，选择工具菜单--Internet选项----安全----低。

      

    2、滚动字幕的应用：

     <marquee

    behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）"

    scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)>
    内容
    </marquee>

     

    五、滚动条

    1,Overflow内容溢出时的设置

    属性：

    overflow 水平及垂直方向内容溢出时的设置 
    overflow-x 水平方向内容溢出时的设置 
    overflow-y 垂直方向内容溢出时的设置

    以上三个属性设置的属性值：

    visible、scroll、hidden、auto、

    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;100px;overflow:auto;">test</div>

     

    2、自己定义滚动条的颜色

    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; /*滚动条的基本颜色*/


    }


    Cursor:url(mouse.cur); /*自定义个性鼠标*/

    以上适用与<body>、<div>、<textarea>、<iframe>

    cursor:pointer/move/text/help/wait/w-resize/s-resize/sw-resize/se-resize/crosshair/auto/default/

     

     
  • 相关阅读:
    Structured streaming
    streaming窗口操作
    scala伴生对象，apply()及单例
    storm集成kafka
    solr简易安装配置
    拦路雨偏似雪花，饮泣的你冻吗？--稍瑞，我是关键字过滤器
    我存在，你深深的循环里--从反射看JSON死循环
    ueditor:原谅我这一生不羁放纵爱独特
    或许你不知道(2):LinkedList
    自定义负载均衡
  • 原文地址：https://www.cnblogs.com/mingjixiaohui/p/5196790.html
Copyright © 2020-2023  润新知