一个新进前端小白实习僧的初次探索

我不怕万人阻挡，只怕自己投降

一个新进前端小白实习僧的初次探索

在学校的时候写过几个静态页面、用过一些简单的JavaScript，写过一些基础的CSS，去应付课程项目，却也仅仅于此。
谁也没想到会阴差阳错的进入web前端这个行业。

俗话说：做一行爱一行

学习了一个多月，终于完成了一个相较于较为完整的demo，一个超市网页。完成了其中差不多完整的流程：登录->首页->商品详情页->购物车->商品搜索列表。

来点干货

-

模拟类似于京东中配送地址选择

/*html*/
<h3 class="fl">配送至:</h3>
                    <div class="u-addr fl"><span>北京 东城区 城区</span><i class="iconfont">&#xe65b;</i></div>
                    <p>有货</p>
                    <div class="u-addrdetail none ">
                        <ul class="clearfix choose">
                            <li class="fl province hover"><span>北京</span><i class="iconfont">&#xe65b;</i></li>
                            <li class="fl city"><span>朝阳区</span><i class="iconfont">&#xe65b;</i></li>
                            <li class="fl area"><span>北苑</span><i class="iconfont">&#xe65b;</i></li>
                        </ul>
                        <div class="fl con block province">
                            <ul class="clearfix">
                                <li class="fl">北京</li>
                                <li class="fl">上海</li>
                                <li class="fl">天津</li>
                                <li class="fl">重庆</li>
                                <li class="fl">河北</li>
                                <li class="fl">山西</li>
                                <li class="fl">河南</li>
                                <li class="fl">辽宁</li>
                                <li class="fl">吉林</li>

                            </ul>
                        </div>
                        <div class="fl con none city">
                            <ul class="clearfix">
                                <li class="fl">朝阳区</li>
                                <li class="fl">海淀区</li>
                                <li class="fl">西城区</li>
                                <li class="fl">东城区</li>
                                <li class="fl">昌平区</li>
                                <li class="fl">平谷区</li>
                                <li class="fl">延庆县</li>
                            </ul>
                        </div>
                        <div class="fl con none area">
                            <ul class="clearfix">
                                <li class="fl">延庆镇</li>
                                <li class="fl">城区</li>
                                <li class="fl">康庄镇</li>
                                <li class="fl">八达岭镇</li>
                                <li class="fl">永宁镇</li>
                                <li class="fl">旧县镇</li>
                            </ul>
                        </div>
                    </div>

其中class=“u-addr”的这个div 显示选择后的地址信息，class=“u-addrdetail”这个div中的内容为一个tab页，来选择详细的地址信息。

/*css*/
.u-addr{
   border: 1px solid #4c4c4c;padding: 2px 5px;margin-left: 10px;}
.u-addrdetail{
   width:500px;background-color:#fff;border: 1px solid #4c4c4c;margin-left: 10px;position: absolute;margin-top: 29px;}
.u-addrdetail ul{
   border-bottom: 1px solid #d4d9de;margin: 0 22px;}
.u-addrdetail li{
   height: 30px;width:70px;line-height: 30px;text-align: center}
.u-addrdetail li:hover{
   color:#DA3434;}

/*js*/
$('.u-addr').hover(function(){
   
    $(this).next().next().show();
});
$('.u-addrdetail').hover(function(){
   
    $(this).show();
},function() {
   
        $(this).hide();
    }
);

- tab页效果

<div class="u-tab">
            <div class="u-tabtitle">
                <ul>
                    <li  class="fl">充話費</li>
                    <li  class="fl">充流量</li>
                </ul>
            </div>
            <div class="u-tabcontent">
                <div class="u-ipt">
                    <div class="fl u-title">手机号码：</div><input