淘宝布局（PC版），非响应式

最新推荐文章于 2022-06-25 16:23:42 发布

就今天去

最新推荐文章于 2022-06-25 16:23:42 发布

阅读量159

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_56047670/article/details/122292523

版权

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>淘宝布局（PC版）</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            color: #fff;
            font-size: 16px;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .wrapper {
            width: 100%;
            height: 100%;
        }

        /* 导航条部分 */
        .wrapper .top-nav-wrap {
            width: 100%;
            height: 105px;
        }

        .wrapper .top-nav {
            width: 1190px;
            height: 105px;
            margin: 0 auto;
            background-color: green;
            border: 1px solid #000;
        }

        /* 搜索部分 */
        .wrapper .search-wrap {
            width: 100%;
            height: 97px;
        }

        .wrapper .search {
            width: 1190px;
            height: 97px;
            background-color: #ff5500;
            margin: 0 auto;
            border: 1px solid #000;
        }

        /* 主体部分 */
        .wrapper .mian-wrap {
            width: 1190px;
            height: 663px;
            margin: 0 auto;
            border: 1px solid #000;
        }

        .wrapper .mian-wrap .mian-nav {
            width: 100%;
            height: 30px;
            background-color: green;
        }

        .wrapper .mian-wrap .mian-box .mian {
            width: 890px;
            height: 632px;
            float: left;
        }

        .mian-wrap .mian-box .mian .mian-inner {
            width: 890px;
            height: 522px;
            background-color: pink;
        }

        .mian-wrap .mian-box .mian .mian-inner .inner-lf {
            width: 190px;
            height: 100%;
            float: left;
            background-color: #ff5500;
        }

        .mian-wrap .mian-box .mian .mian-inner .inner-cer {
            width: 520px;
            height: 100%;
            float: left;
            border: 1px solid #000;
        }

        .mian-wrap .mian .mian-inner .inner-rt {
            padding: 0 8px;
            width: 160px;
            height: 100%;
            float: left;
            background-color: yellow;
        }

        .mian-wrap .mian .mian-bottom {
            width: 890px;
            height: 110px;
            background-color: purple;
        }

        .wrapper .mian-box .box-rt {
            width: 290px;
            height: 632px;
            float: left;
            margin-left: 8px;
            background-color: blue;
        }

        .wrapper .mian-box .box-rt .member {
            width: 290px;
            height: 132px;
            background-color: #ff5500;
        }

        .wrapper .mian-box .box-rt .massage {
            width: 290px;
            height: 26px;
            background-color: pink;
        }

        .wrapper .mian-box .box-rt .notice {
            width: 290px;
            height: 98px;
            padding-top: 10px;
            background-color: orange;
        }

        .wrapper .mian-box .box-rt .mobule {
            width: 290px;
            height: 230px;
            background-color: red;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <!-- 导航条 -->
        <div class="top-nav-wrap">
            <div class="top-nav">
                <div>导航条</div>
                <div>广告图</div>
            </div>
        </div>
        <!-- 搜索部分 -->
        <div class="search-wrap">
            <div class="search">
                <div>搜素部分</div>
            </div>
        </div>
        <!-- 主体部分 -->
        <div class="mian-wrap">
            <!-- 主体导航条部分 -->
            <div class="mian-nav">
                <div>主体导航条部分</div>
            </div>
            <!-- 主体部分 -->
            <div class="mian-box">
                <!-- 先两栏布局 -->
                <div class="mian">
                    <div class="mian-inner">
                        <div class="inner-lf">
                            <div>主体分类栏</div>
                        </div>
                        <div class="inner-cer">
                            <div>主体-轮播图</div>
                        </div>
                        <div class="inner-rt">
                            <div>主体-右侧展示</div>
                        </div>
                    </div>
                    <div class="mian-bottom">
                        <div>主体-底部信息</div>
                    </div>
                </div>
                <div class="box-rt">
                    <div class="member">
                        <div>登录注册</div>
                    </div>
                    <div class="massage">
                        <div>信息部分</div>
                    </div>
                    <div class="notice">
                        <div>公告</div>
                    </div>
                    <div class="mobule">
                        <div>图标</div>
                    </div>
                    <div class="app">
                        <div>apps</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>