手把手教你做手机婚恋网

上一节我们已经讲过了手机网页布局中的一些开发经验,与布局的相关知识,如果不清楚的同学希望回头去看一下,以下的教程是基于掌握上节知识点的基础上来的,同时也是对手机网页制作的一个大概的讲解,建议把上节的知识点理清楚之后再继续阅读,上节链接地址

因为在程序员这个圈子中单身狗特别多,所以就突发奇想想来写写一篇关于手机婚恋网的网页布局

目录

1、阅读读者具备基础

2、网页布局思想

3、整体布局的实现与顶部栏功能的实现

4、相关页面的排版布局

5、整体页面优化

6、源码下载

7、参考文章

8、结尾

1、阅读读者具备基础

1、熟练的使用HTML和CSS

2、对HTML5和CSS3有一定的了解,这个不必深入

3、掌握JavaScript、jquery脚本语言

如果还不能具备以上基础的读者们建议你们还是去网上找一下其他的一些相关的教学贴看一看,要不然可能会跟不上下面的学习了

2、网页布局思想

好了,现在我们就来开始讲解一下网页布局,在做手机网页之前我们应该在脑海中有一个大致的规划,也就是规划一个常规的网页需要有哪几部分构成的

1、头部栏

2、主题内容

3、固定底部栏

布局实现的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <div style="background-color: red;width: 100%;height:50px">header</div>
    <div style="background-color:yellow;width:100%;height:1500px">contain</div>
    <div style="background-color:blue;width:100%;height: 30px;position: fixed;left:0px;bottom: 0px">footer</div>
</body>
</html>

在Chrome(酷容)浏览器中运行,然后,按F12打开手机模式进行查看

注:因为Chrome支持手机模式查看效果

这样大致的布局我们就已经有了,接下来我们要来讨论一下在这三块模块中我们应该要添加些什么上去。

对于这三块模块的布局,在现在巨大多数的网站中是固定的,但是对其实各个模块的自定义设计却是不尽相同,所以在本次的教程中我们的模块设计是

1、头部栏中包含一个侧拉的选项,一个搜索框,一个页面切换的按钮

2、内容部分:由于这是一个搭建手机页面主体框架的教程,不是一个完整的项目,所以不添加内容部分

3、底部栏:底部栏我们为了简单打算放上一个按钮

3、整体布局的实现与顶部栏功能的实现

我们本次讲解的项目是以打造一个婚恋网结构为题材讲解的,我们先新建一个项目其中HTML文件命名为Index.html,CSS文件命名为style.css,JavaScript命名为script.js,图标我们统一采用awesome图标,下载地址,并且在网上下载一张ico图片

首先我们先来引入HTML5网页布局所需要的一些内容

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自己动手写婚恋网</title>
    <link rel="short icon" style="image/x-icon" href="HLLogo.ico" >
    <link rel="icon" style="image/x-icon" href="HLLogo.ico">
    <link rel="bookmark" style="image/x-icon" href="HLLogo.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!--开启对web app的支持-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--主要是正对苹果手机将数字自动识别为号码-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="HandheldFriendly" content="true">
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

</body>
</html>

上面的引入在上一节中提及过,不做解释,好了我们运行一下试试,这一步主要是用来检验文件是否正常被引入以及标题栏中的图标是否被设置了,建议开发人员首选chrome

运行并打开调试工具

从这里和运行效果我们可以确定程序是正确的

好了我们来设计一下头部,中部和底部这3块大的模块

我们把头部设计为高36px(em大小的确定主要是通过上级父类的font-size属性来确定的,换句话说也就是1em等于上级的font-size的大小,默认的font-size是16px),在开发的过程中我们一般不考虑amazon kindle的兼容效果,还有切记header和footer中的样式要尽量的保持一致

注:我们在设计的时候最好是采用em这种单位来做计量单位,不采用px的主要原因是px是固定多少像素,这样会给后期维护带来麻烦,同时em也能够很好的处理不同屏幕以及不同分辨率之间的兼容性

好了接下来我们就创建一个命名为style.css文件,代码如下:

*{
    margin:0;
    padding:0;
}
html{
    font-size:100%;
}
/*body{
    font-size:1em;
}*/
#header{
    height:2em;
    line-height:2em;
    width:100%;
    background:#339EE2;
    color:white;
}
#contain{
    min-height:50em;
    width:100%;
    background:yellow;
}
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:2em;
    line-height:2em;
    width:100%;
    background:#339ee2;
    color:white;
}

在HTML的body下面添加

<body>
    <div id="header">
    </div>
    <div id="contain"></div>
    <div id="footer"></div>
</body>

好了问题来了打开chrome切换到webkit模式下,选择各种不同的手机型号你会看到效果都是不一样的,这样的用户体验应该说是很不好的,那该怎样办呢?

我们在上面有说到要使用em来处理,因为em会获取上级的百分比进行自动计算,另外如果我们能够获取当前移动屏幕高度的像素,并把高度的像素平均分成几份那么不就可以保证模块在屏幕中所占的百分比,即位置是确定的,其他的整体布局也会跟着变化,JS代码如下:

$(function(){
    var fontsize=window.screen.height/30;
    $(".container").css("fontSize",fontsize);
})

其中我们为什么要获取屏幕在除以30呢?最主要的原因还是个人的原因,因为我的调试环境是在iphone4下面进行的,iphone4的height值是480像素,所以除以30刚好也就是16像素,这根默认的像素值是一直的,也是为了方便我在后面的em与px之间的换算,当然这个fontsize不一定要跟我一样,主要是看你的习惯。

首页的的基本结构也已经搭建好了,这时我们应该将body的background设置为white,yellow只是为了让效果更为明显而已

在头部我们应该要包括一个地区的选择按钮,一个搜索框,和一个性别的选择按钮

各部分的设计如下:

地区选择按钮:点击跳转到相应的页面,左边距5px

搜索框:点击跳转到相应的页面

性别选择按钮:点击跳转到相应的页面,右边距5px,

代码如下:

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自己动手写婚恋网</title>
    <link rel="stylesheet" type="text/css" href="FontAwesome/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="FontAwesome/css/font-awesome.min.css">
    <!--引入fontawesome图标-->
    <link rel="short icon" style="image/x-icon" href="HLLogo.ico" >
    <link rel="icon" style="image/x-icon" href="HLLogo.ico">
    <link rel="bookmark" style="image/x-icon" href="HLLogo.ico">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <!--开启对web app的支持-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--主要是正对苹果手机将数字自动识别为号码-->
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="HandheldFriendly" content="true">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="header">
        <div id="area" class="fl address">
            <span>全国</span>
            <i class="icon-circle-arrow-down"></i>
        </div>
    <div id="search" class="fl">
        <input type="text" placeholder="请输入你所要搜索的内容" disabled></input>
    </div>
        <div class="fr setting" id="sex">
            <span>设置</span>
            <i class="icon-heart"></i>
        </div>
    </div>
    <div id="contain"></div>
    <div id="footer">
        <span>我也恋爱</span>
    </div>
</body>
</html>

CSS代码

*{
    margin:0;
    padding:0;
}
/*header*/
#header{
    height:2em;
    line-height:2em;
    width:100%;
    background:#339EE2;
    color:#FCECDF;
}

#area{
    margin-left:0.5em;
}
#sex{
    margin-right:0.5em;
}
#search{
    margin-left: 0.5em;
    width: -webkit-calc(100% - 9em);
    height: 1.2em;
}
#search>input{
    width: 100%;
    height:1.2em;
    line-height: 1.2em;
    padding-top: 0.3em;
    font-size: 0.8em;
    border-radius: 0.5em;
    box-shadow:0 0.125em 2px #ccc;
}
/*container*/
#contain{
    min-height:50em;
    width:100%;
    background: #FCECDF;
}
/*footer*/
#footer{
    position:fixed;
    left:0px;
    bottom:0px;
    height:2.5em;
    line-height:2.5em;
    width:100%;
    background:#339ee2;
    color:#FCECDF;
    vertical-align: center;
    text-align: center;
}
/*other*/
.fl{
    float: left;
}
.fr{
    float: right;
}

其中的CSS代码我们要注意一下规范,就是对各部分的CSS样式进行分开注解一下,这样有利于以后的代码维护

JS代码

$(function(){
    var fontsize=window.screen.width/20;
    $("body").css("fontSize",fontsize);
    $("#search>input").css("height",fontsize*1.2);
    $("#footer").click(function(){
        //alert("该内容未设置");
    });
})

好的我们来运行一下结果看看,结果如下所示:

这里我们要关注一下配色方案,具体的配色方案我们可以在网上查找,然后通过fast stone来获取

4、相关页面的排版布局

由于整个项目可能会比较冗余,这里我们就挑选几个功能进行讲解,其他的功能会在后面提供源代码供大家下载

这里我们挑选比较有代表性的“全国”和底部栏进行更进一步的讲解,“全国”这个相信大家都会知道这个所要实现的功能是什么,底部栏“我也恋爱”要实现的是相当于注册的功能,其他的细节如下:

“全国”:跳转到相应页,相应页中有,省份、城市等信息,底部有确定和取消按钮,右上角有一个红X用来取消,左上角有一个返回按钮,背景不透明

“我也恋爱”:跳转到相应页,相应页中有姓名,年龄,匹配范围等设置,有确定和取消按钮,右上角有一个白色的X,背景为透明

好了基本的细节就是这样了,其他的一些细节我们就来自由发挥

那么我们就来看一下我们所实现的“全国”相应页面的效果图:

其中我们虽然实现了大部分的页面上的基本功能,但是省市联动这一块我们是没有实现的,具体的实现方法请自行百度解决,这个问题在网上的教程比较多

HTML核心代码:

<div class="city">
        <div class="cityheader">
            <div class="fl" id="return">
                <i class="icon-reply"></i>
            </div>
                <div class="fl area">选择地区</div>
            <div class="close">
                <span class="fr">X</span>
        </div>
        </div>
        <div class="citybody">
            <hr id="hr1" >
                <div id="hot">
                    热门城市:
                    <a href="#">广州</a>
                    <a href="#">北京</a>
                    <a href="#">深圳</a>
                    <a href="#">上海</a>
                </div>
                <div id="selectarea" >
                <center>
                    <table class="table">
                        <tr>
                            <td>所在省份:</td>
                            <td>
                                <input class="xiala" type="text"  />
                            </td>
                        </tr>
                        <tr>
                            <td>所在城市:</td>
                            <td><input class="xiala" type="text"  /></td>
                        </tr>
                        <tr>
                            <td>所在地区:</td>
                            <td><input class="xiala" type="text"  /></td>
                        </tr>
                    </table>
                    </center>
                </div>
            <hr id="hr2">
        </div>
        <div class="cityfooter">确定</div>
    </div>

其中在编写相关HTML代码的时候,相关页我们是采用将代码写在同一个HTML文件之中,这样的好处是可以减少了HTTP请求的次数,为了比较直观的看到效果,我们应该对首页进行隐藏,相关页就直接显示

核心CSS代码:

.cityheader{
    height:2em;
    line-height:2em;
    width:100%;
    background:#339EE2;
    color:#FCECDF;
}
#return{
    margin-left: 0.5em;
}
.area{
    line-height: 2em;
    padding-left: 35%;
    color: #FCECDF;
}
.close span{
    margin-right: 0.5em;
    line-height: 2em;
    color: #FCECDF;
}
#hr1{
    border:0.125em dashed #D7AE53;
    margin-top: 3em;
}
#hr2{
    border:0.125em dashed #D7AE53;
    margin-bottom: 3em;
}
.cityfooter{
    position:fixed;
    left:0px;
    bottom:0px;
    height:2.5em;
    line-height:2.5em;
    width:100%;
    background:#339ee2;
    color:#FCECDF;
    vertical-align: center;
    text-align: center;
}
#selectarea{
    margin:1em 1em;
}
.table{
    cellspacing:10%;

}
.xiala{
    height: 1.5em;
    width: 13em;
}
#hot{
    margin-left: 2em;
    margin-top:3em;
    margin-bottom: 1em;
}
#hot>a{
    text-decoration:none;
}

由于Jq代码比较少,就直接全部拿出来展示

jquery代码

$(function(){
    var fontsize=window.screen.width/20;
    $("body").css("fontSize",fontsize);
    $("#search>input").css("height",fontsize*1.2);
    $(".xiala").css("height",fontsize*1.2);
    $("#footer").click(function(){
        //alert("该内容为设置");
    });
    $(".address").click(function(){
        $("#main").addClass("hide");
        $(".city").slideToggle();
    });
    $("#return").click(function(){
        $("#main").removeClass("hide");
        $(".city").slideToggle();
    });
    $(".close").click(function(){
        $("#main").removeClass("hide");
        $(".city").slideToggle();
    });
})

好了,地区的相关页面我们就实现了,下面我们就来讨论一下怎样实现“我也恋爱”相关页面,其实这个页面说白了也就是一个登陆页面

我们最后实现的效果大致如下所示:

我们在实现这个效果的时候,是通过实现三层盒子模型来实现的,最底下是首页层,然后是一层高斯模糊的滤镜层,但是直接在滤镜层上面写姓名等信息会导致字体模糊等问题,所以我们就创建第三层,也就是你所看到的黄色的区域内的内容,在实现这三层关系的时候我们采用的布局是absolute,但是经过实践发现,黄色的区域会被显示在滤镜层的下面,所以我们可以通过z-index属性来把黄色层提到最上面

HTML相关代码:

<div class="hide pop">
        <table>
            <tr>
                <td>姓名:</td>
                <td><input class="inp" type="text"></input></td>
            </tr>
            <tr class="tr">
                <td>性别:</td>
                <td><input class="inp" type="text"></input></td>
            </tr>
            <tr>
                <td colspan="2">
                <center>
                    <input class="inpbut" type="button" style="margin-left: 1em" value="确定"></input>
                    <input id="cancel" class="inpbut" type="button" value="取消"></input>
                </center>
                </td>
            </tr>
        </table>
    </div>
    <div class="change hide blur">
            <div class="changeheader">
                <div class="clo fr">X</div>
            </div>
            <div class="changebody"></div>
    </div>

CSS相关代码:

/*登陆页面*/
.change{
    background:#462C75;
    width:100%;
    top:0px;
    left:0px;
    position:absolute;
    opacity:0.7;
}
.changeheader{
    height:2em;
    line-height:2em;
    width:100%;
}
.changebody{
    width:100%;
    height:-webkit-calc(100%-4.5em);

}
.changeheader>.clo{
    margin-right:0.4em;
    font-size:1.8em;
    font-weight:bold;
    color:red;
}
.blur{
    -webkit-filter: blur(1px);
     -moz-filter: blur(1px);
     -o-filter: blur(1px);
     -ms-filter: blur(1px);
     filter: blur(1px);
}
/*弹出窗口*/
.pop{
    position:absolute;
    top:calc(9em);
    left:20%;
    border-radius:1em;
    background:yellow;
    padding:0.7em;
    width:9em;
    height:4.5em;
    z-index:10;
}
.pop>table{
}
.inp{
    width:5em;
    height:2em;
}
.inpbut{
    width:3em;
    height:2em;

}

注:弹出窗口所指的是黄色层

Jq的所有代码:

$(function(){
    var fontsize=window.screen.width/20;
    $("body").css("fontSize",fontsize);
    $("#search>input").css("height",fontsize*1.2);
    $(".xiala").css("height",fontsize*1.2);
    $(".inp").css("height",fontsize);
    $("#footer").click(function(){
        //alert("该内容为设置");
    });
    $(".address").click(function(){
        $("#main").addClass("hide");
        $(".city").slideToggle();
    });
    $("#return").click(function(){
        $("#main").removeClass("hide");
        $(".city").slideToggle();
    });
    $(".close").click(function(){
        $("#main").removeClass("hide");
        $(".city").slideToggle();
    });
    $("#footer").click(function() {
        var h=window.screen.height;
        $(".change").css(‘height‘, h);
        //$("#main").addClass("hide");
        $(".change").slideToggle();
        $(".pop").slideToggle();
        $(".change").css(‘position‘, ‘fixed‘);
        $(".pop").css(‘position‘, ‘fixed‘);
    });
    $(".clo").click(function() {
        $(".pop").slideToggle();
        $(".change").slideToggle();
        //$("#login").css(‘display‘, ‘none‘);
    });
    $("#cancel").click(function(){
        $(".pop").slideToggle();
        $(".change").slideToggle();
    });
})

好了,写到这里也有点累了,毕竟这篇文章写了快一个星期,这里写这篇文章其实也就是起到抛砖引玉的作用,具体的其他功能也就不多说了,相信如果大家能做到这样的随心所欲的根据要求来实现效果,那么网页布局也没有什么难的,接下来我们就来谈一谈优化问题,相关的代码问题就到此为止了

5、整体页面优化 

上面我们已经我们已经基本上完成了网页基本的框架,其他的详细内容就不做补充了,但是在这里我们还要对网页进行性能上的优化

1、对JS进行压缩,压缩后的结果是:

$(function(){var fontsize=window.screen.width/20;$("body").css("fontSize",fontsize);$("#search>input").css("height",fontsize*1.2);$(".xiala").css("height",fontsize*1.2);$(".inp").css("height",fontsize);$("#footer").click(function(){});$(".address").click(function(){$("#main").addClass("hide");$(".city").slideToggle()});$("#return").click(function(){$("#main").removeClass("hide");$(".city").slideToggle()});$(".close").click(function(){$("#main").removeClass("hide");$(".city").slideToggle()});$("#footer").click(function(){var h=window.screen.height;$(".change").css("height",h);$(".change").slideToggle();$(".pop").slideToggle();$(".change").css("position","fixed");$(".pop").css("position","fixed")});$(".clo").click(function(){$(".pop").slideToggle();$(".change").slideToggle()});$("#cancel").click(function(){$(".pop").slideToggle();$(".change").slideToggle()})});

现在压缩工具的地址是http://tool.lu/js/,但是在使用JS压缩的时候,建议大家要调试好了,确保无误之后再进行压缩,这样可以避免后期修改的麻烦,相对的CSS和HTML也是可以进行代码压缩的,但是这两个一般不推荐大家压缩因为这两个涉及的是页面的效果可能会经常性的发生修改,所以压缩会对以后造成麻烦

2、懒加载

这个概念不知道大家听过没有,不清楚的请自行去百度一下,懒加载最重要的一个好处是在网页中存在大量的数据、图片的时候可以加快网页框架的加载时间,而那些图片则是在你所需要显示的时候才会显示,懒加载我们一般是使用jquery.lazyload.js插件来进行实现的

3、减少页面的HTTP请求

在页面加载的时候,网页的HTML、CSS、JavaScript、图片等其他的内容都会各自创建各自的HTTP请求,所以当页面的图片内容过多的时候创建的HTTP请求也会很多,所以我们要可以使用Gulp工具来生成CSS精灵图

4、Base64转换

其实Base64位的转换原理是将HTTP请求图片的地址,有一串字符串来代替,但是这种方法虽然好处很多,但是在使用Base64转码的关键是要注意一下转码的图片不能过大,因为过大的图片转码生成的字符串过长,这样会给开发者造成困扰

Base64在HTML中的使用

//在html代码img标签里的写法
<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">

Base64在CSS中的使用

//在css里的写法
#fkbx-spch, #fkbx-hspch {
    background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

    ...
}

Base64转码工具有很多,这个网上自行查找就可以了,但是今天我们要来推荐一款神器,就是chrome,这个大家都知道吧,但是大家知道这个也是可以生成base64图片吗?

在Source中找到HTTP发送请求的图片,单击一下,右侧栏就会出现Base64转码的字符串

这个就是我们所要的找的

5、CDN加速

这个直接在七牛或者是又拍云上注册一个账号就好了,这个在这里就不讨论了

6、源码下载

http://pan.baidu.com/s/1dDLMvlf

7、参考文章

网页性能优化

【前端攻略】:玩转图片Base64编码

 8、结尾

好了,洋洋洒洒的文章终于写完了,在此我想做一下最后的结尾,由于本人的能力有限,也就是小菜鸟一枚,如果是有什么错误或者是意见的话,欢迎来骚扰。另外如果是想转载的话,请注明出处,请尊重别人的知识,谢谢

时间: 2024-10-12 19:38:56

手把手教你做手机婚恋网的相关文章

微信测试工程师手把手教你做弱网络模拟测试

微信测试工程师手把手教你做弱网络模拟测试 Posted by 腾讯优测 | 3,152 views 小优有话说: app研发不同于实验室里做研究,哪里有"理想环境". 理想里,用户用着性能卓越的手机,连着畅通无阻的wifi网络. "哇塞!这个app好用到飞起!" 现实是,他们可能正用着你闻所未闻的机型,穿梭于地铁.公交.火车.乡间.大山-.. 信号"若隐若现,扑朔迷离" "我去!又crash了!" "唉,怎么又连不上

手把手教你做关键词匹配项目(搜索引擎)---- 第八天

第八天 话说小帅帅自从走进了淘宝开放平台这个迷雾森林,感觉这迷雾森林好大,正当他无所适从的时候. 一位悦耳动听的声音响起来了,甜甜的声音说道:亲,想通过这片森林吗,我将指引你前进. 小帅帅一听,那种感觉,身体不由自主的跟随这声音而去,突然一道强光闪过,啊..... 小帅帅惊醒了.小帅帅一看时间,我滴个天,这么晚了.就这样小帅帅从业一来第一次迟到. 其实小帅帅在平台里面琢磨了一个晚上,整个晚上其实也没琢磨个啥出来. 正当要到公司的时候,手机的铃声响起来了,一看是于老大的电话,接通电话. 于老大问候

手把手教你做JavaWeb项目:登录模块

现如今,无论是客户端还是移动端,无论是游戏登陆还是社交平台登陆,无处不在的“登陆”.那么你知道怎么制作吗?今天就为你娓娓道来: 用户登录 在各大信息管理系统中,登录功能是必不可少的,他的作用就是验证用户的身份,判断用户是否是本站的会员,只有会员才能访问当前系统 登录的实现步骤: 1.用户填写账号和密码,提交到后台2.后台获取到账号和密码后,将其发送到数据库中进行查询3.查询结果如果为null,说明用户填写的账号或者密码有误,应该回到登录页面并提示用户重新输入4.查询结果如果不为null,说明用户

手把手教你做关键词匹配项目(搜索引擎)---- 第三天

第三天 小王(运营总监)看到小丁丁整天都在淘宝.百度.魔方.拍拍上面淘关键词,每天花费的时间好长,工作效率又低,拿着这个借口来找到我. 说到:小帅帅,你看小丁丁每天都在淘宝.百度.魔方.拍拍上面淘关键词花费的时间好长,你能不能帮帮忙,看看能不能让系统自己做啦,这样可以节省好多人力,带来的效益多高.(0 其实就是为了掩饰他们懒惰 0) 小帅帅一听到可以带来的效益好高,王总还求着我呢 ,马上 两眼冒着星光,是该好好体现, 解决这个问题就可以体现出我的价值. 小帅帅拍着胸膛保证到:王总,这个小KS啦,

UWP Jenkins + NuGet + MSBuild 手把手教你做自动UWP Build 和 App store包

背景 项目上需要做UWP的自动安装包,在以前的公司接触的是TFS来做自动build. 公司要求用Jenkins来做,别笑话我,之前还真不晓得这个东西. 会的同学请看一下支持错误,不会的同学请先自行脑补,我们一步一步的来. 首先我们准备2个安装包,Jenkins,NuGet 都下载最新的好了. 1. 安装Jenkins,下一步下一步.安装好了会自动浏览器跳转到http://localhost:8080/ 如下图 按照提示去C:\Program Files (x86)\Jenkins\secrets

手把手教你做关键词匹配项目(搜索引擎)---- 第六天

第六天 小帅帅周五休息后,精神估计太旺盛了,周末两天就狂欢去了,酒喝高了,把一件重要的事儿给忘记了. 周一重新整装 刺骨上战场. 一来公司,小帅帅终于记得他要做的事情,就迫不及待的整理会议报告(工作总结). 1.上周工作任务: 1) 页面提交关键词到关键词词库 2) 文件导入到关键词词库 3) 自动抓取关键此到关键词词库 2.能力的提升 1) 学会了如何读csv文件 2)  学会了curl 3)  学会了Html Dom parse 3.下周工作任务: 1) 了解下关键词词库的应用 刚写到这儿,

手把手教你做关键词匹配项目(搜索引擎)---- 第七天

第七天 小帅帅拿回去仔细研究了一个晚上. 发现代码其实都是自己写的,就多了一些类,于老大还不是抄的我的代码,心里又鄙视了于老大一番. 其实每个人都有通病,写过程的总是会鄙视写面向对象的,因为他们没体会到面向对象是啥玩意,要让他们写好可得花上好几年的工夫. 小帅帅学编程的时候,明明知道有函数这一概念,知道函数的写法,但是实际上就算一个函数里面几百行代码,也不知道去提前多个函数出来,美其名约:你看我多厉害,几百行代码耶. 小帅帅心里虽然鄙视于老大,但是看到于老大的代码怎么感觉很清爽,一切都那么自然.

手把手教你做关键词匹配项目(搜索引擎)---- 第一天

第一天 收到需求,需求如下: 1. 收集关键词,构建关键词词库. 收到这个任务,第一想法,这还不简单吗? 马上动手创建一个关键词录入界面,保存到数据库. 第一步完成了,哈哈大笑了一天,没想到事情原来如此的简单. $keywords = $_POST["keywords"]; foreach($keywords as $keyword) { #save $keyword to database .............. } 手把手教你做关键词匹配项目(搜索引擎)---- 第一天

手把手教你做关键词匹配项目(搜索引擎)---- 第二十一天

客串:屌丝的坑人表单神器.数据库那点事儿 面向对象升华:面向对象的认识----新生的初识.面向对象的番外----思想的梦游篇(1).面向对象的认识---如何找出类 负载均衡:负载均衡----概念认识篇.负载均衡----实现配置篇(Nginx) 吐槽:现在欠的文章有面向对象的认识----类的转化.面向对象的番外---思想的梦游篇(2).负载均衡 ---- 文件服务策略.手把手教你做关键词匹配项目(搜索引擎).真心太多了,能不能让我休息一会儿. 第二十一天 起点:手把手教你做关键词匹配项目(搜索引擎