整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Html和Css合并和拆分制作大风车的代码及详解

.说明：

推荐指数：★★★★

通俗易懂。

2.效果图


3.一个含有内部的css的html，名叫：风车-1.html代码：

<!--注释法-->
<!--第1步：声明：可以大小写均可以：doctype=DOCTYPE-->
<!--doctype html-->
<!DOCTYPE html>

<!--第2步：html包起来，默认lang=‘en’，所以也可以删除-->
<!--像这样：html-->
<html>
<html lang="en"-->
    <!--第2-1步：head部分设置-->
    <head>
        <!--第2-1-1步：固定格式meta和title设置-->
        <meta charset="UTF-8">
        <!--网页名字自己随意取-->
        <title>大风车DIY1</title>
        <!--第2-1-2步：css的设置，因为简单所以直接写在html的单个文件里-->
        <!--也可以作为外部文件引起css文件-->
        <style>
            #box {
                width: 10px;
                height: 10px;
                margin: 5px auto;
                position: relative;
            }

            #main {
                width: 400px;
                height: 400px;
                animation: dfc 1s linear infinite;
            }

            /*这是css的注释方法*/
            /*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*/
            /*4个扇叶的共性设置*/
            .css1,
            .css2,
            .css3,
            .css4 {
                width: 200px;
                height: 100px;
                border: 1px solid blue;
                border-radius: 100px 100px 0 0;
                position: absolute;
                /*4个扇叶的颜色渐变设置*/
                background-image: linear-gradient(green, yellow);
            }
            /*扇叶1的个性设置*/
            .css1 {
                top: 100px;
            }
            /*扇叶2的个性设置*/
            .css2 {
                top: 50px;
                left: 150px;
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);
            }
            /*扇叶3的个性设置*/
            .css3 {
                top: 200px;
                left: 200px;
                -webkit-transform: rotate(180deg);
                -moz-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                transform: rotate(180deg);
            }
            /*扇叶4的个性设置*/
            .css4 {
                top: 250px;
                left: 50px;
                -webkit-transform: rotate(270deg);
                -moz-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                -o-transform: rotate(270deg);
                transform: rotate(270deg);
            }

            /*中间的圆形的设置*/
            .ssss {
                width: 100px;
                height: 100px;
                border-radius: 100%;
                position: absolute;
                top: 150px;
                left: 150px;
                z-index: 10;
                /*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
                /*中间圆的渐变颜色设置*/
                background-image: radial-gradient(pink, blue);
            }
            /*风车的竖直杆的设置*/
            .hhh {
                width: 2px;
                height: 250px;
                background-image: radial-gradient(black, RED);
                position: absolute;
                top: 200px;
                left: 199px;
                z-index: -1;
            }
            /*运动的功能定义*/
            @keyframes dfc {
                0% {
                    -webkit-transform: rotate(0deg);
                    -moz-transform: rotate(0deg);
                    -ms-transform: rotate(0deg);
                    -o-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                25% {
                    -webkit-transform: rotate( 90deg);
                    -moz-transform: rotate( 90deg);
                    -ms-transform: rotate( 90deg);
                    -o-transform: rotate( 90deg);
                    transform: rotate( 90deg);
                }
                50% {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    -ms-transform: rotate(180deg);
                    -o-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
                75% {
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotate(270deg);
                }
                100% {
                    -webkit-transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -ms-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <!--第2-2步：body部分设置-->
    <body>
        <div id="box">
            <!--box的div容器里面有风车杆和main的4个运动的扇叶-->
            <div id="main">
                <!--main里的css是要一起运动的-->
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <!--风车的杆是不动的，所以单独放在一个div容器中-->
            <div class="hhh"></div>
        </div>

    </body>

</html>

4.如何将css拆开，单独呢？大型项目都是css单独一个文件夹，里面一大堆css文件。

4.1 建一个fengche.css文件，将下面代码复制进去，和风车-2.html放在同一个文件夹中。

fengche.css的代码：

#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}

#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}

/*这是css的注释方法*/
/*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*/
/*4个扇叶的共性设置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4个扇叶的颜色渐变设置*/
background-image: linear-gradient(green, yellow);
}
/*扇叶1的个性设置*/
.css1 {
top: 100px;
}
/*扇叶2的个性设置*/
.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*扇叶3的个性设置*/
.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*扇叶4的个性设置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}

/*中间的圆形的设置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
/*中间圆的渐变颜色设置*/
background-image: radial-gradient(pink, blue);
}
/*风车的竖直杆的设置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*运动的功能定义*/
@keyframes dfc {
0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
25% {
    -webkit-transform: rotate( 90deg);
    -moz-transform: rotate( 90deg);
    -ms-transform: rotate( 90deg);
    -o-transform: rotate( 90deg);
    transform: rotate( 90deg);
}
50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
75% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
}

4.2 风车-2.html的代码：注意修改部分。


<!DOCTYPE html>
<html>
<html lang="en"-->
    <head>
        <meta charset="UTF-8">
        <title>大风车DIY2</title>
        <!--注意放在同一个文件夹下，本机是deepin的linux系统，win可能不同-->
        <link rel="stylesheet" href="./fengche.css" />
    </head>
    <body>
        <div id="box">
            <div id="main">
                <div class="css1"></div>
                <div class="css2"></div>
                <div class="css3"></div>
                <div class="css4"></div>
                <div class="ssss"></div>
            </div>
            <div class="hhh"></div>
        </div>

    </body>
</html>

怎么样？通俗易懂吧，看了后，立马入门。

者：lzaneli，腾讯 TEG 前端开发工程师

“合并前文件还在的，合并后就不见了”、“我遇到 Git 合并的 bug 了” 是两句经常听到的话，但真的是 Git 的 bug 么？或许只是你的预期不对。本文通过讲解三向合并和 Git 的合并策略，step by step 介绍 Git 是怎么做一个合并的，让大家对 Git 的合并结果有一个准确的预期，并且避免发生合并事故。

故事时间

在开始正文之前，先来听一下这个故事。

如下图，小明从节点 A 拉了一条 dev 分支出来，在节点 B 中新增了一个文件 http.js，并且合并到 master 分支，合并节点为 E。这个时候发现会引起线上 bug，赶紧撤回这个合并，新增一个 revert 节点 E'。过了几天小明继续在 dev 分支上面开发新增了一个文件 main.js，并在这个文件中 import 了 http.js 里面的逻辑，在 dev 分支上面一切运行正常。可当他将此时的 dev 分支合并到 master 时候却发现，http.js 文件不见了，导致 main.js 里面的逻辑运行报错了。但这次合并并没有任何冲突。他又得重新做了一下 revert，并且迷茫的怀疑是 Git 的 bug。

两句经常听到的话：

—— ”合并前文件还在的，合并后就不见了“

—— ”我遇到 Git 的 bug 了“

相信很多同学或多或少在不熟悉 Git 合并策略的时候都会发生过类似上面的事情，明明在合并前文件还在的，为什么合并后文件就不在了么？一度还怀疑是 Git 的 bug。这篇文章的目的就是想跟大家讲清楚 Git 是怎么去合并分支的，以及一些底层的基础概念，从而避免发生如故事中的问题，并对 Git 的合并结果有一个准确的预期。

如何合并两个文件

在看怎么合并两个分支之前，我们先来看一下怎么合并两个文件，因为两个文件的合并是两个分支合并的基础。

大家应该都听说过“三向合并”这个词，不知道大家有没有思考过为什么两个文件的合并需要三向合并，只有二向是否可以自动完成合并。如下图

很明显答案是不能，如上图的例子，Git 没法确定这一行代码是我修改的，还是对方修改的，或者之前就没有这行代码，是我们俩同时新增的。此时 Git 没办法帮我们做自动合并。

所以我们需要三向合并，所谓三向合并，就是找到两个文件的一个合并 base，如下图，这样子 Git 就可以很清楚的知道说，对方修改了这一行代码，而我们没有修改，自动帮我们合并这两个文件为 Print("hello")。

接下来我们了解一下什么是冲突？冲突简单的来说就是三向合并中的三方都互不相同，即参考合并 base，我们的分支和别人的分支都对同个地方做了修改。

Git 的合并策略

了解完怎么合并两个文件之后，我们来看一个使用 git merge 来做分支合并。如上图，将 master 分支合并到 feature 分支上，会新增一个 commit 节点来记录这次合并。

Git 会有很多合并策略，其中常见的是 Fast-forward、Recursive 、Ours、Theirs、Octopus。下面分别介绍不同合并策略的原理以及应用场景。默认 Git 会帮你自动挑选合适的合并策略，如果你需要强制指定，使用git merge -s <策略名字>

了解 Git 合并策略的原理可以让你对 Git 的合并结果有一个准确的预期。

Fast-forward

Fast-forward 是最简单的一种合并策略，如上图中将 some feature 分支合并进 master 分支，Git 只需要将 master 分支的指向移动到最后一个 commit 节点上。

Fast-forward 是 Git 在合并两个没有分叉的分支时的默认行为，如果不想要这种表现，想明确记录下每次的合并，可以使用git merge --no-ff。

Recursive

Recursive 是 Git 分支合并策略中最重要也是最常用的策略，是 Git 在合并两个有分叉的分支时的默认行为。其算法可以简单描述为：递归寻找路径最短的唯一共同祖先节点，然后以其为 base 节点进行递归三向合并。说起来有点绕，下面通过例子来解释。

如下图这种简单的情况，圆圈里面的英文字母为当前 commit 的文件内容，当我们要合并中间两个节点的时候，找到他们的共同祖先节点（左边第一个），接着进行三向合并得到结果为 B。（因为合并的 base 是“A”，下图靠下的分支没有修改内容仍为“A”，下图靠上的分支修改成了“B”，所以合并结果为“B”）。

但现实情况总是复杂得多，会出现历史记录链互相交叉等情况，如下图：

当 Git 在寻找路径最短的共同祖先节点的时候，可以找到两个节点的，如果 Git 选用下图这一个节点，那么 Git 将无法自动的合并。因为根据三向合并，这里是是有冲突的，需要手动解决。（base 为“A“，合并的两个分支内容为”C“和”B“）

而如果 Git 选用的是下图这个节点作为合并的 base 时，根据三向合并，Git 就可以直接自动合并得出结果“C”。（base 为“B“，合并的两个分支内容为”C“和”B“）

作为人类，在这个例子里面我们很自然的就可以看出来合并的结果应该是“C”（如下图，节点 4、5 都已经是“B”了，节点 6 修改成“C”，所以合并的预期为“C”）

那怎么保证 Git 能够找到正确的合并 base 节点，尽可能的减少冲突呢？答案就是，Git 在寻找路径最短的共同祖先节点时，如果满足条件的祖先节点不唯一，那么 Git 会继续递归往下寻找直至唯一。还是以刚刚这个例子图解。

如下图所示，我们想要合并节点 5 和节点 6，Git 找到路径最短的祖先节点 2 和 3。

因为共同祖先节点不唯一，所以 Git 递归以节点 2 和节点 3 为我们要合并的节点，寻找他们的路径最短的共同祖先，找到唯一的节点 1。

接着 Git 以节点 1 为 base，对节点 2 和节点 3 做三向合并，得到一个临时节点，根据三向合并的结果，这个节点的内容为“B”。

再以这个临时节点为 base，对节点 5 和节点 6 做三向合并，得到合并节点 7，根据三向合并的结果，节点 7 的内容为“C”

至此 Git 完成递归合并，自动合并节点 5 和节点 6，结果为“C”，没有冲突。

Recursive 策略已经被大量的场景证明它是一个尽量减少冲突的合并策略，我们可以看到有趣的一点是，对于两个合并分支的中间节点（如上图节点 4，5），只参与了 base 的计算，而最终真正被三向合并拿来做合并的节点，只包括末端以及 base 节点。

需要注意 Git 只是使用这些策略尽量的去帮你减少冲突，如果冲突不可避免，那 Git 就会提示冲突，需要手工解决。（也就是真正意义上的冲突）。

Ours & Theirs

Ours 和 Theirs 这两种合并策略也是比较简单的，简单来说就是保留双方的历史记录，但完全忽略掉这一方的文件变更。如下图在 master 分支里面执行git merge -s ours dev，会产生蓝色的这一个合并节点，其内容跟其上一个节点（master 分支方向上的）完全一样，即 master 分支合并前后项目文件没有任何变动。

而如果使用 theirs 则完全相反，完全抛弃掉当前分支的文件内容，直接采用对方分支的文件内容。

这两种策略的一个使用场景是比如现在要实现同一功能，你同时尝试了两个方案，分别在分支是 dev1 和 dev2 上，最后经过测试你选用了 dev2 这个方案。但你不想丢弃 dev1 的这样一个尝试，希望把它合入主干方便后期查看，这个时候你就可以在 dev2 分支中执行git merge -s ours dev1。

Octopus

这种合并策略比较神奇，一般来说我们的合并节点都只有两个 parent（即合并两条分支），而这种合并策略可以做两个以上分支的合并，这也是 git merge 两个以上分支时的默认行为。比如在 dev1 分支上执行git merge dev2 dev3。

他的一个使用场景是在测试环境或预发布环境，你需要将多个开发分支修改的内容合并在一起，如果不用这个策略，你每次只能合并一个分支，这样就会导致大量的合并节点产生。而使用 Octopus 这种合并策略就可以用一个合并节点将他们全部合并进来。

Git rebase

git rebase 也是一种经常被用来做合并的方法，其与 git merge 的最大区别是，他会更改变更历史对应的 commit 节点。

如下图，当在 feature 分支中执行 rebase master 时，Git 会以 master 分支对应的 commit 节点为起点，新增两个全新的 commit 代替 feature 分支中的 commit 节点。其原因是新的 commit 指向的 parent 变了，所以对应的 SHA1 值也会改变，所以没办法复用原 feature 分支中的 commit。（这句话的理解需要这篇文章的基础知识）

对于合并时候要使用 git merge 还是 git rebase 的争论，我个人的看法是没有银弹，根据团队和项目习惯选择就可以。git rebase 可以给我们带来清晰的历史记录，git merge 可以保留真实的提交时间等信息，并且不容易出问题，处理冲突也比较方便。唯一有一点需要注意的是，不要对已经处于远端的多人共用分支做 rebase 操作。

我个人的一个习惯是：对于本地的分支或者确定只有一个人使用的远端分支用 rebase，其余情况用 merge。

rebase 还有一个非常好用的东西叫 interactive 模式，使用方法是git rebase -i。可以实现压缩几个 commit，修改 commit 信息，抛弃某个 commit 等功能。比如说我要压缩下图 260a12a5、956e1d18，将他们与 9dae0027 合并为一个 commit，我只需将 260a12a5、956e1d18 前面的 pick 改成“s”，然后保存就可以了。

限于篇幅，git rebase -i 还有很多实用的功能暂不展开，感兴趣的同学可以自己研究一下。

总结

现在我们再来看一下文章开头的例子，我们就可以理解为什么最后一次 merge 会导致 http.js 文件不见了。根据 Git 的合并策略，在合并两个有分叉的分支（上图中的 D、E‘）时，Git 默认会选择 Recursive 策略。找到 D 和 E’的最短路径共同祖先节点 B，以 B 为 base，对 D，E‘做三向合并。B 中有 http.js，D 中有 http.js 和 main.js，E’中什么都没有。根据三向合并，B、D 中都有 http.js 且没有变更，E‘删除了 http.js，所以合并结果就是没有 http.js，没有冲突，所以 http.js 文件不见了。

这个例子理解原理之后解决方法有很多，这里简单带过两个方法：1. revert 节点 E'之后，此时的 dev 分支要抛弃删除掉，重新从 E'节点拉出分支继续工作，而不是在原 dev 分支上继续开发节点 D；2. 在节点 D 合并回 E’节点时，先 revert 一下 E‘节点生成 E’‘（即 revert 的 revert），再将节点 D 合并进来。

Git 有很多种分支合并策略，本文介绍了 Fast-forward、Recursive、Ours/Theirs、Octopus 合并策略以及三向合并。掌握这些合并策略以及他们的使用场景可以让你避免发生一些合并问题，并对合并结果有一个准确的预期。

希望这篇文章对大家有用，感兴趣的同学可以逛一逛我的博客 www.lzane.com 或看看我的其他文章。

参考

  • 三向合并 http://blog.plasticscm.com/2016/02/three-way-merging-look-under-hood.html
  • Recursive 合并【视频】https://www.youtube.com/watch?v=Lg1igaCtAck
  • 书籍 Scott Chacon, Ben Straub - Pro Git-Apress (2014)
  • 书籍 Jon Loeliger, Matthew McCullough - Version Control with Git, 2nd Edition - O’Reilly Media (2012)

郑同学在开发我们系统的时候发现首页静态资源多次请求服务器加载缓慢。带着这个问题他去访问了淘宝，发现了淘宝一条请求里有多个Js。最后百度一下发现了Concat。Concat是淘宝开发的一个Nginx模块，可以将多个Js/Css合并成一个请求（当然在合理的情况下），这样可以减少对服务器的请求个数，达到静态资源相对较快的加载。下面我们看一下具体的操作。

一、Nginx+Concat安装

  1. 下载Nginx 和Concat

    wget http://nginx.org/download/nginx-1.6.2.tar.gz

    git clone git://github.com/alibaba/nginx-http-concat.git

    下载Concat可能需要翻墙

  2. 解压安装

    将下载好的Concat 放到某目录，本次试验放入/usr/local/src/

    tar zxvf nginx-1.6.2.tar.gz

    cd nginx-1.6.2

    ./configure

    --prefix=/usr/local/webserver/nginx

    --with-http_stub_status_module

    --with-http_ssl_module

    --add-module=/usr/local/src/nginx-http-concat

    以上加粗部分为Concat 目录，根据实际情况修改

    make && make install

  3. 测试

  1. 在 /usr/local/webserver/nginx/html 新建css 目录

    mkdir -p /usr/local/webserver/nginx/html/css

  2. 新建 a.css 和 b.css 内容分别为

    a{

color: red;

}

b{

color: blue;

}

c)修改nginx配置文件nginx.conf,新增如下内容

location /css/ {

concat on;

concat_max_files 20;

}

d)启动nginx

/usr/local/webserver/nginx/sbin/nginx

e)观察浏览器输出

浏览器输入 http://IP /css/??a.css,b.css

观察浏览器输出，出现下图说明配置成功

由上图看出，两个css已经合并成功一个css

二、配置实际项目

此步骤需要根据实际情况修改，本次试验针对 javashop 多店系统

  1. 配置 Js/Css 合并

    nginx.conf配置

    location /themes/b2b2cv2/css/ {

    root /home/www/b2b2c_1/;

    concat on;

    concat_max_files 20;

    }

    location /themes/b2b2cv2/js/ {

    root /home/www/b2b2c_1/;

    concat on;

    concat_max_files 20;

    }

    加粗部分根据实际情况修改

  2. 根据对应规则修改项目(修改完成后需要重新启动nginx)

例如：

可根据实际情况修改。


在线咨询
上一篇：如何通过 Python 打造一款简易版 AlphaGo?
下一篇：快速了解JavaScript文本框操作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 千阳县 宁江区 上饶县 嵩县 芒康县 三穗县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服