DIV+CSS搭建（淘宝首页）布局图

最新推荐文章于 2024-04-26 15:21:52 发布

crazy的蓝色梦想

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量3.6w

点赞数 59

文章标签： DIV+CSS搭建网页布局图 css

本文链接：https://blog.csdn.net/qq_41257129/article/details/88665550

版权

制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。
下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。

搭建的布局图与最终效果的一个比较：
在这里插入图片描述


<!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>Document</title>
</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>

  <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;
        }
        /* .wrapper .mian-box .box-rt .app{

        } */
    </style>

crazy的蓝色梦想

关注

59
点赞
踩
432

收藏

觉得还不错? 一键收藏
0
评论
DIV+CSS搭建（淘宝首页）布局图

制作网页时，构建页面布局图很重要。布局前的结构划分避免造成混乱。下面的代码只有DIV+CSS的网页结构布局。没有将最终的淘宝静态页面的代码放上去，只有布局图和最终页面的比较图。搭建的布局图与最终效果的一个比较：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...
复制链接

扫一扫