TOP.ZHG示范脚本

admin

TOP.ZHG


DIV:
<div class="top">
<div class="wrap">
<div class="logo">$show_logo$</div>
<div class="nav">
<div class="favi">$show_addfavorite$ | $show_sethomepage$ | $show_gb2big5$</div>
<div class="phone">$func_contact(show=hotline)$</div>
</div>
</div>
</div>

CSS:
.top{ background: url(head.jpg) no-repeat center -20px; padding: 20px 0; height: 100px;}
.wrap{ width: 1200px; margin: 0 auto;}
.logo,.nav{ float: left; width: 50%; height: 100%;}
.logo{ line-height: 100px; font-size: 40px;}
.logo img{ max-width: 100%; max-height: 100%;}
.favi{ height: 30px; line-height: 30%; text-align: right;}
.phone{ height: 70px; line-height: 70px; text-align: right;}
.phone *{ font-size: 30px;}
设为首页 收藏本站的JS
function AddFavorite(sURL, sTitle)
{
    try
    {
                if( typeof(sURL) =="undefined" || sURL.length==0) { sURL=window.location; }
                if( typeof(sTitle) =="undefined" || sTitle.length==0) { sTitle=document.title; }
        window.external.addFavorite(sURL, sTitle);
    }
    catch (e)
    {
        try
        {
            window.sidebar.addPanel(sTitle, sURL, "");
        }
        catch (e)
        {
            alert("您使用的浏览器不支持此功能，请按“Ctrl + D”键手工加入收藏!");
        }
    }
}

function setHome(objid,urls) {
        var a = objid, b = urls, c = "unknown";
        try {
            if( typeof(b) =="undefined" || b.length==0) { b=location.href; }               
                a.style.behavior = "url(#default#homepage)";
                var d = a.isHomePage(b);
                d = (d = d || a.isHomePage(b + "/")) || a.isHomePage(b + "/#");
                d = "" + d;
           if (d != "true"){
                        a.setHomePage(b);
           }else{
                        alert("您已经设为首页了!");
           }
        } catch (e) {
                alert("您的浏览器不支持自动设置主页，请使用浏览器菜单手动设置!");
                return "unknown"
        }
};

$(function(){
        $(".sethome,.favorite").click(function(){  
                if($(this).hasClass("sethome")){
                        setHome($(this)[0],'');
                }else{
                        AddFavorite("", "");
                }
        });
});

admin

DIV：
<div class="container">
<div class="row p-t-b-20">
<div class="logo col-lg-5 col-xs-8">$show_logo$</div>
<div class="contact col-lg-7 d-lg-block d-none text-right">$func_contact(show=hotline|mail)$</div>
</div>
</div>
<div class="bg-black">
<div class="penthouse"></div>
<div class="container">
<div class="menu col-lg-12">$func_menu(pos=0,divi=none,sub=0)$</div>
<button class="navbar-toggler" type="button"><span class="fa fa-reorder icon-x"></span></button>
</div>
</div>
<div class="banner">
<div class="z">
<div class="slogon">$func_submenu(para=Slogon,divi=none,sub=0,img=1,memo=1,show=img|title|memo|content)$</div>
</div>
$show_banner$</div>

CCS：
.p-t-b-20{padding-top:20px; padding-bottom:20px;}
.z{ position: absolute; z-index: 1500; width: 100%; height: 100%; display: table-cell; text-align:center;}
.slogon{ display: inline-block; margin-top:60px; background:rgba(0,0,0,.2); padding: 50px; border-radius: 10px;}
.slogon .RowsTitle .Title{ font-size: 20px; color: #fff; line-height: 68px;}
.slogon .Descript{ line-height: 40px; font-weight: bold; font-size: 36px; color: #fff;}
.slogon ul{display: flex; flex-flow: row nowrap; justify-content: center; padding-top: 30px;}
.slogon ul li{ margin: 20px;}
.slogon ul li a{ display: block; white-space: nowrap; padding:15px 30px; background:#363636; color: #fff; font-size: 16px;}
.slogon ul li:first-child a{ background: #FB0B28;}
.slogon ul li a:hover{ background: #161616;}
.logo{ line-height: 100%; max-height: 80px; font-size:36px;}
.logo img{ height: 50px;}
.bg-black{ background:#111; color: #fff;}.bg-grey{ background: #BEBEBE;}
.bg-black ul{ display: flex; flex-flow: row nowrap; justify-content: center;}
.bg-black ul li{ display: inline; position: relative; color:#fff;}
.bg-black ul li.active{ background:url(hover.png) no-repeat center;}
.bg-black ul li a{display:block; width:142px; text-align: center; line-height: 60px; color:inherit; white-space: nowrap;}
.bg-black ul li a b{display:inline-block; margin-left:8px; border-top: 5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent;}
.bg-black ul li ul{display: none; background: #05417f; position: absolute; top:60px; z-index:2000; padding:0px 5px 15px 5px;}
.bg-black ul li ul li{ display: inline; color: #fff;}
.bg-black ul li ul li a{ display: block; line-height: 40px; border-bottom:1px solid #054688;}
.bg-black ul li ul li:last-child a{ border-bottom: 0;}
.bg-black ul li ul li a:hover{ background: #04376C;}
.bg-black ul li:hover ul{ display: block;}
.contact{ align-content: center;}
.contact .Content,.contact .Margin{ height: 100%; align-items: center;}
.contact .hotline,.contact .mail{ display:flex; flex: 1; align-items: center;}
.contact *{ font-size: 16px;}
.contact .dt{color:#c00;}
.contact .dd{ white-space: nowrap; text-align: left;}
.icon-reorder{ color: #fff;}
.link a{ padding: 0 10px; }
.menu{display:flex; flex-flow: row nowrap; justify-content: space-between;}
.navbar-toggler{display: none;}
.penthouse{ display: flex; height: 39px; background:url(eave.png) repeat-x #fff;}
@media (max-width: 992px) {
    .banner{ height:500px;}
    .navbar-toggler{ display:block; position: fixed; z-index: 2000; top:15px; right: 20px; background: #FB0B28; color: #fff; border-radius: 5px; margin: 6px; width: 50px; height: 50px;}
    .menu{display:none; position: fixed; top: 68px; left: 0; z-index: 3000; background:#FB0B28;}
    .menu ul{ flex-flow:column wrap; padding: 10px;}
    .menu ul li{ background: rgba(255,255,255, .5); margin: 2px 0;}
    .menu ul li a{display:block; line-height: 36px;}
    .menu ul li a b{ border-left: 5px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;}
    .menu ul li:hover{background: #FB0B28;}
    .menu ul li ul{left:110px; top:0; padding-top:5px; padding-bottom:5px; border:1px solid #FB0B28;}
    .menu ul li ul li a{white-space:pre-wrap; line-height: 1.5em; padding:10px;}
    .slogon{ zoom: 80%;}
}
@media (max-width: 768px)  {
    .banner{height:400px}
}
@media (max-width: 576px)  {
    .banner{height:300px;}
    .slogon{ zoom: 50%;}
}

JS:
$(function(){
    $(".contact .Margin").addClass("row");
    $(".contact .hotline .dt").prepend("<i class='fa fa-volume-control-phone mr-2'></i>");
    $(".contact .mail .dt").prepend("<i class='fa fa-envelope-o mr-2'></i>");
    if($(window).width()<1200){
        $(".navbar-toggler").click
        (function(){slidermenu()});
    }
    $(".contact .hotline .dd").html("0551-66191999 65533585<br>13866770512 16655051122");
})
var slidermenu =function(){
    $(".menu").slideToggle("slow");
}

admin

DIV:
<div class="container py-3">
  <div class="row align-items-center">
    <div class="col-12 col-md-6 col-lg-5">$show_logo$</div>
    <div class="col-lg-3 d-none d-lg-block slogan">$func_summary(para=slogan,memo=1,title=0,content=0)$</div>
    <div class="col-md-6 col-lg-4 d-none d-md-block phone thd">$func_contact(show=hotline)$</div>
  </div>
</div>
<div class="bg-fst li-hover-sec h-60">
  <div class="container menu h-100">$func_menu(pos=0,pos=0,divi=none)$</div>
</div>


SCSS:
$fst:#0082D0;
$sec:#DA1010;
$thd:#419B15;
$fth:#62B2E7;
$black:#000;
$dark:#666;
$gray:#aaa;
$grey:#eee;
$light:#f8f8f8;
$white:#fff;

a {
    color: $dark;
}

.slogan .Descript {
    line-height: 1.5em;
}

@each $title,
$color in (fst:$fst,
    sec:$sec,
    thd:$thd,
    fth:$fth) {
    .#{$title} {
        color: $color;
    }

    .bg-#{$title} {
        background-color: $color;

        a {
            color: $light;

            &:hover {
                color: $white;
            }
        }
    }

    .li-hover-#{$title} {
        li {
            &.on,&:hover {
                background-color: $color;
            }
        }
    }
}

admin

<div class="bg-light py-2 d-none d-lg-block">
    <div class="container">
        <div class="row justify-content-between">
            <div class="welcome">$show_welcome$</div>
            <div class="menu-row">$func_menu(pos=3,divi=≡)$</div>
        </div>
    </div>
</div>
<div class="container py-3">
    <div class="row justify-content-lg-between">
        <div class="logo col-auto mr-xs-5 mr-sm-0">$show_logo$</div>
        <div class="slogan col d-none d-sm-flex mr-sm-5">$func_summary(para=slogan,memo=1,title=0,content=0)$</div>
        <div class="search d-none d-lg-flex flex-column-reverse">$func_search(para=Search,table=1|2,btn=1,memo=1,title=0)$</div>
    </div>
</div>
<div class="bg-fst white">
    <div class="container menu higher d-none d-lg-block ul-fst-sec hover-white" id="navbar">$func_menu(pos=0,divi=none)$</div>
    <navbar-toggler class="fixed-top w-100 text-right mt-3" btn="bg-fst white m-3 mt-4 d-inline-block d-lg-none" tar="navbar" menu="bg-fst px-0 red hover-white ul-li-2" show="false"></navbar-toggler>
</div>

admin

<div class="container py-3">
    <div class="row justify-content-lg-between align-items-center">
        <div class="logo col-auto mr-xs-5 mr-sm-0">$func_logo(slogan=1)$</div>
        <div class="phone d-none d-lg-flex">$func_contact(show=hotline|wechat)$</div>
    </div>
</div>
<div class="bg-fst white">
    <div class="container menu d-none d-lg-block ul-fst-sec li-hover-sec hover-white" id="navbar">$func_menu(pos=0,sub=1,divi=none)$</div>
    <navbar-toggler class="fixed-top w-100 text-right mt-3" btn="bg-fst white m-3 mt-4 d-inline-block d-lg-none" tar="navbar" menu="bg-fst px-0 red hover-white ul-li-2" show="false"></navbar-toggler>
</div>

CSS：
.phone {
    .wechat {
        .dt {
            display: none;
        }

        .dd {
            display: block;

            img {
                height: 70px;

                &:first-child {
                    margin-right: 28px;
                }
            }
        }

        i {
            display: block;
            text-align: center;
            font-style: normal;
        }
    }
}