奇酷CEO周鸿祎的互连网方法论——互连网思维篇

应用Sublime Text软件编制电子商务类网站静态格局首页

一定,奇酷CEO周鸿祎在互连网那么些行业里是二个不行有争议的人。但对此做产品以来,周鸿祎确实有友好独到的部分方法和套路。那是近年第二遍看《360公司董事长周鸿祎自述:作者的网络方法论》后,小编的感受。

   经过差不离一星期的就学,基本控制了div+css的用法之后,初叶了实战练兵。首先要做的就是要训练一下貌似电子商务网页的编制,我做的是下图效果的网页,是3个有关江苏特产的网页。如图:

电子商务 1

   
 拿到图片之后,首先要分析一下百分之百网页的构造,上图所示的网页稍微分析一下就足以见见具体分为多个部分,为尾部header,中间的广告ad_img,中间的主心骨内容main和底部的footer,当然具体的还足以分为很多有个别,那里关键看个人的习惯,所以在那就不一一写出来了,具体的会在背后的代码部分显得出来。

   
 个人感觉写代码不怎么难,紧借使您做一个网页的时候使用的艺术和思路,思路正确的话你的进程会大大的增加,那里作者只是吃了累累的教训,由于急于已毕那几个类型,小编就寻思了一下切实的布局就从头写代码了,闷头苦写了半天以往,突然意识和需要那真是相差八千0八千里,于是又起先埋头苦改,改了半天也没改出须求的那种效果。多亏了1人大神的带领,他说在得到品种然后不要急着去做,而是要分析一下切实的布局和笔触,把大概的概略做出来,然后再一步一步的写。还真是,第二遍重复做的时候,速度大大的加速,不到一会就把那么些网页做出来了,收获蛮多的,未来继续加油。!下边为具体的代码部分,网页的各样资料可以去自个儿的百度网盘下载:网页资料下载

css样式部分    
*{margin:0px;padding: 0px;
    }
    html,body{font-family: "微软雅黑";
    font-size: 14px;
    text-decoration: none;
}
    .all{
        width: 100%;
        min-width: 1000px;
    }
    .header{
        width: 100%;
        border-bottom: 4px solid #176fbb;
    }
    .header .head{
        width: 1000px;
        margin:0 auto;
        overflow: hidden;
    }
    .head #logo{
        width: 140px;
        height: 113px;
        float: left;
        background:url(images/logo.png) 8px 14px no-repeat;
    }
    .head #indexlogo{
        width: 21px;
        height: 21px;
        float: left;
        margin-left: 56px;
        margin-top: 83px;
        background-image: url(images/indexlogo.png);
    }
    .head #phone{
        width: 141px;
        height: 22px;
        float: left;
        margin-left: 196px;
        margin-top: 19px;
        background-image: url(images/telephone.png);
    }
    .head_nav{
        float: left;
        height: 19px;
        list-style: none;
        margin-top: 20px;
        margin-left: 14px;
    }

    .head .head_nav a{
        color: #3d3d3d;
        line-height: 19px;
        text-align: center;
        text-decoration: none;
    }
    .head_nav li{
        border-left:2px solid black;
        float: left;
        padding:0 15px;
    }
    .head_nav .li3{
        padding: 0 14px 0 0;
    }
    .head_nav .li3 img{
        float: left;
        margin-left: 15px;
        margin-top: -5px;
    }
    .head_nav .li3 a{
        float: left;
        margin-left: 7px;
    }
    .head_nav .li3 span{
        font-size: 12px;
        color:white;
        float: left;
        line-height: 19px;
        margin-left: -19px;
    }

    .head .search{
        float: left;
        border:1px solid black;
        width: 181px;
        height: 27px;
        margin-top: 16px;
        border-radius: 0px 14px 14px 0px;
    }
    .head .search img{
        float: right;
        margin-top: 4px;
        margin-right: 10px;
    }
    .head .search .input1{
        width: 146px;height: 27px;outline: 0;
        border:0;border-right: 1px solid black;
    }
    .headmenu{
        font-weight: bold;
        margin-top: 42px;
        margin-left: 38px;
        height:30px;
        list-style: none;
        float: left;
    }
    .headmenu li{
        float: left;
        margin-right: 37px;
        height:21px;

    }
    .headmenu li a{
        font-size: 18px;
        line-height: 21px;
        color: #3d3d3d;
        text-decoration: none;
    }
    .headmenu li a:hover{
        font-size: 18px;
        display: block;
        line-height: 21px;
        color: rgb(23,111,187);
    }
    .adress{
        height: 53px;
        width: 1000px;
        margin:0 auto;
    }
    .adress .adress1{
        width: 152px;
        height: 53px;
        text-align: center;
        line-height: 53px;
        float: left;
    }
    .adress .adress1 a{
        color: #3d3d3d;
        text-decoration: none;
    }
    .adress .adress1 a:hover{
        color: blue;
        text-decoration: none;

    }
    .image{
        width: 100%;
        height: 350px;
        background: url(images/ad.png) center center no-repeat;
    }
    .gift_img{
        width: 1000px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        height: 68px;
    }
    .gift_img .img{
        width: 155px;
        height: 38px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
    }
    .main{
        width: 1000px;
        height: 619px;
        margin:0px auto;
        border-bottom: 1px solid #898989;
    }
    .main #main1,.main #main2,.main #main3,.main #main4,.main #main5,.main #main6{
        background-color:rgb(242,241,241);
        width: 485px;
        height: 160px;

    }
    .main #main1,.main #main3,.main #main5{
        float: left;
    }
    .main #main2,.main #main4,.main #main6{
        float: right;
    }
    .main #main3,.main #main4,.main #main5,.main #main6{
        margin-top: 30px;
    }
    .main .text{
        width: 198px;
        color: #3d3d3d;
        float: right;
        margin-top: 27px;
        margin-right: 30px;
    }
    .main .text .span1{
        font-weight: bold;
        width: 198px;
        font-size: 16px;
        line-height: 16px;
        color: #3d3d3d;
        display: block;
    }
    .main .text .span2{
/*        font-weight: bold;*/
        width: 198px;
        font-size: 14px;
        line-height: 14px;
        color: #3d3d3d;
        display: block;
        margin-top: 17px;
    }
    .main .text .span3{
        width: 58px;
        font-size: 14px;
        line-height: 12px;
        color: #3d3d3d;
        margin-top: 35px;
        float: left;
    }
     .main .text .span4{
        width: 58px;
        font-size: 12px;
        line-height: 12px;
        color: #3d3d3d;
        margin-left: 30px;
        margin-top: 35px;
        float: left;
    }
        .main .text .span3 a{
        width: 16px;
        font-size: 12px;
        line-height: 12px;
        float: left;
        margin-top: -2px;
    }
     .main .text .span4 a{
        width: 16px;
        font-size: 12px;
        line-height: 12px;
        float: left;
        margin-top: -2px;
    }

    .main .number{
        width: 1000px;
        height: 73px;
        float: left;

    }
    .main .number ul{
        list-style: none;
        margin-left: 371px;
        margin-top:30px; 
        width: 280px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }
    .main .number ul .li1{
        float: left;
        margin-right: 14px;
    }
    .main .number ul .li2,.main .number ul .li6{
        float: left;
        margin-right: 8px;
        font-size: 12.13px;
    }   
    .main .number ul .li3{
        float: left;
        margin-right: 8px;
    }
    .main .number ul .li4{
        float: left;
        margin-right: 11px;
        font-size: 12.13px;
    }
    .main .number ul .li5{
        float: left;
        margin-right: 11px;
        background-color: #666666;
        width: 30px;
        height: 20px;
        color: white;
    }
    .main .number ul .li7{
        float: left;
        margin-right: 10px;
    }
    .main .number ul .li8{
        float: left;
        margin-right: 12px;
        font-size: 12.13px;
    }
    .main .number ul .li9{
        float: left;
        margin-right: 0px;
    }
    .footer{
        margin-top: 30px;
        width: 100%;
        border-bottom: 1px solid #fff;
        background: #023c4d;
    }
    .footer .con{
        height: 178px;
        width: 1000px;
        margin: 0 auto;
    }

    .footer .con .ul1{
        width: 75px;
        float: left;
        margin-left: 102px;
        margin-top: 22px;
    }
    .footer .con .ul2,.footer .con .ul3,.footer .con .ul4{
        width: 75px;
        float: left;
        margin-left: 78px;
        margin-top: 22px;
    }
    .footer .ul1 ul,.footer .ul2 ul,.footer .ul3 ul,.footer .ul4 ul{
        width: 75px;
        color: white;
        list-style: none;
    }

    .footer  .ul1 ul li,.footer  .ul2 ul li,.footer .ul3 ul li{
        font-size: 14px;
        margin-top: 15px;
        line-height: 14px;
    }

    .footer  .ul1 ul .li1,.footer  .ul2 ul .li1,.footer .ul3 ul .li1,.footer .ul4 ul .li1{
        font-size: 18px;
        margin-top: 0px;
        line-height: 18px;
    }
    .footer .ul4 ul li{

        margin-top: 18px;
    }
    .footer .con .ul5{
        width: 172px;
        margin-left: 95px;
        margin-top: 22px;
        float: left;
    }
    .footer .con .ul5 ul{
        width: 172px;
        list-style: none;
        color: rgb(255,255,255);
    }
    .footer .con .ul5 .li1{
        font-size: 28px; 
        line-height: 28px;   
        font-weight: bold;
    }
    .footer .con .ul5 .li2{
        font-size: 18px; 
        line-height: 18px; 
        margin-top: 15px;
        letter-spacing: 5px;
    }
    .footer .con .ul5 .li3{
        font-size: 18px; 
        line-height: 18px; 
        margin-top: 12px;
    }
    .footer .con .ul5 .li4{
        margin-top: 22px;
        height: 23px;
    }
    .footer_copy{
        width: 100%;
        background: #023c4d;
    }
    .copy{
        margin:0 auto;
        width: 1000px;
        height: 57px;
        text-align: center;
        line-height: 57px;
        color: #d0d0d0;
    }




html主体部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伴手礼</title>
    <link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<div class="all">
  <div class="header">
    <div class="head">
        <div id="logo"></div>
        <div id="indexlogo"></div>
        <div id="phone"></div>
        <!-- 登录注册 -->
        <ul class="head_nav">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li class="li3"><img src="images/paggage.png" alt="pag">12<a href="#">行李箱</a></li>                           
        </ul>
        <div class="search">
            <input class="input1" type="text" name="" value="">
            <a href="###"><img src="images/serch.png"></a>
        </div>
        <!-- 菜单 -->
        <ul class="headmenu">
            <li><a href="#" target="_blank">第一次</a></li>
            <li><a href="#" target="_blank">目的地</a></li>
            <li><a href="#" target="_blank">自定行程</a></li>
            <li><a href="#" target="_blank">游记</a></li>
            <li><a href="#" target="_blank">特产</a></li>
            <li><a href="#" target="_blank">优惠</a></li>
            <li><a href="#" target="_blank">环岛巴士</a></li>
        </ul>
    </div>
  </div>
        <!-- 所在地址 -->
    <div class="adress">
        <p class="adress1"><a href="###">首页</a> > <a href="###">特产</a> > <a href="###">伴手礼</a></p>
    </div>
        <!-- 广告图 -->
    <div class="image"></div>
        <!-- 伴手礼logo -->
    <div class="gift_img">
       <div class="img"><a href=""><img src="images/gift.png" alt="gift"></a></div>
    </div>
        <!-- 主要内容 -->
    <div class="main">
        <div id="main1">
            <a href="#"><img src="images/photo1.png" alt="photo1"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main2">
            <a href="#"><img src="images/photo2.png" alt="photo2"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main3">
            <a href="#"><img src="images/photo3.png" alt="photo3"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main4">
            <a href="#"><img src="images/photo4.png" alt="photo4"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main5">
            <a href="#"><img src="images/photo1.png" alt="photo5"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main6">
            <a href="#"><img src="images/photo1.png" alt="photo6"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <!-- 所在页数 -->
        <div class="number">
            <ul >
                <li class="li1">上一页</li>
                <li class="li2">1</li>
                <li class="li3">.....</li>
                <li class="li4">12</li>
                <li class="li5">13</li>
                <li class="li6">14</li>
                <li class="li7">.....</li>
                <li class="li8">40</li>
                <li class="li9">下一页</li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="con">
            <div class="ul1">
                <ul>
                    <li class="li1">关于遛湾</a></li>
                    <li>公司简介</li>
                    <li>联系我们</li>
                    <li>诚聘英才</li>
                    <li>网站地图</li>
                </ul>
            </div>
            <div class="ul2">
                <ul>
                    <li class="li1">帮助中心</li>
                    <li>赴台属性</li>
                    <li>联系我们</li>
                    <li>遛湾玩法</li>
                    <li>常见问题</li>
                </ul>
            </div>
            <div class="ul3">
                <ul>
                    <li class="li1">网站条款</li>
                    <li>服务条款</li>
                    <li>免责声明</li>
                </ul>
            </div>
            <div class="ul4">
                <ul>
                    <li class="li1">网站条款</li>
                    <li><a href="#"><img src="images/weichat.png" alt="weichat"></a></li>
                </ul>
            </div>
            <div class="ul5">
                <ul>
                    <li class="li1">400 820 8820</li>
                    <li class="li2">周一至周日</li>
                    <li class="li3">9:00~20:00</li>
                    <li class="li4"><a href="#"><img src="images/ask.png" alt="ask"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer_copy">
        <div class="copy">Copyright &copy; 2013-2014 www.6waner.cn All Right Reserved. 京ICP备11</div>
    </div>
</div>
</body>
</html>

     

奇酷CEO周鸿祎在本书中谈的始末很多,洋洋洒洒一本书。在本篇里,统计一下360公司创办者周鸿祎对网络思维的局部意见(其实就是读书笔记,偶尔有一部分本身的感想)。

一、趋势是其余集团不能战胜的。

其余公司都得以找最强的竞争对手打,但有二个挑战者你是打可是的,那就是方向。趋势一旦突发,就不会是一种线性的提升。它会蓄积力量于无形,最终突然发生出雪崩效应。任何不情愿更改的力量都会在雪崩面前被损毁,被市集边缘化。

混沌理论认为在混沌系统中,开头标准非凡一线的变化,经过持续加大,对其前途情况会促成极其巨大的影响。混沌理论最形象的比喻是“蝴蝶效应”:三只亚洲亚马孙河流域热带雨林中的蝴蝶,偶尔扇动几下翅膀,可以在两周之后引起米利坚得克萨斯州的一场风暴。

大势很多时候就是那样的一种蝴蝶效应。如若您回想不深切的话,想想移动互连网的上进进程。想想电商的向上路径。多数时候,大家会依照本身的经历举行预测,认为世界会像后日来得的这样线性发展。但世界却不是那般运转的。

二、音讯不对称的清除就是互连网革命。

所谓互连网革命,就是主顾具有了更加多的知情权和挑选权。在网络上,由于新闻量大,音讯流动快,而且触及的限定广,那样新闻很难被装进一个黑匣子里,因而就能最大限度地排除消息不对称。

因为那种音讯不对称的消除,很多长逝的公司老板和成品研发格局都不再适用了。对于店铺的话,任何一回悲哀的反射,和过去对照,都大概带来很多倍的迫害,甚至让公司覆灭。因而,假若过去的商号是以保密、不透明、以团结为中央的来发展来说,今后的店堂就亟须以透明、公开、以用户为主干来发展。

网络干掉了好多行业。它是一个价值的创制者,但它首先是2个市值的毁灭者,它在毁灭很多观念的商业格局,何人离互连网新近,网络就先毁灭什么人。在毁灭的还要,它再去建立新的商业形式。在如此2个疾速生成的一时,逐个公司实际都或然随时变成古板商行。后天你觉得温馨很先进,前天您一觉醒来就发现本身落后了。

三、网络的商业格局是何许的?

什么样是商业格局?其实,商业形式不是致富形式。它至少含有了四上边内容:产品形式、用户方式、推广格局,最终才是入账方式,相当于怎么去挣钱。一句话,商业情势就是您能提供什么样的产品,给什么的用户创设如何的市值,在创造用户价值的进度中,用哪些的办法拿到商业价值。

尚无用户价值,就平素不商业价值。是用户,而不是客户。用户的定义在作者看来就是那贰个你能长时间提供一种服务,能长久让她感知你的存在,能长久跟你保持一种关系的人。你唯有在互连网上积累了十足多的用户,才有力量把内部一些用户转成你的客户。没有用户,就没有客户。用户是互联网商业方式的基础。

免费是时下互连网商业格局的底蕴。网络的免费是真免费,真免费实际上是一种职分的免费。就是说,即便不买商行提供的收款服务,你也一律能享用它高格调的免费服务。

虽说互连网的商业形式是基于免费,但并不是说一免费就灵。免费不是万灵药,除了免费,汇集海量的用户基数还亟需好的产品,可以为用户消除难点,而且提供超级的用户体验。大家判断一款产品好倒霉,不是看它能帮集团赚多少钱,而是看能协理用户消除什么难题,更进一步,在为用户解决难题的进度中,用户是否觉得容易、方便,甚至能博取一种愉悦感。

明天的网络产品即使变化莫测,但自己觉着在网络上赢利格局只有三种。

率先种形式尤其古板,就是运用互连网卖东西。卖真实的货品,我们叫它电子商务;卖基金、股票等理财产品,就叫网络金融;如果卖SPA(桑拿)、虚拟的劳务、饭馆的降价券,可以叫O2O。其实那都以一类格局,即以网络为平台,做传统职业,只是表达了互连网的特点,就是网聚人的力量。

电子商务,其次种形式是凭借广告受益。就是当你的服务不或者纯利的时候,倘诺有丰硕多的眼珠,有丰盛多的用户,你可以向他们推荐一些任何的制品和服务,实际上那就是广告,就跟免费看电视,但电视机里有广告的概念一样。

其三种情势是以网游为代表的增值服务。什么是增值服务?其实很简短。只若是在互连网上每种人都亟待的劳务,大家就认为它是基础服务,基础服务一定是免费的,那样的话不会形成价值歧视。就是说,只要那种劳动是各种人都一定要用的,小编必然免费提供,而且是任务免费。增值服务不是所有人都要求的,那么些比例只怕会一定低,它只是百分之几仍旧更少比例的人需求,所以那种服务一定要收费。绝半数以上人不须要那种增值服务,也不愿意付费,但她们还是可以一连享受免费服务。举个例子,在二个网游里面,有1万个“屌丝”都以在免费玩,突然来了1个高富帅,他觉得自身特有,要当妹夫,花好多钱买匹马,买把剑,还要给“屌丝”发工钱,挣这么些人的钱就是增值服务。不乐意花钱的人可以三番五次在玩耍里做多少个惨淡的挖矿人,恐怕种粮食的人。

四、硬件的网络化

智能手机、平板总结机在内,硬件的互连网化分为以下“四化”:

第一是商业方式互连网化。《连线》杂志主编凯文·凯利早就预知说,现在的硬件一定是免费的。当然,达到硬件免费须求三个进度,在神州更是如此。但硬件价格下挫,向零利润方向前进,至少在美利坚同盟国如此的网络发达国家早已改为趋势。固然运动终端的利润趋近于零,但经过内置的各类增值服务,同样可以建立起互连网化的商业形式。

其次是成品体验互连网化。过去的手机紧假使用来打电话、发短信的,内置的玩耍也非凡简单。但现行,智能手机就是一部小电脑,用户频仍地下载软件,而且软件也像在个人电脑上一样便捷地展开立异。由此,智能手机像个人电脑一样,越来越钟情用户体验。与硬件厂商相比,互连网商户能更好地握住用户对成品体验的须要。

其三是商场推广的互联网化。古板的无绳电话机推广格局通过卖点策划和大气的广告投放,达到吸引用户、接触用户的目标。以后,进入网络时期,产品的松开要基于好的出品体验,依靠口碑举行放大传播。作为新媒体,互连网的SNS特点打乱了价值观广告对人流的分割方式,提供了一种低本钱的松手格局。

第四是产品销售的互连网化。网络既是媒体传播平台,也是电子商务平台。电子商务是扁平化的销售方式,压缩了中档渠道的陷落费用。

完。

自小编的稿子也会在微信公众号中创新,大家可以关怀群众号“iamyueshanqiu”来订阅。

Leave a Comment.