手把手教你作手机婚恋网

时间  2019-11-19
标签 手把手 手机 婚恋 繁體版
原文   原文链接

上一节咱们已经讲过了手机网页布局中的一些开发经验，与布局的相关知识，若是不清楚的同窗但愿回头去看一下，如下的教程是基于掌握上节知识点的基础上来的，同时也是对手机网页制做的一个大概的讲解，建议把上节的知识点理清楚以后再继续阅读，上节连接地址javascript

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

目录html

一、阅读读者具有基础前端

二、网页布局思想java

三、总体布局的实现与顶部栏功能的实现jquery

四、相关页面的排版布局程序员

五、总体页面优化web

六、源码下载chrome

七、参考文章bootstrap

八、结尾

一、阅读读者具有基础

一、熟练的使用HTML和CSS

二、对HTML5和CSS3有必定的了解，这个没必要深刻

三、掌握JavaScript、jquery脚本语言

若是还不能具有以上基础的读者们建议大家仍是去网上找一下其余的一些相关的教学贴看一看，要否则可能会跟不上下面的学习了

二、网页布局思想

好了，如今咱们就来开始讲解一下网页布局，在作手机网页以前咱们应该在脑海中有一个大体的规划，也就是规划一个常规的网页须要有哪几部分构成的

一、头部栏

二、主题内容

三、固定底部栏

布局实现的代码以下：

 

<!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支持手机模式查看效果

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

对于这三块模块的布局，在如今巨大多数的网站中是固定的，可是对其实各个模块的自定义设计倒是不尽相同，因此在本次的教程中咱们的模块设计是

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

二、内容部分：因为这是一个搭建手机页面主体框架的教程，不是一个完整的项目，因此不添加内容部分

三、底部栏：底部栏咱们为了简单打算放上一个按钮

三、总体布局的实现与顶部栏功能的实现

咱们本次讲解的项目是以打造一个婚恋网结构为题材讲解的，咱们先新建一个项目其中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来获取

四、相关页面的排版布局

 因为整个项目可能会比较冗余，这里咱们就挑选几个功能进行讲解，其余的功能会在后面提供源代码供你们下载

这里咱们挑选比较有表明性的“全国”和底部栏进行更进一步的讲解，“全国”这个相信你们都会知道这个所要实现的功能是什么，底部栏“我也恋爱”要实现的是至关于注册的功能，其余的细节以下：

“全国”：跳转到相应页，相应页中有，省份、城市等信息，底部有肯定和取消按钮，右上角有一个红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();
    });
})

 

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

五、总体页面优化 

 上面咱们已经咱们已经基本上完成了网页基本的框架，其余的详细内容就不作补充了，可是在这里咱们还要对网页进行性能上的优化

一、对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也是能够进行代码压缩的，可是这两个通常不推荐你们压缩由于这两个涉及的是页面的效果可能会常常性的发生修改，因此压缩会对之后形成麻烦

二、懒加载

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

三、减小页面的HTTP请求

在页面加载的时候，网页的HTML、CSS、JavaScript、图片等其余的内容都会各自建立各自的HTTP请求，因此当页面的图片内容过多的时候建立的HTTP请求也会不少，因此咱们要可使用Gulp工具来生成CSS精灵图

四、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转码的字符串

这个就是咱们所要的找的

五、CDN加速

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

六、源码下载

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

七、参考文章

  网页性能优化

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

 八、结尾

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

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程