dedecms织梦建站总结

说好要每月坚持写博客的，差一点就背弃自己的诺言了。

这一个月，除了修改magento站点和学习android外，一心都投在了为一家建筑公司做网站上去了，使用的是dedecms，我主要做的是前端开发，着实体验了一把开源的力量---拿来用就是了(注：我所说的开源，就是指别人的代码^_^)。

废话不多说，先上成果

页面中很少使用图片做背景，比如说搜索框，因为我觉得那样好low的感觉。

其中折叠菜单如下所示

折叠使用纯CSS3制作，主要代码如下

  <div class="wrapper"><!--class="menu"-->
         <ul class="navigation">
             <li class="menu-item"><a class="top" href='{dede:global.cfg_basehost/}'>网站首页</a></li>
             {dede:channelartlist typeid='top'}
             <li class="menu-item"><a class="top" href="{dede:field name='typeurl'/}">{dede:field name='typename'/}</a>
                 <ul>
                     {dede:channel type='son' noself="yes" }
                     <li class="dropdown"><a class="son" href='[field:typeurl/]'>[field:typename/]</a></li>
                     {/dede:channel}
                 </ul>
             </li>
             {/dede:channelartlist}
         </ul>
     </div>

Html Code

 @import url(http://fonts.googleapis.com/css?family=Titillium+Web:600);
 * {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }

 body {
   background: #333333;
 }

 .wrapper {
   width: 90%;
   margin: 0 auto;
   padding-top: 20px;
 }

 .navigation {
   width: 100%;
   text-align: center;
   font: normal 1em/1.5em "Titillium Web", helvetica;
 }

 .navigation li {
   float: left;
 }

 .menu-item {
   width: 33.333%;
   position: relative;
   overflow: hidden;
   color: #ffffff;
 }
 .menu-item ul {
   position: absolute;
   left: 9999px;
   opacity:;
   transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
 }

 a.menu-link {
   display: block;
   padding: 15px;
   margin-bottom: 6px;
 }

 a.first {
   background: #c0392b;
 }
 a.second {
   background: #c8462b;
 }
 a.third {
   background: #d3592b;
 }

 a.second {
   background: #C8462B;
 }

 .dropdown {
   width: 100%;
   padding: 20px;
 }
 .dropdown a, .dropdown a:hover, .dropdown a:visited, .dropdown a:focus {
   text-decoration: none;
   color: #222222;
 }
 .dropdown:first-child {
   border-top: 1px solid rgba(0, 0, 0, 0.3);
 }
 .dropdown:nth-child(even) {
   background: #eeeeee;
   transform: perspective(1000px) rotateX(-20deg);
   transform-origin: top;
   -webkit-transform: perspective(1000px) rotateX(-20deg);
   -webkit-transform-origin: top;
 }
 .dropdown:nth-child(odd) {
   background: #f5f5f5;
   transform: perspective(1000px) rotateX(20deg);
   transform-origin: bottom;
   -webkit-transform: perspective(1000px) rotateX(20deg);
   -webkit-transform-origin: bottom;
   margin-top: -11px;
 }

 .menu-item:hover ul, .menu-item:focus ul {
   position: static;
   bottom: 200px;
   opacity:;
 }

 @media only screen and (max-width: 37.5em) {
   .navigation li {
     float: none;
     clear: both;
   }

   .menu-item {
     width: 100%;
   }
 }

CSS Code

焦点文字slider如下所示，（没录好，滚的有点快）

焦点文字主要js，使用JQuery，需要引入jquery-1.7.2.min.js和common.js

 /**
 * @author Alexander Farkas
 * v. 1.22
 */
 (function ($)
 {
     if (!document.defaultView || !document.defaultView.getComputedStyle)
     { // IE6-IE8
         var oldCurCSS = $.curCSS;
         $.curCSS = function (elem, name, force)
         {
             if (name === 'background-position')
             {
                 name = 'backgroundPosition';
             }
             if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[name])
             {
                 return oldCurCSS.apply(this, arguments);
             }
             var style = elem.style;
             if (!force && style && style[name])
             {
                 return style[name];
             }
             return oldCurCSS(elem, 'backgroundPositionX', force) + ' ' + oldCurCSS(elem, 'backgroundPositionY', force);
         };
     }

     var oldAnim = $.fn.animate;
     $.fn.animate = function (prop)
     {
         if ('background-position' in prop)
         {
             prop.backgroundPosition = prop['background-position'];
             delete prop['background-position'];
         }
         if ('backgroundPosition' in prop)
         {
             prop.backgroundPosition = '(' + prop.backgroundPosition;
         }
         return oldAnim.apply(this, arguments);
     };

     function toArray(strg)
     {
         strg = strg.replace(/left|top/g, '0px');
         strg = strg.replace(/right|bottom/g, '100%');
         strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2");
         var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
         return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[3]];
     }

     $.fx.step.backgroundPosition = function (fx)
     {
         if (!fx.bgPosReady)
         {
             var start = $.curCSS(fx.elem, 'backgroundPosition');
             if (!start)
             {//FF2 no inline-style fallback
                 start = '0px 0px';
             }

             start = toArray(start);
             fx.start = [start[0], start[2]];
             var end = toArray(fx.end);
             fx.end = [end[0], end[2]];

             fx.unit = [end[1], end[3]];
             fx.bgPosReady = true;
         }
         //return;
         var nowPosX = [];
         nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
         nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
         fx.elem.style.backgroundPosition = nowPosX[0] + ' ' + nowPosX[1];

     };
 })(jQuery);

 ;(function( $, window, document, undefined ){

   // utility function that generates the "dots" navigation
   function generateNavigation($el, count, config) {
     var i, html = "",
         width = count * 32;

     html += "<ol class='" + config.navigationClass + "' style='margin-left: -" + width/2 + "px; width: " + width + "px'>";
     for (i = 0; i < count; i++) {
       html += "<li><a " + (i === 0 ? "class='selected'" : "" ) + " href='#" + (i) + "'>slide</a></li>";
     }
     html += "</ol>";

     $el.append(html);
   }

   function sweepOut($el, windowWidth) {
     var dfr = $.Deferred(),
         pos = $el.position(),
         width = $el.width(),
         delta, final,
         options = $el.data("tlrkAnimOptions");

     windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it

     delta = windowWidth - pos.left;
     final = -(delta);

     setTimeout(function(){
       $el.animate({left: final, opacity: "toggle"}, options.speed, options.easing, function(){
         dfr.resolve();
       });
     }, options.delay);

     return dfr.promise();
   }

   function sweepIn($el, windowWidth, frameLeft) {
     var dfr = $.Deferred(),
         options = $el.data("tlrkAnimOptions"),
         positionData = $el.data("tlrkOriginalPos"),
         final = positionData.position.left,
         rightEdge;

     windowWidth = windowWidth || $(window).width(); // check if the windowWidth is passed, if not - get it

     $el.css({opacity: 0, display: "block"}); // move it outside the right edge of the screen
     $el.css("left", function(current){
       return current + windowWidth - frameLeft;
     });

     setTimeout(function(){
       $el.animate({left: final, opacity: 1}, options.speed, options.easing, function(){
         dfr.resolve();
       });
     }, options.delay);

     return dfr.promise();
   }

   // two pass function that first iterates all the elements and gets their position/width/height
   // and then sets their position to absolute
   function absolutize($elements) {

     // todo - move it to separate function and do it just once
     // gather the original position/dimension data for all elements
     $elements.each(function(){
       var $t = $(this);

       if ($t.data("tlrkOriginalPos")) return

       $t.data("tlrkOriginalPos", {
         position: $t.position(),
         width: $t.width(),
         height: $t.height(),
         css_pos: $t.css("position"),
         css_left: $t.css("left"),
         css_top: $t.css("top"),
         css_width: $t.css("width") || "auto",
         css_height: $t.css("height") || "auto"
       });

     });

     // set the absolute position
     $elements.each(function(){
       var $t = $(this),
           opos = $t.data("tlrkOriginalPos");

       $t.css({
         position: "absolute",
         left: opos.position.left,

         width: opos.width,
         height: opos.height
       });
     });
   }

   function restoreFrameElements($elements) {
     $elements.each(function(){
       var $t = $(this),
           opos = $t.data("tlrkOriginalPos");

       if (!opos) return

       $t.css({
         position: opos.css_pos,
         left: opos.css_left,
         top: opos.css_top,
         width: opos.css_width,
         height: opos.css_height
       });
     });

   }

   var TlrkSlider = function( elem, options ){
       this.elem = elem;
       this.$elem = $(elem);
       this.options = options;
     };

   // the plugin prototype
   TlrkSlider.prototype = {
     defaults: {

       defaultElementOptions: {
         speed: 1200,
         easing: "easeInOutBack",
         // interval before the element starts moving when the fadeIn/Out functions are called
         // it's a good idea to give different delays for the different elements
         // if all have the same delay they'll start moving all together
         delay: 100
       },

       // dispose elements are these that are not included in the elements object
       // but affect the document flow and will be fadedIn/Out
       disposeDelay: 100, // delay for the dispose elements
       disposeSpeed: 1000, // how quickly they'll fadeOut/In

       delayBetweenTransition: 1000, // time between starting fadeOut and fadeIn
       delayAnimation: 7000, // time between auto changing the current frame

       loop: true, // if true when clicking next on the last frame the slider jumps to the first one

       autoStart: true, // start the automatic looping through the frames on init

       framesSelector: "section", // selector for the frames inside the slider

       elements: {
         "p": {delay: 100, speed: 1000, easing: "easeInOutBack"}
       },

       navigation: true, // the dots navigation on the bottom
       navigationClass: "slider-nav",

       // callbacks
       // another way to "catch" these events is with
       // $(-slider-element-).bind("animationStart")
       animationStart: null,
       animationEnd: null
     },

     init: function() {
       var c, e, element, $element,
           that = this,
           $firstFrame;

       c = this.config = $.extend({}, this.defaults, this.options);

       this.elem.style.position = "relative"; // make the wrapping element relative

       // basics
       this.$frames = this.$elem.find(c.framesSelector);
       this.framesCount = this.$frames.length;
       this.currentFrame = 0;
       this.queue = [];

       this._$elementsByFrame = {};
       this._$disposeElementsByFrame = {};

       for (i = 0; i < this.framesCount; i++) {
         this._$elementsByFrame[i] = this._getFrameElements(i); // cache the $elements by frame
         this._$disposeElementsByFrame[i] = this._getDisposeFrameElements(i); // cache the rest of the tree for each frame
       }

       if (c.navigation) {
         generateNavigation(this.$elem, this.framesCount, c);
         this.$navigation = this.$elem.find("."+c.navigationClass);
       }

       // bindings
       this.$elem.find(".slider-nav").delegate("a", "click", function(e){
         var frame = this.getAttribute("href").split("#")[1];
         that.go.call(that, frame);
         return false;
       });

       this.$elem // internal bindings for the callbacks
         .bind("animationStart", function(){
           if ($.isFunction(c.animationStart)) {c.animationStart.apply(that, arguments);}
         })
         .bind("animationEnd", function(){
           if ($.isFunction(c.animationEnd)) {c.animationEnd.apply(that, arguments);}
         })
       ;

       // start animation?
       if (c.autoStart) {
         this.start();
       } else {
         this.running = false;
       }

       return this;
     },

     start: function(instant) {
       var that = this;

       if (this.timer) { // we'll clear the current timer
         window.clearTimeout(this.timer);
       }

       this.running = true;

       if (instant) {
         that.nextFrame();
       } else {
         this.timer = window.setTimeout(function(){ that.nextFrame.call(that) }, that.config.delayAnimation);
       }
     },

     stop: function() {
       if (!this.running) return; // we are not running

       this.running = false;
       window.clearTimeout(this.timer);
     },

     // main function for changing frames
     selectFrame: function(frame, dfr) {
       var c = this.config, // shorthand for the config
           that = this,
           dfr = dfr || $.Deferred(),
           dFadeIn = $.Deferred(),
           dFadeOut = $.Deferred();

       if (isNaN(frame) || frame < 0 || frame > this.framesCount || frame === this.currentFrame) {
         dfr.reject();
         return dfr.promise();
       }

       // clear the animation loop interval if the animation is running
       if (this.running && this.timer) {
         window.clearTimeout(this.timer);
       }

       // check if we are currenly running an animation.
       if (this.animated && this.queue.length > 0) {
         // wait for the last item in the queue to finish
         this.queue[this.queue.length-1].done(function(){
           that.selectFrame(frame, dfr); // and call again the selectFrame
         })
         return dfr.promise();
       }

       this.animated = true;
       this.$elem.trigger("animationStart", [this, frame]);

       this.queue.push(dfr);

       // fade the frames
       dFadeOut = this._fadeOutFrame(this.currentFrame);

       // hide the fadetout frame
       dFadeOut.done(function(){
         that.$frames.eq(that.currentFrame).hide();
       });

       window.setTimeout(function(){ // then wait delayBetweenTransition and fadeIn the new frame
         dFadeIn = that._fadeInFrame.call(that, frame).done(function(){
           // when both the fadeIn and fadeOut are done we'll resolve the selectFrame promise
           $.when(dFadeOut, dFadeIn).done(function(){
             that.animated = false;
             that.queue.shift();
             that.$elem.trigger("animationEnd", [that]);
             that.currentFrame = frame;
             dfr.resolve();
           });
         });
       }, c.delayBetweenTransition);

       // navigation html change
       if (this.config.navigation) {
         this.$navigation.find(".selected").removeClass("selected").end()
           .find("a").eq(frame).addClass("selected");
       }

       dfr.done(function(){ // we'll resume the loop animation after the transitions are done
         if (that.running) {
           that.start();
         }
       });

       return dfr.promise();
     },

     _fadeFrame: function(frame, callback, direction) {
       var dfr = $.Deferred(),
           $frame = this.$frames.eq(frame),
           $elements = this._$elementsByFrame[frame],
           windowWidth = $(window).width(), // cache it before the animations, so we don't have to check it for each element
           i, len,
           that = this,
           elementAnimations = [],
           $disposeElements = this._$disposeElementsByFrame[frame],
           $affectedElements,
           frameLeft = $frame.offset().left;

       direction = direction || "out";

       if (!$.isFunction(callback)) return; // do nothing if there's no callback passed

       $affectedElements = $elements.add($disposeElements);

       // position absolute the animation and dispose elements
       absolutize($affectedElements);

       // toggle the dispose elements
       if ($disposeElements.length > 0) {
         window.setTimeout(function(){
           $disposeElements[direction === "out" ? "fadeOut" : "fadeIn"](that.config.disposeSpeed);
         }, this.config.disposeDelay);
       }

       // invoke the callback for each element
       // the callback must return a promise
       $elements.each(function(){
         elementAnimations.push( callback.call(that, $(this), windowWidth, frameLeft) );
       });

       // wait for all the elements to finish their animation
       $.when.apply(this, elementAnimations).done(function(){
         //restoreFrameElements($affectedElements); // and restore the elements' position
         dfr.resolve(); // resolve the fade function
       });

       return dfr.promise();
     },

     _fadeOutFrame: function(frame) {
       var dfr = $.Deferred(),
           $frame = this.$frames.eq(frame),
           $disposeElements = this._$disposeElementsByFrame[frame];

       this._fadeFrame(frame, this._animationOut, "out").done(function(){
         dfr.resolve();
       })

       return dfr.promise();
     },

     _fadeInFrame: function(frame) {
       var dfr = $.Deferred(),
           $frame = this.$frames.eq(frame),
           $elements = this._$elementsByFrame[frame];

       this._restoreFrame(frame);

       $frame.show();

       this._fadeFrame(frame, this._animationIn, "in").done(function(){
         dfr.resolve();
       });

       return dfr.promise();
     },

     _restoreFrame: function(frame){
       if (!frame) return
       restoreFrameElements( this._$elementsByFrame[frame].add(this._$disposeElementsByFrame[frame]) );
     },

     nextFrame: function() {
       var frame = this.currentFrame+1,
           dfr = $.Deferred();

       if (frame > this.framesCount-1) {
         if (this.config.loop) {
           frame = 0;
         } else {
           dfr.reject();
         }
       };

       this.selectFrame(frame).done(function(){
         dfr.resolve();
       });

       return dfr.promise();
     },

     prevFrame: function() {
       var frame = this.currentFrame-1,
           dfr = $.Deferred();

       if (frame < 0) {
         if (this.config.loop) {
           frame = this.framesCount-1;
         } else {
           dfr.reject();
           return dfr.promise();
         }
       }

       this.selectFrame(frame).done(function(){
         dfr.resolve();
       });

       return dfr.promise();
     },

     go: function(str) { // shorthand
       switch (str) {
         case "next":
         case "+1":
           this.nextFrame();
           break;

         case "prev":
         case "-1":
           this.prevFrame();
           break;

         case "first":
           this.selectFrame(0);
           break;

         case "last":
           this.selectFrame(this.framesCount-1);
           break;

         default:
           if (isNaN(str)) return;
           this.selectFrame(Number(str));
       }
     },

     // returns jquery collection of animation elements
     _getFrameElements: function(frame) {
       var $frame = this.$frames.eq(frame),
           elements = this.config.elements,
           e, elementOptions,
           $found, $frameElements = $([]);

       for (e in elements) {
         elementOptions = elements[e];
         $found = $frame.find(e);
         $found.addClass("t-frame-element").data("tlrkAnimOptions", $.extend({}, this.defaults.defaultElementOptions, elementOptions ));
         $frameElements = $frameElements.add($found);
       }

       return $frameElements;
     },

     // returns jquery collection of elements that have to be faded out
     // i.e. elements on the same level as the animation elements
     // that doesn't contain other animation elements
     _getDisposeFrameElements: function(frame) {
       var $disposeElements = $([]),
           $frame = this.$frames.eq(frame),
           $elements = this._$elementsByFrame[frame];

       $elements.each(function(){
         var $t = $(this),
             $siblings = $t.siblings().not(".t-frame-element");

         $siblings.each(function(){
           var $t = $(this);
           // check if the node is not already marked and doesn't contains other frame elements
           if (!$t.hasClass("t-frame-dispose") && $t.find(".t-frame-element").length === 0) {
             $t.addClass("t-frame-dispose");
             $disposeElements = $disposeElements.add($t);
           }
         });

       });
       return $disposeElements;
     },

     // expose the internal animationIn/Out functions that are called for each element in the frame
     // two arguments are passed - the $element which have to be animated and the window width
     _animationIn: sweepIn,
     _animationOut: sweepOut

   }

   TlrkSlider.defaults = TlrkSlider.prototype.defaults;

   $.fn.tlrkSlider = function(options) {
     var otherArgs = Array.prototype.slice.call(arguments, 1);

     return this.each(function() {
       var $el = $(this),
           pluginData = $el.data("tlrkSlider");

       if (!pluginData) { // check if the slider is already attached
         pluginData = new TlrkSlider(this, options).init();
         $el.data("tlrkSlider", pluginData);
         return;
       }

       //change the options or call a method
       if (typeof options === "string") {

         // setting / getting option(s)
         if (options === "option") {

           if (typeof otherArgs[0] === "string" && typeof otherArgs[1] !== "undefined") { // set an option value
             pluginData.config[otherArgs[0]] = otherArgs[1];
           }

           if (typeof otherArgs[0] === "object") { // extend the config with new options
             pluginData.config = $.extend(pluginData.config, otherArgs[0]);
           }

         } else { // call a method?
           try {
             pluginData[options].apply(pluginData, otherArgs);
           } catch(ex) {
             throw "Error calling a plugin method (" + ex + ")";
           }
         }
       }
     });
   };

   window.TlrkSlider = TlrkSlider;

 })( jQuery, window , document );

 $(document).ready(function(){
   var $backgrounds = $(".header-content").find(".parallax-bg"),
       LAYER_OFFSET = 30,
       PRLX_SPEED = 1500,
       $slider;

   $slider = $("#slider").tlrkSlider({
     autoStart: true,
     animationStart: function(ev, slider, step){
       var max_steps = this.framesCount;
       $backgrounds.each(function(idx, el){
         var pos = (step * (100 / max_steps)) + (LAYER_OFFSET * idx);
         $(this).animate({"backgroundPosition": pos + "% 0"}, PRLX_SPEED);
       });
     },
     elements: {
       "img": {delay: 10},
       "h2": {delay: 500},
       ".copy": {delay: 800},
       ".button": {delay: 1000}
     }
   });

   $(".header-content")
     .hover(
       function(){$(this).find(".slider-prev, .slider-next").show();},
       function(){$(this).find(".slider-prev, .slider-next").hide();}
     )
     .find(".slider-prev").click(function(){$slider.tlrkSlider("go", "prev"); return false; }).end()
     .find(".slider-next").click(function(){$slider.tlrkSlider("go", "next"); return false; });

 });

JS Code

Flash效果如下

Flash很简单，主要使用SWFObject

<div id="index_bt_gg">
            <div id="index_bt_gg_ct"></div>
            <script type="text/javascript">
                var width = '300';
                var height = '220';
               var s6 = new SWFObject("{dede:global.cfg_templets_skin/}/etc/focus.swf", "mymovie1", width, height, "4", "#ffffff");
               s6.addParam("wmode","transparent");
               var pics = "";
               var links = "";
               var texts = "";
               {dede:arclist row=4 typeid="6" orderby=pubdate flag='p'}
                    var uri = "[field:litpic/]"
                    uri = uri.replace("-lp","");
                    pics+= uri+"|";
                    links+="[field:arcurl/]|";
                    texts+="[field:title/]|";
               {/dede:arclist}
               pics=pics.substring(0,pics.length-1);
               //alert(pics);
               links=links.substring(0,links.length-1);
               texts=texts.substring(0,texts.length-1);
               s6.addVariable("pics",pics);
                s6.addVariable("links",links);
               s6.addVariable("texts",texts);
               s6.addVariable("width",width);
               s6.addVariable("height",height);
               s6.addVariable("borderwidth",width);
               s6.addVariable("borderheight",height);
               s6.write("index_bt_gg_ct");
            </script>
        </div>

HTML+JavaScript Code

这里有个问题，因为通过dede:arclist获取到的图片，都是被压缩的缩略图，dedecms的缩略图的文件名都是在原文件名后面加-lp的，所以拿到url之后，需要将-lp去掉。比如获取到的url是"zm/uploads/allimg/141130/1610442494-0-lp.JPG"，需要修改为"zm/uploads/allimg/141130/1610442494-0.JPG"。

滚动文字如下

<div id="demo" style="overflow:hidden;height:230px;">
                    <div id="demo1">
                        {dede:sql sql='Select content from dede_arctype where id=15'}
                            [field:content function="@me"/]
                        {/dede:sql}
                    </div>
                    <div id="demo2"></div>
                </div>

Html Code

 var speed = 40;
                     var demo = document.getElementById("demo");
                     var demo2 = document.getElementById("demo2");
                     var demo1 = document.getElementById("demo1");

                     demo2.innerHTML = demo1.innerHTML;
                     function Marquee() {//demo2.offsetTop = 1179
                         if (demo2.offsetTop <= demo.scrollTop + 500) {
                             demo.scrollTop -= demo1.offsetHeight;//demo1.offsetHeight = 462
                         }
                         else {//demo.scrollTop 最大 694
                             demo.scrollTop++;
                         }
                     }
                     var MyMar = setInterval(Marquee, speed);
                     demo.onmouseover = function() {
                         clearInterval(MyMar);
                     }
                     demo.onmouseout = function() {
                         MyMar = setInterval(Marquee, speed);
                     }

JavaScript Code

这里需要注意，JavaScript中用到的值需要根据div在页面中的位置计算，这点没做好

当点击办公平台或企业邮箱时会有提示，一秒钟后消失

这中效果主要使用了prompt插件。

然后在页面调用

 function popMsg(str){
             var def = {
                 content:str,
                 width : 220,                                    //弹出层的宽度
                 time:1000
             }
             $.Prompt(def);
             $.Prompt();
         }

JAVA Code

自定义select样式

 #slinks{
 margin:;
 padding:;
 outline: none;
 height: 25px;
 line-height: 25px;
 width: 100%;
 border: rgb(191, 204, 220) 1px solid;
 border-radius: 3px;
 display: inline-block;
 background-size: 5px 5px,5px 5px,25px 25px,1px 25px;
 background-color: #fff;
 background-image: repeating-linear-gradient(225deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
 repeating-linear-gradient(135deg,rgb(105,123,149) 0%,rgb(105,123,149) 50%,transparent 50%,transparent 100%),
 linear-gradient( #FFFFFF 0%,#F8F9Fd, #EFFAFA 100%),
 repeating-linear-gradient( rgb(191, 204, 220) 0%,rgb(191, 204, 220) 100%);
 background-repeat: no-repeat;
 background-position: 212px 10px,217px 10px,right top,205px top;
 -webkit-appearance: none;
 }

Css Code

以上贴的代码只是很小且不完整的部分。能把这个网站做出来，很大程度上得益于我平时整理的前端代码库和手册库

文件比较大现在不便上传。需要的筒子可以联系我或者给我留言