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

最新推荐文章于 2022-09-16 13:07:34 发布

SosoYuY

最新推荐文章于 2022-09-16 13:07:34 发布

阅读量2.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： web前端初探文章标签： web前端 css javascript 前端

本文链接：https://blog.youkuaiyun.com/u010202153/article/details/49682911

这篇博客记录了一位前端新手实习生初次尝试模拟京东配送地址选择、实现tab页效果、购物车商品数量增减、轮播图以及登录界面输入提示的过程。分享了具体代码实现和遇到的问题，提供资源链接供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

在学校的时候写过几个静态页面、用过一些简单的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><