CSS视频教程,第6章 CSS 高级

课程目录
1 CSS定位
2 CSS浮动
3 CSS尺寸
4 CSS导航栏
5 CSS图片

1 CSS定位

允许定义元素相对其正常位置该出现的位置/或相对父元素，另一个元素甚至浏览器窗口本身的位置发生偏移。
css三种定位基本机制：
①普通流：元素按照html元素中的位置顺序排序
②浮动(float)：浮动的框可以向左或者向右，直到它的外边距碰到包含框或另外一个浮动框的边框为止
③绝对定位(absolute)：使元素的位置脱离文档流，不占据空间；这一点与相对定位(relative)不同，相对定位实际上被看作普通流定位模型的一部分，因此元素的位置相对它在普通流的位置。
定位属性：position将元素放在一个静态的，相对的，绝对的，固定的位置，通过属性赋值，让元素向对应的方向发生偏移。

overflow设置元素溢出的区域发生的事情，clip设置元素显示状态多用于图片，vertical-align设置元素的垂直对齐方式，z-index设置元素的层叠顺序

2 CSS浮动

属性float属性赋值，left、right、none；inherit从父级继承浮动属性，还有一个clear属性主要是用来去掉浮动引起的属性包括继承属性

3 CSS尺寸

尺寸属性允许你控制元素的高度和宽度，同样它允许你增加行间距，涉及属性为：
height/line-height/max-height/max-width/width/min-height/min-width

4 CSS导航栏

        <ul id="web">
            <li><a href="dhnblog.com">HTML</a></li>
            <li><a href="dhnblog.com">CSS</a></li>
            <li><a href="dhnblog.com">JavaScript</a></li>
            <li><a href="dhnblog.com">jQuery</a></li>
        </ul>

#web li{
    list-style: none;
    display: inline;
    margin-right: 24px;
}
#web li a:link,#web li a:visited{
    color: #fff;
    /* display: block; */
    text-decoration: none;
    background-color: #FF9900
}
#web li a:hover,#web li a:active{
    background-color: deepskyblue
}

5 CSS图片

        <!-- 引用一张图片，加上一句描述，使用div进行承载 -->
        <div class="picture">
            <a href="#">
                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1003320719,3235932866&fm=26&gp=0.jpg" width="300" height="200">
            </a>
        </div>
        <style type="text/css">
            .picture a:link img,.picture a:visited img{
                opacity: 0.6;
            }
            .picture a:hover img,.picture a:active img{
                opacity: 0.8;
            }
            /*opacity设置属性透明度，属性值为0-1，其中透明度为0完全透明；透明度为1完全不透明*/
        </style>

相关文章