TOP

前端技术之_CSS详解第六天--完结(五)

2019-09-03 03:32:03 【大中小】浏览:51次

ul li a:hover{ background-color: gold; } p{ font-size: 30px; } .btn{ display: block; width: 120px; height: 30px; background-color: orange; position: relative; top: 2px; left: 1px; } </style> </head> <body> <div class="nav"> <div class="inner_c"> <ul> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> <li><a href="#">网页栏目</a></li> </ul> </div> </div> <img src="images/2.jpg" alt="" /> <p> <a href="" class="btn">按钮</a> </p> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> <img src="images/2.jpg" alt="" /> </body> </html>

IE6不兼容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .backtop{
            position: fixed;
            bottom: 100px;
            right: 30px;
            width: 60px;
            height: 60px;
            background-color: gray;
            text-align: center;
            line-height:30px;
            color:white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a class="backtop">返回<br />顶部</a>
    <img src="images/2.jpg" alt="" />
    <img src="images/2.jpg" alt="" />
    <img src="images/2.jpg" alt="" />
    <img src="images/2.jpg" alt="" />
</body>
</html>

五、z-index

● z-index值表示谁压着谁。数值大的压盖住数值小的。

● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。

● z-index值没有单位，就是一个正整数。默认的z-index值是0。

● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。

● 从父现象：父亲怂了，儿子再牛逼也没用。

<!DOCTYPE html PUBLIC "-//W

首页上一页 2 3 4 5 6 下一页尾页 5/6/6
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：CSS3实现多种背景效果	下一篇：Vue中scoped css和css module比较