前端学习的第三天

最新推荐文章于 2024-10-02 21:20:07 发布

Supdna

最新推荐文章于 2024-10-02 21:20:07 发布

阅读量23

点赞数

文章标签：学习 html css3 前端 css

本文链接：https://blog.csdn.net/qq_41550419/article/details/129946329

版权

今天第一课学习的内容

style

<style>
        .wrap{width: 2000px;padding: 50px;background-color: gray;}
        .fl{float: left;}
        .fr{float: right;}
        .clear{clear: both;}
        .logo,.search,.code{height: 200px;background-color: red;}
        .logo{width: 400px;}
        .search{width: 950px;height:150px;margin-left: 100px;padding: 25px;margin-left: 100px;}
        .code{width: 400px;}
        .recommend{height: 50px;background-color: yellow;padding: 25px;}
        .nav{height: 50px;background-color: yellow;margin-top: 10px;}
        .type,.cart{height: 50px;background-color: green;}
        .type{width: 680px;padding: 10px;height: 30px;}
        .cart{width: 100px;}
        .nav .item{width: 60px;height: 30px;background-color: green;float: left;margin-left: 25px;margin-top: 10px;}
        .input,.hot_words{height: 15px;background-color: purple;}
        .input{margin-bottom: 5px;}
        .hot_words .item{float:left;width: 60px;margin-right: 10px;background-color: pink;height: 10px;margin-top: 2px;}

    </style>

body

<body>
        <div class="wrap">
            <div class="logo fl"></div>
            <div class="search fl">
                <div class="recommend">
                    <div class="type fl">
                        <div class="input"></div>
                        <div class="hot_words">
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="item"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="cart fr"></div>
                    <div class="clear"></div>
                </div>
                <div class="nav">
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="code fr"></div>
            <div class="clear"></div>
        </div>
</body>