@（）12

最新推荐文章于 2024-07-25 08:14:42 发布

SuZiSJ

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量359

点赞数 5

文章标签： css css3 前端

本文链接：https://blog.csdn.net/SuZiSJ/article/details/134712806

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fu {
            position: relative;
            height: 25px;
            width: auto;
            background-color: gray;
            border-radius: 10px;
        }
        .header {
            display: inline-block;
            position: relative;
            left: 0;
           
        }
        a {
            text-decoration: none;
            color: black;
        }
        .header1 {
            display: inline-block;
            position: absolute;
            right: 10px;
        }
        .che {
            background-color: rgba(1, 1, 1, 0.308);

        }
        .img {
            position: absolute;
            top: 30px;
        }
        .dier {
            padding: 0;
            margin: 0;
            position: absolute;
            left: 400px;
            list-style: none;
            top: 80px;
            font-size: 30px;
        }
        .qw {
            display: inline;
        }
        textarea {
            position: absolute;
            right: 40px;
            top: 80px;
            resize: none;
            
        }
        .body {
            width: 200px;
            height: 675px;
            background-color: gray;
            position: relative;
            top: 167px;
            left: 190px;
        }
        .as {
            list-style: none;
            float: left;
        }
        .img2 {
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .a {
            padding: 3px;
            vertical-align: middle;
            float: none;
            font-size: 20px;
            height: 84px;
            
        }

    </style>
</head>
<body>
    <div class="fu">
        <div class="header">
            <a href="#">小米官网</a>
            <span>|</span>
            <a href="#">小米商城</a>
            <span>|</span>
            <a href="#">小米澎湃os</a>
            <span>|</span>
            <a href="#">loT</a>
            <span>|</span>
            <a href="#">云服务</a>
            <span>|</span>
            <a href="#">有品</a>
        </div>
        <div class="header1">
            <a href="#">登录</a>
            <span>|</span>
            <a href="#">注册</a>
            <span>|</span>
            <a href="#">消息通知</a>
            <span>&ensp;</span>
            <a href="#" class="che">购物车(0)</a>
        </div>
        <div>
            <img class="img" src="https://ts2.cn.mm.bing.net/th?id=OIP-C.2d2ejd2aIAmuTR9Q8rtQyQHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" width="200px">
            <ul class="dier">
                <li class="qw">xiaomi手机</li>
                <li class="qw">redmi手机</li>
                <li class="qw">电视</li>
                <li class="qw">笔记本</li>
                <li class="qw">平板</li>
                <li class="qw">家电</li>
            </ul>
            <textarea class="shur" placeholder="最好的apex(doge)"></textarea>
            
        </div>

    </div>
    <div>
        <img class="img2" src="https://tse4-mm.cn.bing.net/th/id/OIP-C._cczoBbh447D1vbFeQBXUAHaEK?w=290&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="1200px" height="675px">
    </div>
    <div class="body">
        
        <div class="as">
            <div class="a">手机</div>
            <div class="a">电视</div>
            <div class="a">家电</div>
            <div class="a">笔记本 平板</div>
            <div class="a">出行 穿戴</div>
            <div class="a">耳机 音箱</div>
            <div class="a">健康 儿童</div>
            <div class="a">生活 箱包</div>
        </div>
        

    </div>
    
</body>
</html>