电商导航网站《大唐美筑》dtmz.com

  电商导航网站《大唐美筑》dtmz.com 矢量设计文件+全站代码分享


电商导航网站《大唐美筑》dtmz.com

电商导航网站《大唐美筑》dtmz.com

电商导航网站《大唐美筑》dtmz.com


制作软件:CorelDRAW X8 + Visual Studio Code

预览网站 下载链接:百度网盘 提取码:80f6


更新红色配色 style.css

html,body{
    padding:0;
    margin:0;
    width: 100%;
    height: 100%;
    background-color:#B21D23;
    background-image:url(../img/background.svg);
    overflow:hidden;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    user-select:none;
    }


/*Fonts*/
.STYLE    {color:#E7CF9F; font-size:12px; text-decoration:none;}
a         {color:#E7CF9F; font-size:12px; text-decoration:none; transition:all 0.5s linear;}
a:link    {color:#E7CF9F; font-size:12px; text-decoration:none;}
a:visited {color:#E7CF9F; font-size:12px; text-decoration:none;}
a:active  {color:#E7CF9F; font-size:12px; text-decoration:none;}
a:hover   {color:#012C9D; font-size:12px; text-decoration:none; transition:all 0.5s;}

/*Logo SVG*/
        .Logo1{fill:#012C9D;}
        .Logo2{fill:#E7CF9F;}

        .Logo3{fill:#FFFFFF; opacity:1; transition:all 0.5s linear;}
a:hover .Logo3{fill:#C01013; opacity:1; transition:all 0.5s;}

/*Button-C SVG*/
        .Button-C{width:67px; height:67px; transition:all 0.5s;}
a:hover .Button-C{
     transform: scale(1.1);
-webkit-filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5)); /*考虑浏览器兼容性:兼容 Chrome, Safari, Opera */
        filter: drop-shadow(5px 5px 5px rgba(0,0,0,.5));
    }
        .Button-C01{fill:#012C9D;                    opacity:1; transition:all 0.5s linear;}
a:hover .Button-C01{fill:#C01013;                    opacity:1; transition:all 0.5s;}
        .Button-C02{fill:#E7CF9F;                    opacity:1; transition:all 0.5s linear;}
a:hover .Button-C02{fill:#000000;                    opacity:1; transition:all 0.5s;}
        .Button-C03{fill:#FFFFFF;                    opacity:1; transition:all 0.5s linear;}
a:hover .Button-C03{fill:#FFFFFF;                    opacity:1; transition:all 0.5s;}
        .Button-C04{fill:#9C090E; fill-rule:nonzero; opacity:1; transition:all 0.5s linear;}
a:hover .Button-C04{fill:#E7CF9F; fill-rule:nonzero; opacity:1; transition:all 0.5s;}
        .Button-C05{fill:#9C090E;                    opacity:1; transition:all 0.5s linear;}
a:hover .Button-C05{fill:#E7CF9F;                    opacity:1; transition:all 0.5s;}

/*Button-L SVG*/
        .Button-L-A{fill:#E7CF9F; fill-rule:nonzero; opacity:1; transition:all 0.5s linear;}
a:hover .Button-L-A{fill:#E7CF9F; fill-rule:nonzero; opacity:0; transition:all 0.5s;}
        .Button-L-B{fill:#012C9D; fill-rule:nonzero; opacity:0; transition:all 0.5s linear;}
a:hover .Button-L-B{fill:#012C9D; fill-rule:nonzero; opacity:1; transition:all 0.5s;}

/*Button-R SVG*/
        .Button-R-A{fill:#E7CF9F; fill-rule:nonzero; opacity:1; transition:all 0.5s linear;}
a:hover .Button-R-A{fill:#E7CF9F; fill-rule:nonzero; opacity:0; transition:all 0.5s;}
        .Button-R-B{fill:#012C9D; fill-rule:nonzero; opacity:0; transition:all 0.5s linear;}
a:hover .Button-R-B{fill:#012C9D; fill-rule:nonzero; opacity:1; transition:all 0.5s;}


#Logo{
    position:absolute;
    overflow: hidden;
    background-color:;
    text-align:center;
    z-index:100;
    left:50%;
    top:50%;
    width:650px;
    height:400px;
    margin-left:-325px;
    margin-top:-250px;
    }

#taobao{
    position:absolute;

    background-color:#;
    text-align:center;
    z-index:101;
    left:50%;
    top:50%;
    width:67px;
    height:67px;
    margin-left:-119px;
    margin-top:163px;
    }

#tmall{
    position:absolute;
    background-color:#;
    text-align:center;
    z-index:101;
    left:50%;
    top:50%;
    width:67px;
    height:67px;
    margin-left:-34px;
    margin-top:163px;
    }

#jd{
    position:absolute;
    background-color:#;
    text-align:center;
    z-index:101;
    left:50%;
    top:50%;
    width:67px;
    height:67px;
    margin-left:52px;
    margin-top:163px;
    }

#show{
    position:absolute;
    background-color:#;
    text-align:center;
    z-index:101;
    left:50%;
    top:50%;
    width:324px;
    height:27px;
    margin-left:-282px;
    margin-top:247px;
    }

#sale{
    position:absolute;
    background-color:#;
    text-align:center;
    z-index:101;
    left:50%;
    top:50%;
    width:95px;
    height:27px;
    margin-left:67px;
    margin-top:247px;
    }

#all{
    position:absolute;
    background-color:#;
    text-align:center;
    z-index:101;
    left:50%;
    top:50%;
    width:95px;
    height:27px;
    margin-left:187px;
    margin-top:247px;
    }

#Button-L01{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top:-252.5px; overflow: hidden; z-index:98;}
#Button-L02{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top:-187.5px; overflow: hidden; z-index:98;}
#Button-L03{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top:-122.5px; overflow: hidden; z-index:98;}
#Button-L04{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top: -57.5px; overflow: hidden; z-index:98;}
#Button-L05{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top:   7.5px; overflow: hidden; z-index:98;}
#Button-L06{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top:  72.5px; overflow: hidden; z-index:98;}
#Button-L07{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top: 137.5px; overflow: hidden; z-index:98;}
#Button-L08{position:absolute; width:50px;  height:50px;  left:25px;   top:50%; margin-top: 202.5px; overflow: hidden; z-index:98;}
#Button-R01{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top:-252.5px; overflow: hidden; z-index:98;}
#Button-R02{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top:-187.5px; overflow: hidden; z-index:98;}
#Button-R03{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top:-122.5px; overflow: hidden; z-index:98;}
#Button-R04{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top: -57.5px; overflow: hidden; z-index:98;}
#Button-R05{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top:   7.5px; overflow: hidden; z-index:98;}
#Button-R06{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top:  72.5px; overflow: hidden; z-index:98;}
#Button-R07{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top: 137.5px; overflow: hidden; z-index:98;}
#Button-R08{position:absolute; width:50px;  height:50px;  right:25px;  top:50%; margin-top: 202.5px; overflow: hidden; z-index:98;}

#Rights{
    position:absolute;
    text-align:center;
    z-index:99;
    width:100%;
    height:25px;
    bottom:35px;
    }


更新红色配色 background.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X8 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="71px" height="67px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 4255 4007"
xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
   .fil0 {fill:#AB151A;fill-rule:nonzero}
  ]]>
  </style>
 </defs>
 <g id="CodeDogs.org">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <path class="fil0" d="M4255 439c-97,0 -185,39 -249,103 -63,63 -102,151 -102,248 0,27 3,53 8,78 -57,-53 -117,-104 -179,-153 17,-115 71,-218 149,-297 96,-96 228,-155 373,-155l0 176zm-4255 3568l528 0c-150,-105 -332,-169 -528,-175l0 175zm915 0l220 0c-50,-73 -106,-141 -168,-203 -249,-248 -590,-404 -967,-411l0 176c329,7 626,143 842,359 26,26 50,52 73,79zm528 0l197 0c-91,-191 -215,-365 -363,-513 -328,-328 -779,-533 -1277,-540l0 175c450,8 857,193 1153,489 114,114 212,246 290,389zm485 0l372 0c107,-264 266,-501 464,-700 382,-381 909,-617 1491,-617l0 -176c-631,0 -1202,256 -1615,669 -230,230 -411,509 -526,819 -116,-310 -297,-589 -526,-819 -408,-407 -968,-661 -1588,-669l0 176c571,7 1088,242 1463,617 199,199 358,436 465,700zm660 0l197 0c77,-143 175,-275 290,-389 302,-302 719,-489 1180,-489l0 -176c-509,0 -971,207 -1304,541 -149,148 -272,322 -363,513zm505 0l220 0c23,-27 47,-53 72,-79 223,-222 530,-360 870,-360l0 -175c-388,0 -739,157 -994,411 -62,62 -118,130 -168,203zm607 0l555 0 0 -175c-207,0 -398,65 -555,175zm555 -1844l0 -165c-116,-310 -297,-589 -526,-819 -414,-413 -985,-669 -1615,-669 -631,0 -1202,256 -1615,669 -212,213 -383,467 -499,750l0 234 27 1 0 -1c25,1 50,2 74,3 103,-330 284,-624 522,-862 382,-382 909,-618 1491,-618 582,0 1109,236 1490,618 239,238 420,532 523,862 24,-1 49,-2 74,-3l0 1 40 -1 2 0 4 0 8 0zm0 -2163l-555 0c-46,32 -89,68 -128,107 -100,100 -178,222 -227,357 53,28 105,58 156,89 38,-123 106,-233 195,-322 143,-143 341,-231 559,-231zm-942 0l-220 0c-62,90 -113,188 -152,292 56,18 111,38 165,60 49,-129 119,-248 207,-352zm-528 0l-197 0c-29,61 -55,124 -77,189 59,9 117,20 175,32 27,-76 61,-150 99,-221zm-485 0l-372 0c21,53 40,107 58,162 24,-1 49,-2 74,-2l-1 0 41 -1 2 0 4 0 8 0 8 0 4 0 1 0 41 1 0 0c25,0 50,1 74,2 17,-55 37,-109 58,-162zm-660 0l-197 0c38,71 71,145 99,221 58,-12 116,-23 175,-32 -22,-65 -48,-128 -77,-189zm-505 0l-220 0c87,104 158,223 207,352 54,-22 109,-42 165,-60 -39,-104 -91,-202 -152,-292zm-607 0l-528 0 0 0c208,7 395,94 532,231 89,89 157,199 195,322 51,-31 103,-61 155,-89 -48,-135 -126,-257 -226,-357 -39,-39 -82,-75 -128,-107zm-528 264l0 176c86,7 164,44 221,102 64,63 103,151 103,248 0,27 -3,53 -9,79 58,-54 118,-105 180,-154 -17,-115 -71,-218 -150,-297 -89,-90 -210,-147 -345,-154zm2114 861c-461,0 -878,187 -1180,489 -171,171 -305,379 -389,611 -58,-13 -116,-23 -175,-32 92,-268 244,-507 440,-703 333,-334 795,-540 1304,-540 509,0 970,206 1304,540 196,196 348,435 440,703 -59,9 -117,19 -175,32 -84,-232 -218,-440 -389,-611 -302,-302 -719,-489 -1180,-489zm0 439c-340,0 -647,138 -870,361 -121,121 -217,268 -279,431 -55,-22 -110,-42 -165,-61 71,-187 181,-355 320,-495 255,-254 606,-411 994,-411 388,0 739,157 994,411 139,140 249,308 320,495 -56,19 -111,39 -165,61 -62,-163 -158,-310 -280,-431 -222,-223 -530,-361 -869,-361zm0 440c-219,0 -416,88 -559,231 -89,89 -157,199 -195,322 -51,-31 -103,-61 -156,-89 49,-136 127,-257 227,-357 175,-175 416,-283 683,-283 267,0 508,108 683,283 100,100 178,221 227,357 -53,28 -105,58 -156,89 -38,-123 -106,-233 -195,-322 -143,-143 -341,-231 -559,-231zm0 439c-97,0 -185,39 -249,103 -63,63 -102,151 -102,248 0,27 2,53 8,78 -57,-53 -117,-104 -179,-153 17,-115 71,-219 149,-297 96,-96 228,-155 373,-155 145,0 277,59 373,155 78,78 132,182 149,297 -62,49 -122,100 -179,153 5,-25 8,-51 8,-78 0,-97 -39,-185 -103,-248 -63,-64 -151,-103 -248,-103z"/>
 </g>
</svg>