我不怕万人阻挡,只怕自己投降
一个新进前端小白实习僧的初次探索
在学校的时候写过几个静态页面、用过一些简单的JavaScript,写过一些基础的CSS,去应付课程项目,却也仅仅于此。
谁也没想到会阴差阳错的进入web前端这个行业。
俗话说:做一行爱一行
学习了一个多月,终于完成了一个相较于较为完整的demo,一个超市网页。完成了其中差不多完整的流程:登录->首页->商品详情页->购物车->商品搜索列表。
来点干货
-
模拟类似于京东中配送地址选择
/*html*/
<h3 class="fl">配送至:</h3>
<div class="u-addr fl"><span>北京 东城区 城区</span><i class="iconfont"></i></div>
<p>有货</p>
<div class="u-addrdetail none ">
<ul class="clearfix choose">
<li class="fl province hover"><span>北京</span><i class="iconfont"></i></li>
<li class="fl city"><span>朝阳区</span><i class="iconfont"></i></li>
<li class="fl area"><span>北苑</span><i class="iconfont"></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