香港中外运网站备忘录

重置CSS:

*,:before,:after{box-sizing:border-box;}
/* 初始化标签在所有浏览器中的margin、padding值 */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, textarea, button {margin: 0;padding: 0;}
/* 重置页面文字属性-华为*/
html, body, div, p, h1, h2, h3, h4, h5, h6, select, input, li, legend {font-family: Microsoft YaHei, Arial, Helvetica,verdana, sans-serif !important;}
/*页面默认字体大小*/
body{font-size:16px;line-height:28px;overflow-x:hidden;}
/* 重置fieldset（表单分组）、图片的边框为0*/
fieldset, img {border: none}
/* 重置类表前导符号为onne,menu在HTML5中有效 */
dl, ul, ol, menu, li {list-style: none}
/* 重置嵌套引用的引号类型 */
blockquote, q {quotes: none}
/* 重置嵌套引用*/
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none}
/* 重置表单控件垂直居中*/
input, select, textarea, button {vertical-align: middle}
/* 重置表单button按钮效果 */
button {border: none;background-color: transparent;cursor: pointer}
/* 重置body 页面背景为白色 */
html, body {background: #fff;height: 100%;}
/* 重置链接a标签 */
a {color: #333;text-decoration: none;text-underline: none;display: inline-block;outline: none;}
/*a链接去下划线*/
a:active, a:hover, a:link, a:visited {text-decoration: none}
/* 重置样式标签的样式 */
address, caption, cite, code, dfn, em, var {font-style: normal;font-weight: normal}
/* 重置表格标题为隐藏 */
caption {display: none;}
/* 重置table属性 */
table {width: 100%;border-collapse: collapse;border-spacing: 0;table-layout: fixed;}
/* 图片在当前行内的垂直位置 */
img {vertical-align: middle;}
/*输入框*/
input {outline: 0;outline: none;}

Visual Studio给页面加链接：

<a asp-controller="Service" asp-action="Shipping" asp-route-lang="zh-CN">货运代理</a>

Visusl Studio文件选择路径：

../ 表示当前路径上一层，也就是当前文件夹的直接父亲。~/表示当前路径下的文件。

//多语言通过数据库调取实现

public async Task<IActionResult> Newslist()
{
   Dictionary<string, string> dsDTOs = await base.GetTextListBySID("30");
   ViewBag.dsDTOs = dsDTOs;
   return View();
}
@{ViewData["Title"] = "Info";
Dictionary<string, string> dsDTOs = ViewBag.dsDTOs;  }

//多语言用多个页面实现

public IActionResult Index()
{
   string url = "Index";
   switch (base._curLang)
      {
         case Lang.ZH_CN:
           url = "Index_cn";
           break;
         case Lang.ZH_HK:
           url = "Index_hk";
           break;
       }
       return View(url);
}

//多语言通过XML文件实现

public IActionResult Index()
{
    List<SingleLangVM> slVM = repoXML.LoadByCurrLang(_environment.WebRootPath, "Home", base._curLang);
    ViewBag.slvm = slVM;
    return View();
}

//注意大小写！！！

<root>
  <section ID="Home">
    <text ID="TopTitle">
      <zh-CN><![CDATA[简体]]></zh-CN>
      <zh-HK><![CDATA[繁體]]></zh-HK>
      <en-GB><![CDATA[English]]></en-GB>
    </text>
  </section>
</root>
//在HTML头部声明
@functions{
    private string GetStrByName(string Name)
    {
        List<SingleLangVM> slvm = ViewBag.slvm;
        return slvm.Where(x => x.Name == Name).FirstOrDefault().Value;
    }
}

例如：<h1>@(GetStrByName("TopTitle"))</h1>

连接数据库：

"ConnectionStringAppDB":"Server=192.168.1.108;Database=SmartService_V02;User Id=sa;Password=123456;Trusted_Connection=False;MultipleActiveResultSets=True"

如何实现Swiper轮播图不同语言状态下图片切换：

<div class="swiper-wrapper">
    <div class="swiper-slide ">
    @if (GetStrByName("Choose_pic") != "")
        {<img src="~/images/home/main01.jpg" style="width: 100%;" />}
            </div>
                <div class="swiper-slide">
                    @*中英文切换图片*@
                                    @if (GetStrByName("Choose_pic") == "英")
                    {<img src="~/images/home/BG_EN.jpg"  style="width: 100%;"/>}
                                    @if (GetStrByName("Choose_pic") == "简")
                    {<img src="~/images/home/BG_CN.jpg"  style="width: 100%;"/>}
                                    @if (GetStrByName("Choose_pic") == "繁")
                    {<img src="~/images/home/BG_TW.jpg"  style="width: 100%;"/>}
                @*中英文切换图片*@
                </div>
             <div class="swiper-slide">
    @if (GetStrByName("Choose_pic") != "")
        {<img src="~/images/home/main.jpg" style="width: 100%;" />}
     </div>
</div>

<!--中英文切换图片-->
<text ID="Choose_pic">
   <zh-CN><![CDATA[简]]></zh-CN>
   <zh-HK><![CDATA[繁]]></zh-HK>
   <en-GB><![CDATA[英]]></en-GB>
</text>

Swiper需要导入的外部包及JS：一个页面有多个swiper时需要用ID区分！

@section css{
    <link rel="stylesheet" href="~/lib/swiper/dist/css/swiper.css" type="text/css" />
}
@section Scripts{
    <script src="~/lib/swiper/dist/js/swiper.min.js"></script>
    <script src="~/lib/countUp.js-master/dist/countUp.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 1,
            spaceBetween: 0,
            centeredSlides: true,
            autoplay: {
                delay: 3000,
                //disableOnInteraction: false,
            },
            loop: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        });
        var win = $(window);
        var sc = $(document);
 </script>
}

通过ID来区分一个页面的不同swiper：

//swiper
let swiper_HQ = new Swiper('#HQ .swiper-container', {
   mode: "horizontal",
   loop: true,
   autoResize: true,
   pagination: '#HQ .swiper-pagination',
   paginationClickable: true,
   //autoplay: 3000,
   autoplay: {
     delay: 3000,
     disableOnInteraction: false,
   },
//添加左右按钮
    loop: true,
    pagination: {
       el: '.swiper-pagination',
       clickable: true,
    },
    navigation: {
       nextEl: '.swiper-button-next',
       prevEl: '.swiper-button-prev',
    }
});

bootstrapTab切换js;

$('#myTab a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
})

Branch Canvas根据所点击国家的名字自动跳转到对应的国家的帧:

let country = location.search.substring(1).split('=')[1];
//let goto = 0;
switch (country.toLowerCase()) {
    case "hongkong":
         this.gotoAndPlay("China");
         break;
    case "thailand":
         this.gotoAndPlay("Thailand");
         break;
     ...
}

//显示更多信息
function displayMore() {
   document.getElementById("hidden").style.display = "";
}

Canvas如何放在网页中：

在当前页面中引入createjs.min.js、Flash生成的Map.js、HTML文件中的js代码及Css代码，并在Map.js中正确指定所有用到的图片的路径。

如何做页面跟随ID进行滚动：

HTML如下：

<!--页面滚动-->
</section>
<nav class="nav-indexScroll nav-active">
    <ul>
        <li id="CS"><a href="javascript:pageScrollTo('Con01');">1</a></li>
        <li id="CM"><a href="javascript:pageScrollTo('Con02');">2</a></li>
        <li id="OM"><a href="javascript:pageScrollTo('Con03');">3</a></li>
        <li id="CC"><a href="javascript:pageScrollTo('Con04');">4</a></li>
        <li id="CX"><a href="javascript:pageScrollTo('Con05');">5</a></li>
    </ul>
</nav>
</section>

JS如下：

//让页面滚动到指定ID的标签处
function pageScrollTo(pageID) {
   $("html,body").animate({ scrollTop: $("#" + pageID).offset().top }, 1000);
}

判断url对象文件名中是否包含en-US：

let Language = window.location.pathname;
//判断url对象文件名中是否包含en-US
if (Language.indexOf("en-US") >= 0) {
   let X = document.getElementById('Hide01');
   let Y = document.getElementById('Hide02');
   X.style.display = 'none';
   Y.style.display = 'none';
}

END