百度首页--部分-CSDN博客

本文链接：https://blog.csdn.net/qq_44365937/article/details/100588363

</div>
<div class="goTop">
    ^
</div>
<!--<div class="rela">
    <h1>>_<</h1>
</div>-->
<div class="abso">
    <img src="news.jpg" />
    <p>喵喵喵</p>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        body{
            background-color: #bbb;
        }
        .headerwrap{
            background-color: #fff;
        }
        .header{
            width: 1200px;
            height: 80px;
            margin: 0 auto;
        }
        .logo{
            width: 150px;
        }
        .nav{
            float: right;
        }
        h1{
            float:left;
        }
        /*float:包裹性 向上性 不重叠*/
        .nav li{
            float: left;
            margin-right: 20px;
            line-height: 80px;
        }
        .nav li a{
            color: #000;
        }
        .goTop{
            width:30px;
            height:30px;
            border:1px solid #ccc;
            background-color:#fff;
            color:blue;
            position:fixde;
            right:0;
            top:300px;
            font-size:20px;
            text-align:center;
            line-height:30px;
            cursor:pointer;
        }
        .goTop:hover{
            color:white;
            background-color:blue;
        }
        /*.rela{
            width:100px;
            height:100px;
            background-color:red;
            position:relative;
            left:100px;
            top:100px;
            text-align:center;
        }*/
        .abso{
            width:450px;
            height:279px;
            position:relative;
            margin:0 autu 400px;
            borber:1xp solid red;
        }
        .abso p{
            width:450px;
            height:50px;
            position:absolute;
            bottom:-50px;
            background-color:rgba(0,0,255,0.5);
            /*opacity: 0.5;*//*不透明度*/
            transition:1s;/*过渡*/
            /*display: none;*/
        }

    </style>
</head>
<body>
    <!-- 文档流：普通流/浮动流(float)/
    定位流(fixed固定定位 relative相对定位 absolute绝对定位 stacti) -->
    <div class="headerwrap">
        <div class="header">
            <h1>
            <img class="logo" src="https://i-blog.csdnimg.cn/blog_migrate/1722b5a02ba305e0f942c1ac75a22428.png" alt="">
            </h1>
            <ul class="nav">
                <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>
    <div style="">

    </div>
    <div class="goTop">
        ^
    </div>
    <!--<div class="rela">
        <h1>>_<</h1>
    </div>-->
    <div class="abso">
        <img src="news.jpg" />
        <p>喵喵喵</p>
    </div>
</body>
</html>