如何抄网站 - zLulus/My_Note GitHub Wiki

以谷歌浏览器+ http://www.cdadri.com/ 为例

结构

首页

一个单独的展示页面
1

分类功能页

套用一个菜单栏、标题和页脚
2
3

其他

部分功能页里面有详情页、小窗口
4
5

首页

我采用的方法是右键另存为,则有html+包含css,js,img的文件夹
把html拷贝至自己的cshtml中
将css,js,img复制粘贴到自己的项目对应目录
在cshtml中把对应的js,css,img引用修改到自己的对应文件目录下

<script type="text/javascript" src="./成都市建筑设计研究院 CDAD_files/jquery.js.下载"></script>

改为

<script type="text/javascript" src="js/common/jquery.js"></script>

Tips:
1.诸如左滑、右滑、关闭、等待中等图片一般在css文件中引用,所以需要去css文件中修改img的目录

.banner_icon span {
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 6px;
    margin: 0 5px; /*border-radius: 50%;text-align:center; background:#FFF; color:#FFF;*/
    background: url(../../images/achievementShow/scroll-btn.png) -50px 0 no-repeat;
}

2.首页是一个单独的效果页,不要引用公共的Layout

@{
    Layout = null;
}

分类功能页

类似首页的方式
分类功能页有多个页面,有很多共同的内容:LOGO、背景图、右边的菜单栏、页脚、共同的js,css引用等,把它们统一放到Shared的_Layout.cshtml中,以便复用
像这样

<!DOCTYPE html>
<html>
<head id="Head1">
    <title>
        成都市建筑设计研究院 CDAD
    </title>
    <link href="~/css/common/style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="~/js/common/jquery.js"></script>
    <script type="text/javascript" src="~/js/common/jquery.jslides.js"></script>
    <script type="text/javascript" src="~/js/common/jquery.jslides_index.js"></script>
    <script type="text/javascript" src="~/js/common/jquery.jslides.js"></script>
    <script type="text/javascript" src="~/js/common/common.js"></script>
    <meta name="keywords" content="成都市建筑设计研究院,CDAD">
    <meta name="description" content="成都市建筑设计研究院">
    <meta name="Copyright" content="成都市建筑设计研究院">
    @RenderSection("Styles", required: false)
</head>
<body>
    <div class="header">
        <a href="/" class="logo" title="成都市建筑设计研究院"></a>
    </div>
    <div class="wrapper" id="pagemain">
        <div class="navlist">
            <ul id="mainnav">
                <li><a href="@Url.Action("Index","Home")">网站首页</a></li>
                <li><a href="@Url.Action("Index", "News")">新闻资讯</a></li>
                <li><a href="@Url.Action("Index", "CompanyProfile")">企业概况</a></li>
                <li><a href="@Url.Action("Index", "AchievementShow")">成果展示</a></li>
                <li><a href="@Url.Action("Index", "PartyBuilding")">党团建设</a></li>
                <li><a href="@Url.Action("Index", "Recruitment")">人才招聘</a></li>
                <li><a href="@Url.Action("Index", "Contact")">联系我们</a></li>
            </ul>
        </div>
        @RenderBody()

    </div>
    <!--页脚-->
    <div class="footer">
        <div class="wrapper">
            <p>
                <span class="fr">蜀ICP备17038600号</span>
                成都市建筑设计研究院  版权所有
            </p>
            <p class="cright">
                <span class="fr"><a href="http://www.mekabrand.com/" class="mk" target="_blank"></a></span>
                Copyright © www.cdadri.com All Rights Reserved.
            </p>
        </div>
    </div>
    @RenderSection("Scripts", required: false)
</body>
</html>

单独的内容html,则放到自己的html中
单独的js,css引用,也只放在自己的html中,这里js需要注意引用的顺序,因为在_Layout和自己的html中均有js的引用

详情页

比如,新闻资讯中的每一篇新闻的详情
右键另存为,和上面的方式一样
要对新闻详情页和新闻列表进行关联,在新闻列表里面加入详情的路由

<a href="/News/Detail?id=0">
    <div class="fl">
        <img src="~/images/news/20171018101224298.jpg" width="500" height="300">
    </div>
    <div class="newsintro">
        <h2 class="ellipsis-2">查看详情页</h2>
        <p class="time">2017-10-18</p>
        <div class="sumry ellipsis-4">
            为喜迎党的十九大胜利召开,营造浓厚热烈的良好氛围,2017年10月17日上午,院党委书记周蜀鸣和院长、党委副书记陶磊组织召开了我院喜迎党的十九大召开的工作部署会议。院党委委员、各党支部委员参加了会议。
            会议部署了我院喜迎十九大召开的整体工作内容及安排,加强宣传营造积极向上、团结奋进的浓厚氛围,
        </div>
    </div>
</a>

小窗口

企业介绍-企业资质

有独立的css和js文件(thickbox.css,thickbox.js),注意修改图片路径的问题

业绩展示-详情

详情是一个独立页面,调用OpenWin方法,在原页面基础上加入新页面(黑屏背景+小窗口),将原来的a链接地址改为自己的详情页面地址
原来:

<a href="javascript:void(0);" onclick="OpenWin(&quot;/case/1.html&quot;)">
    <img src="~/images/achievementShow/20171026051830702.jpg">
    <div class="lay">
        <h3 class="ellipsis">天府创新中心一期</h3>
        <p class="ellipsis">建筑设计类 | 商业办公</p>
    </div>
</a>

现在:

<a href="javascript:void(0);" onclick="OpenWin(&quot;/AchievementShow/Detail?id=0&quot;)">
    <img src="~/images/achievementShow/20171107030550867.jpg">
    <div class="lay">
        <h3 class="ellipsis">查看小窗</h3>
        <p class="ellipsis">建筑设计类 | 商业办公</p>
    </div>
</a>

对详情页进行修改,因为原页面已经引用公共的js和css等,所以要加上

@{
    Layout = null;
}

修改自己独立引用的js的路径,并修改css里面对应图片路径

改良

最后根据自己的业务需要,进行删减、修改和增加

项目链接:
https://github.com/zLulus/WebsiteViewDemo

⚠️ **GitHub.com Fallback** ⚠️