前端学习fixed

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .d {
        margin: 0px 0px;
        padding: 0px 0px;
    }
    
    .e {
        float: left;
    }
    
    input {
        width: 300px;
        height: 40px;
        margin-bottom: 30px;
    }
    
    .d {
        float: left;
    }
    
    .dd {
        float: left;
    }
    
    li {
        color: yellow;
        margin-top: 5px;
    }
    
    ul {
        width: 300px;
    }
    
    a:link {
        color: black;
        text-decoration: none;
    }
    
    a:hover {
        color: yellow;
    }
    
    .ss {
        position: fixed;
        left: 50px;
        bottom: 200px;
    }
    
    .ww {
        position: fixed;
        bottom: 200px;
        right: 50px;
    }
    
    .f {
        float: left;
        height: 2000px;
    }
    
    .mm {
        margin-left: 250px;
        margin-right: 130px;
    }
</style>

<body>
    <a name="a1"> </a>
    <div class="mm">
        <div class="e"><img src="img/VO4HQHOJEQ9~RMDWTFA@AWQ.jpg"></div>

        <div class="d">
            <ul>
                <input type="text" readonly placeholder="图片">
                <li><a href="s">  体育中心方舱医院休舱</a></li>
                <li><a href="s"> 鲜花蛋糕送女医疗队员</a></li>
                <li><a href="s"> 餐厅商户逐渐恢复营业</a></li>
                <li><a href="s"> 走近咽拭子标本采集员</a></li>

            </ul>


            <ul><input type="text" readonly placeholder="视频">
                <li><a href="s"> 至尊公主号邮轮将停靠旧金山</a></li>
                <li><a href="s"> 征集:全民抗疫</a></li>
                <li><a href="s"> 井柏然示范春日穿搭</a></li>
                <li><a href="s"> 张天爱栗子头撞脸蒙奇奇</a></li>
                <li><a href="s"> 他们在香港修文物</a></li>
                <li><a href="s"> 女护士的笑脸印记</a></li>
            </ul>
        </div>
        <div class="dd">
            <ul> <input type="text" readonly placeholder="新闻">
                <li><a href="s"> 指挥这场人民战争——重地之战</a></li>
                <li><a href="s"> 理上网来</a></li>
                <li><a href="s"> 防疫国际合作 这样推动</a></li>
                <li><a href="s"> 这些数字都是情！</a></li>
                <li><a href="s"> 火线上激扬青春力量</a></li>
                <li><a href="s"> 疫情新热点</a></li>
                <li><a href="s"> 英雄的城市</a></li>
                <li><a href="s"> 各地减负稳岗保就业</a></li>
                <li><a href="s"> 知识产权局专项整治行动</a></li>
                <li><a href="s"> 如何用行动展现人政治本色</a></li>
                <li><a href="s"> 彰显忠诚担当</a></li>
                <li><a href="s"> 外资企业：持续看好中国市场</a></li>
            </ul>
        </div>
        <div class="f">

        </div>
        <div class="ss"><img src="img/{4D0252EF-6C96-41A4-95A5-5893EC801BFC}_20200309125840.jpg"></div>
        <div class="ww">
            <a href="#a1"><img src="img/Y[BR18{)VLS)0CB3)8Z[M%V.png"></a>
        </div>
    </div>




</body>

</html>

 

 

posted @ 2020-03-09 18:55  技术超级菜  阅读(299)  评论(0)    收藏  举报