微软官方商城简单布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微软官方</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width:100%;
            height:33.6px;
            background-color:dodgerblue;
            margin: 0 auto;
        }
        .header a{
            display: block;
            color: white;
            text-align: center;
            line-height: 33.6px;

        }
        .header2{
            width: 1519.2px;
            height: 50px;
            background-color: lightgrey;
        }
        .header3{
            width: 1519.2px;
            height: 72px;
            background-color: white;
        }
        .header4{
            width: 1519.2px;
            height: 442px;
            background-color: white;
        }
        .header5{
            width: 1519.2px;
            height: 166.15px;
            background: white;
            margin: 10px 0 0 0 ;
        }
        .header6{
            width: 1519.2px;
            height: 333.38px;
            background: white;
            margin: 0 auto;
        }
        .Surface{
            width: 1519.2px;
            height: 383px;
            background: dodgerblue;
            margin: 10px auto;
        }
        .Office{
            width: 1519.2px;
            height: 404.7px;
            background: fuchsia;
            margin: 0 auto;
        }
        .Xbox{
            width: 1519.2px;
            height: 404.7px;
            background: white;
            margin: 0 auto;
        }
        .diannao{
            width: 1519.2px;
            height: 404.7px;
            background: darkgoldenrod;
            margin: 0 auto;
        }
        .kongdi{
            width: 1519.2px;
            height: 249.2px;
            background-color: dodgerblue;
            margin: 10px auto;
        }
        .mv{
            width: 1300px;
            height: 137px;
            background-color: yellow;
            margin: 10px auto;
        }
        .cao {
            width: 1300px;
            height: 800px;
            background-color: grey;
            margin: 0 auto;
        }
        .shangshang{
            width: 1180px;
            height: 333.38px;
            background-color: white;
            margin:0 auto;
        }
        .baitu{
            width: 1180px;
            height: 152px;
            background-color: black;
            margin: 0 auto;
        }
        .wo{
            width: 1180px;
            height: 442px;
            background: grey;
            margin: 0 auto;
            overflow: hidden;
        }
        .mm{
            width:1519.2px;
            height: 4536.04px;
            margin: 0 auto;
            /*background-color: dodgerblue;*/
        }
        .bb{
            width:261.14px;
            height:333.38px;
            background:dodgerblue;
            float: left;
        }
        .aa{
            width:880.16px;
            height:333.38px;
            background:grey;
            float: right;
        }
        .zz{
            width:1180px;
            height: 50px;
            background:lightgrey;
            margin: 0 auto;

        }
        .qq{
            width:95px;
            height: 50px;
            background: lightgrey;
            float: left;
        }
        .ww{
            width: 95px;
            height: 50px;
            background: lightgrey;
            float: left;
            margin-left: 34px;
        }
        .ww li {
            list-style: none;
            line-height: 50px;
        }
        .ww li a{
            text-decoration: none;
        }
        .ee{
            width: 1180px;
            height: 72px;
            background: white;
            margin: 0 auto;
        }
        .er{
            width: 96px;
            height: 72px;
            background: white;
            float: left;
        }
        .er li{
            float: left;
            list-style: none;
            line-height: 72px;
        }
        .er li a{
            text-decoration: none;
        }
        .rr{
            width: 91px;
            height:72px;
        }
        .sd{
            list-style: none;
            text-align: center;
            color: white;
        }
        .sd p{
            height: 38px;
            margin-left:0px;
        }
        .sd p a{
            color: white;
        }
        .sd a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="mm">
    <div class="header">
        <a href="#">教育优惠 | 师生购机专属折扣，Surface 新品现已加入。前往专区>
        </a>
    </div>
    <div class="header2">
        <div class="zz">
            <div class="qq">
                <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1034 220">
  <path d="m 1033.7455,99.8385 0,-18.18 -22.5763,0 0,-28.26375 -0.7599,0.23375 -21.20505,6.4875 -0.4175,0.1275 0,21.415 -33.46875,0 0,-11.92875 c 0,-5.555 1.2425,-9.80625 3.69,-12.64125 2.43125,-2.80125 5.90875,-4.225 10.3425,-4.225 3.18875,0 6.49,0.75125 9.81125,2.2325 l 0.8325,0.37125 0,-19.14625 -0.39125,-0.14375 c -3.09875,-1.11375 -7.315,-1.675 -12.53875,-1.675 -6.585,0 -12.56875,1.4325 -17.78625,4.2725 -5.22125,2.84375 -9.32875,6.90375 -12.205,12.06625 -2.8675,5.15625 -4.3225,11.11125 -4.3225,17.70125 l 0,13.11625 -15.72,0 0,18.18 15.72,0 0,76.58875 22.5675,0 0,-76.58875 33.46875,0 0,48.67125 c 0,20.045 9.455,30.20375 28.10125,30.20375 3.065,0 6.2888,-0.36 9.5825,-1.06375 3.3513,-0.72125 5.6338,-1.4425 6.9775,-2.2125 l 0.2975,-0.175 0,-18.34875 -0.9175,0.6075 c -1.225,0.8175 -2.75,1.48375 -4.5387,1.97875 -1.7963,0.505 -3.2963,0.75875 -4.4575,0.75875 -4.3688,0 -7.6,-1.1775 -9.6063,-3.5 -2.0275,-2.34375 -3.0562,-6.44375 -3.0562,-12.1775 l 0,-44.7425 22.5762,0 z m -167.11175,60.42175 c -8.19125,0 -14.64875,-2.71625 -19.2,-8.06625 -4.57875,-5.3775 -6.89875,-13.04375 -6.89875,-22.78375 0,-10.04875 2.32,-17.91375 6.90125,-23.38625 4.55375,-5.43625 10.95,-8.195 19.01375,-8.195 7.825,0 14.05375,2.635 18.515,7.83625 4.485,5.2275 6.76,13.03 6.76,23.19625 0,10.29125 -2.14,18.19625 -6.36,23.48375 -4.19,5.24875 -10.49125,7.915 -18.73125,7.915 m 1.005,-80.885 c -15.6275,0 -28.04,4.57875 -36.88875,13.61 -8.84375,9.0325 -13.32875,21.53125 -13.32875,37.15375 0,14.8375 4.3775,26.7725 13.01125,35.4675 8.63375,8.69875 20.38375,13.105 34.92,13.105 15.14875,0 27.31375,-4.6425 36.16,-13.79875 8.845,-9.1475 13.32625,-21.5275 13.32625,-36.785 0,-15.07 -4.205,-27.09375 -12.5025,-35.73125 -8.30125,-8.64125 -19.9775,-13.02125 -34.6975,-13.02125 m -86.60313,-5e-4 c -10.63,0 -19.4225,2.71875 -26.14,8.08 -6.7575,5.3925 -10.185,12.46625 -10.185,21.025 0,4.44875 0.74,8.40125 2.19625,11.7525 1.465,3.36375 3.7325,6.32375 6.74375,8.80875 2.99,2.465 7.6025,5.0475 13.7175,7.67375 5.13875,2.115 8.9725,3.905 11.4075,5.315 2.38,1.38125 4.07,2.77125 5.02375,4.12375 0.92625,1.32375 1.3975,3.135 1.3975,5.3725 0,6.36625 -4.7675,9.46375 -14.57875,9.46375 -3.63875,0 -7.79,-0.75875 -12.3375,-2.2575 -4.55,-1.49625 -8.80125,-3.6475 -12.63375,-6.40625 l -0.93625,-0.67125 0,21.72625 0.34375,0.16 c 3.19375,1.47375 7.21875,2.71625 11.96375,3.695 4.73625,0.97875 9.03875,1.4775 12.7775,1.4775 11.535,0 20.82375,-2.7325 27.60125,-8.125 6.82125,-5.43 10.27875,-12.67 10.27875,-21.52625 0,-6.3875 -1.86125,-11.86625 -5.53,-16.28375 -3.6425,-4.3825 -9.965,-8.405 -18.785,-11.96125 -7.02625,-2.82 -11.5275,-5.16125 -13.38375,-6.9575 -1.79,-1.73625 -2.69875,-4.19125 -2.69875,-7.3 0,-2.75625 1.12125,-4.96375 3.425,-6.7525 2.32125,-1.7975 5.55125,-2.71125 9.60375,-2.71125 3.76,0 7.6075,0.59375 11.4325,1.7575 3.82375,1.16375 7.18125,2.7225 9.985,4.63 l 0.92125,0.63 0,-20.61 -0.35375,-0.1525 c -2.58625,-1.10875 -5.99625,-2.0575 -10.1375,-2.8275 -4.125,-0.7625 -7.86625,-1.14875 -11.11875,-1.14875 m -95.1575,80.8855 c -8.18875,0 -14.64875,-2.71625 -19.19875,-8.06625 -4.58,-5.3775 -6.89625,-13.04125 -6.89625,-22.78375 0,-10.04875 2.31875,-17.91375 6.90125,-23.38625 4.55,-5.43625 10.945,-8.195 19.0125,-8.195 7.8225,0 14.05125,2.635 18.51375,7.83625 4.485,5.2275 6.76,13.03 6.76,23.19625 0,10.29125 -2.14125,18.19625 -6.36125,23.48375 -4.19,5.24875 -10.48875,7.915 -18.73125,7.915 m 1.0075,-80.885 c -15.63125,0 -28.04375,4.57875 -36.88875,13.61 -8.84375,9.0325 -13.33125,21.53125 -13.33125,37.15375 0,14.84375 4.38,26.7725 13.01375,35.4675 8.63375,8.69875 20.3825,13.105 34.92,13.105 15.145,0 27.31375,-4.6425 36.16,-13.79875 8.8425,-9.1475 13.32625,-21.5275 13.32625,-36.785 0,-15.07 -4.20625,-27.09375 -12.505,-35.73125 -8.30375,-8.64125 -19.9775,-13.02125 -34.695,-13.02125 m -84.47675,18.6945 0,-16.41125 -22.2925,0 0,94.76625 22.2925,0 0,-48.47625 c 0,-8.24375 1.86875,-15.015 5.55625,-20.13 3.64125,-5.05375 8.49375,-7.615 14.4175,-7.615 2.0075,0 4.26125,0.33125 6.7025,0.98625 2.41625,0.65125 4.16625,1.3575 5.19875,2.10125 l 0.93625,0.67875 0,-22.47375 -0.36125,-0.155 c -2.07625,-0.8825 -5.0125,-1.3275 -8.72875,-1.3275 -5.60125,0 -10.615,1.8 -14.90875,5.34375 -3.76875,3.115 -6.49375,7.38625 -8.57625,12.7125 l -0.23625,0 z m -62.21312,-18.695 c -10.22625,0 -19.34875,2.19375 -27.10875,6.51625 -7.775,4.3325 -13.7875,10.51875 -17.87875,18.385 -4.0725,7.8475 -6.14,17.01375 -6.14,27.235 0,8.95375 2.005,17.17125 5.9675,24.4125 3.965,7.25375 9.5775,12.92875 16.68125,16.865 7.09375,3.93125 15.2925,5.925 24.37,5.925 10.59375,0 19.63875,-2.11875 26.89125,-6.295 l 0.2925,-0.16875 0,-20.4225 -0.93625,0.68375 c -3.285,2.3925 -6.95625,4.3025 -10.90625,5.67875 -3.94,1.375 -7.5325,2.07 -10.68125,2.07 -8.7475,0 -15.76875,-2.7375 -20.86625,-8.1325 -5.10875,-5.40375 -7.69875,-12.99 -7.69875,-22.5375 0,-9.6075 2.70125,-17.38875 8.025,-23.13125 5.30625,-5.725 12.34125,-8.62875 20.9075,-8.62875 7.3275,0 14.4675,2.48125 21.2225,7.38125 l 0.93375,0.67875 0,-21.51875 -0.30125,-0.17 c -2.5425,-1.4225 -6.00875,-2.5975 -10.31375,-3.48875 -4.285,-0.88875 -8.47625,-1.3375 -12.46,-1.3375 m -66.48075,2.284 -22.2925,0 0,94.76625 22.2925,0 0,-94.76625 z M 462.79625,41.2875 c -3.66875,0 -6.86875,1.24875 -9.4975,3.72375 -2.64,2.4825 -3.98,5.6075 -3.98,9.295 0,3.63 1.32375,6.6975 3.9375,9.11375 2.5975,2.40875 5.8075,3.63 9.54,3.63 3.73125,0 6.95375,-1.22125 9.5825,-3.62625 2.64625,-2.42 3.9875,-5.4875 3.9875,-9.1175 0,-3.55875 -1.305,-6.6525 -3.87875,-9.195 -2.57,-2.5375 -5.83125,-3.82375 -9.69125,-3.82375 m -55.61988,33.3795 0,101.7575 22.75,0 0,-132.235 -31.48625,0 -40.0225,98.22 -38.83875,-98.22 -32.76875,0 0,132.235 21.37875,0 0,-101.7675 0.735,0 41.0125,101.7675 16.13375,0 40.3725,-101.7575 0.73375,0 z" class="microsoft" fill="#706d6e" style="fill-opacity:1;fill-rule:nonzero;stroke:none"></path>
  <path d="M 104.8675,104.8675 0,104.8675 0,0 l 104.8675,0 0,104.8675 z" id="path5058" style="fill:#f1511b;fill-opacity:1;fill-rule:nonzero;stroke:none"></path>
  <path d="m 220.65375,104.8675 -104.86625,0 0,-104.8675 104.86625,0 0,104.8675 z" id="path5060" style="fill:#80cc28;fill-opacity:1;fill-rule:nonzero;stroke:none"></path>
  <path d="m 104.865,220.695 -104.865,0 0,-104.8675 104.865,0 0,104.8675 z" id="path5062" style="fill:#00adef;fill-opacity:1;fill-rule:nonzero;stroke:none"></path>
  <path d="m 220.65375,220.695 -104.86625,0 0,-104.8675 104.86625,0 0,104.8675 z" id="path5064" style="fill:#fbbc09;fill-opacity:1;fill-rule:nonzero;stroke:none"></path>
</svg>
            </div>
            <div class="ww">
                <li><a href="#">支持与帮助</a></li>
            </div>
        </div>
    </div>
    <div class="header3">
        <div class="ee">
            <div class="er">
                <li><a href="#">微软官方商城</a></li>
        </div>
    </div>
    <div class="header4">
        <hr>
        <div class="wo"></div>
    </div>
    <div class="header5">
        <div class="baitu">
        </div>
    </div>
    <div class="header6">
        <div class="shangshang">
            <div class="bb">
                <div class="sd">
                    <ul>
                        <h3>产品类别</h3>
                        <p><a href="">Surface Go</a></p>
                        <p><a href="">Surface Pro(第五代)</a></p>
                        <p><a href="">Surface Laptop 2</a></p>
                        <p><a href="">Surface Book 2</a></p>
                        <p><a href="">认证翻新Surface</a></p>
                        <p><a href="">Xbox+游戏</a></p>
                        <p><a href="">Office</a></p>
                        <p><a href="">Windows</a></p>
                        </ul>
                </div>
            </div>
            <div class="aa"></div>
        </div>
    </div>
    <div class="Surface"></div>
    <div class="Office"></div>
    <div class="Xbox"></div>
    <div class="diannao"></div>
    <div class="kongdi"></div>
    <div class="mv"></div>
    <div class="cao"></div>
</div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 218,607评论 6赞 507
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,239评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,960评论 0赞 355
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,750评论 1赞 294
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,764评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,604评论 1赞 305
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,347评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,253评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,702评论 1赞 315
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,893评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,015评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,734评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,352评论 3赞 330
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,934评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,052评论 1赞 270
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,216评论 3赞 371
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,969评论 2赞 355

推荐阅读更多精彩内容