公共头公共尾的模块化思想（便于修改代码，减少cv）

2024-02-21 22:42:22

模块化思想

  1. 小伙伴们，在我们写项目的时候，是不是会发现有许多地方样式功能都是一样的呢，比如页面的头部以及尾部或者是右侧的定位部分。
  2. 按照我们以前可能会这样写的，将这些样式布局一样的代码在每个用到的地方复制一下。但是如果有100页面的头部和尾部是相同的呢？你也一样复制嘛？
  3. 可能你复制起来会很爽，但是你有没有想过，突然有一天项目经理过来和你说，张三，这个尾部有一个字，想换掉。那你是不是裂开了。难道你还要打开每个页面，修改100次嘛？
  4. 这个时候，就需要有一个模块化的思想，这里可以用到JqAjax的load()方法。
  5. 这里load()方法原理是从服务器加载数据，并把返回的数据放置到指定的元素中。
  6. 也是只需一行代码就可以解决这个问题
$('.footer').load('./public/footer.html')
  1. 在需要公共头或者公共尾的html中创建一个div并赋一个类名 （html1），在另外一个html中书写css html js （html2），最后在需要公共头或者公共尾的html（html1）中书写上述代码，将文件引入至这个div中

注意事项：

  1. Jquery文件和js封装的方法文件引入的位置，如果你在（html2）文件中使用了Jq方法或js封装的方法，那需要先引入jq文件或js封装方法的文件，这样就不会出现获取不到元素的问题，代码从上往下执行的。
  2. footer中不用再写
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
    3.直接开干就完事了
    书写格式：
    <style type="text/css">
//书写css样式
</style>
<div class="footerWarp">
//书写html
</div>
<script>
//书写js代码
</script>
    4.必须使用服务器打开 才会显示，因为此方法为jquery中ajax的方法。

#总体代码：

index.html 主页：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2401084_3z4jojoiw5u.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2404100_4nmhn2a156e.css">
    <title>Document</title>
    <style>
        .content{
            width: 1190px;
            height: 800px;
            margin: 0px auto;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <!-- 公共头部文件 -->
    <div class="header"></div>
    <!-- 尾部结束 -->



    <!-- 中间需要写的内容 -->
    <div class="content"></div>
    <!-- 中间结束 -->




    <!-- 公共尾部文件 -->
    <div class="footer"></div>
    <!-- 尾部结束 -->
    
    <script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script>
        $('.header').load('header.html');
        $('.footer').load('footer.html')
    </script>
</body>
</html>

header头部文件：

<style>
    *{
    padding: 0px;
    margin: 0px;
}
a{
    cursor: pointer;
}
li{
    cursor: pointer;
    list-style: none;
}
body{
    width: 100%;
    height: 100%;
    background: rgb(242, 242, 242);
}
.container{
    width: 1190px;
    margin: 0px auto;
}
    /* 头部导航栏 */
#nav{
    height: 36px;
    width: 100%;
    background-color: #f5f5f5;
    line-height: 36px;
}
#nav .nav01{
    width: 1190px;
    margin: 0 auto;
}
#nav i{
    width: 15px;
    height: 15px;
    display: block;
    float: right;
}
#nav ul{
    height: 36px;
    float: left;
} 
#nav ul li{
    float: left;
    padding: 0px 5px;
}
#nav ul:nth-child(2){
    float: right;
    margin-left: 50px;
}
#nav ul:nth-child(2) span{
    float: left;
    margin: 0px 5px;
}
#nav ul .login_gift{
    position: relative;
    z-index: 5;
}
#nav .nav01 .login_gift .user_1{
    display: none;
    background-color: #fff;
    position: absolute;
    top: 35px;
    left: 0px;
    height: 60px;
    border: 1px solid lightgray;
    border-top: 0px;
}
#nav .nav01 .login_gift .user_1 li{
    width: 100%;
    height: 30px;
    padding: 0px;
    text-align: center;
    float: left;
    line-height: 30px;
}
#nav .nav01 .login_gift .user_1 li:hover{
    color: #f80;
    background-color: grey;
    cursor: pointer;
}
#nav .nav01 ul li .address{
    position: absolute;
    background-color: white;
    z-index: 10;
    width: 370px;
    height: 250px;
    left: 0px;
    top: 35px;
    padding: 10px;
    display: none;
}

#nav .nav01 ul li .address a{
    padding: 2px 10px 3px 10px;
    border: 1px solid gainsboro;
}
#nav .nav01 ul li .address .x{
    display: block;
    float: right;
    width: 8px;
    height: 14px;
    border: 0px;
    margin-top: -7px;
    padding: 5px;
    cursor: pointer;
}
#nav .nav01 ul li .address .citys span{
    width: 92px;
    height: 20px;
    line-height: 20px;
    margin-top: 3px;
    text-align: center;
    float: left;
}
</style>



<!-- 头部导航栏 -->
<div id="nav" class="container">

    <div class="nav01">
        <ul>
            <li>网站导航<i class="iconfont icon-xialajiantou"></i></li>
            <li>商家入驻<i class="iconfont icon-xialajiantou"></i></li>
            <li>客户服务<i class="iconfont icon-xialajiantou"></i></li>
            <li style="position: relative; cursor: pointer;" class="sz">
                <i class="iconfont icon-dizhi" style="float: left; margin-right: 5px;color: #f80;"></i>深圳<i class="iconfont icon-xialajiantou"></i>
                <div class="address">
                    <div class="caption">
                        <a>广东</a>
                        <a>请选择市</a>
                        <a class="x">X</a>
                    </div>
                    <div class="citys">
                        <!-- <span>广州</span>
                        <span>韶关</span>
                        <span>深圳</span>
                        <span>珠海</span>
                        <span>汕头</span>
                        <span>佛山</span>
                        <span>江门</span>
                        <span>湛江</span> -->
                    </div>
                </div>
            </li>
        </ul>
        
        <ul>
            <span class="login_gift">
                <a> 请登录  &nbsp;&nbsp;&nbsp;登录有礼</a>
                <!-- <ol class="user_1">
                    <li>账号管理</li>
                    <li class="exit">退出登录</li>
                </ol> -->
            </span>
            <!-- <span class="login_gift">
                <a><i class="iconfont icon-xialajiantou"></i></a>
                
                
            </span> -->
            <span>我的订单<i class="iconfont icon-xialajiantou"></i></span>
            <span>我的易购<i class="iconfont icon-xialajiantou"></i></span>
            <span>苏宁会员</span>
            <a href="car.html"><span><i class="iconfont icon-gouwucheman"></i>购物车<i class="iconfont icon-xialajiantou"></i></span></a>
            <span>易付宝</span>
            <span>企业采购</span>
            <span>手机苏宁<i class="iconfont icon-xialajiantou"></i></span>
        </ul>
    </div>

    
</div>

<script>

$('.sz').click(function () {
    $('.address').slideDown()
    // 渲染出所有省份的数据
    $.ajax({
        //请求数据地址
        url: "./json/city.json",
        //请求数据方式
        type: 'get',
        //请求数据格式
        dateType: 'json',
        async: true,
        success: function (json) {
            // 建立一个空字符串用于接收渲染数据的HTML结构
            var strHtml = ''
            // jq遍历json数据方法
            $.each(json, function (index, item) {

                strHtml += `<span>${item.text}</span>`
            })
            $('.citys').html(strHtml);
        }
    });

    console.log($('.citys span'))
    $('.citys span').click(function () {
        console.log(this)
        console.log(1)
    })

})
$('.x').click(function () {
    $('.address').slideUp()
    return false
})
</script>

footer尾部文件：

<style>
    /* 尾部文件 */
    .container{
        width: 1190px;
        margin: 0px auto;
    }
#footer{
    bottom: 0px;
    height: 310px;  
    text-align: center;
    margin-top: 10px;
    background: rgb(248, 248, 248);
    
}
#footer .footer_ti,#footer .footer_ti2{
    height: 25px;
    text-align: center;
    position:relative;
    margin: 0 auto;
}
#footer .footer_ti .p,#footer .footer_ti2 .p1{
    position: absolute;
    left:38%;
    transform: translate(-35%);
    line-height: 25px;
}
#footer .footer_ti .p a,#footer .footer_ti2 .p1 a{
    float: left;
    display: block;
    color: #666666;
    font-size: 12px;
    margin-top: 2px;
}
#footer .footer_ti .p a:hover,#footer .footer_ti2 .p1 a:hover{
    color: #f60;
    cursor: pointer;
}
#footer .footer_ti .p span,#footer .footer_ti2 .p1 span{
    display: block;
    float: left;
    padding: 0px 5px;
    height: 21px;
}
#footer .footer_ti2 p{
    left: 16.4%;
}
#footer .footer_ti3 p,#footer .footer_ti4 p,#footer .footer_ti5 p,#footer .footer_ti6 p,#footer .footer_ti7 p{
    height: 25px;
    line-height: 25px;
    color: #999;
}
#footer .footer_ti3 p{
    overflow: hidden;
}
#footer .footer_ti3 p i{
    vertical-align: -3px;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/register/gwab-icon.png) no-repeat 0px 0px;
}
#footer .footer_ti3 p span,#footer .footer_ti4 p span,#footer .footer_ti5 p span,#footer .footer_ti6 p span,#footer .footer_ti7 p span{
    width: 19px;
    height: 25px;
    display: inline-block;
}
#footer .footer_ti8 p{
    height: 25px;
    margin: 5px 0px 0px;
}
#footer .footer_ti8 p img{
    height: 25px;
    margin: 0px 5px;
}
</style>







<div id="footer" class="container">
    <div class="footer_ti">
        <div class="p">
            <a>苏宁互联</a><span>|</span>
            <a>苏宁金融</a><span>|</span>
            <a>苏宁支付</a><span>|</span>
            <a>PP视频</a><span>|</span>
            <a>红孩子</a><span>|</span>
            <a>苏宁物流</a><span>|</span>
            <a>手机苏宁</a><span>|</span>
            <a>零售云</a><span>|</span>
            <a>苏宁云</a><span>|</span>
            <a>知识产权举报</a><span>|</span>
            <a>投资者关系</a><span>|</span>
            <a>苏宁智能</a>
        </div>
    </div>
    <div class="footer_ti2">
        <div class="p1">
            <a>联系我们</a><span>|</span>
            <a>诚聘英才</a><span>|</span>
            <a>合作招商</a><span>|</span>
            <a>广 告平台</a><span>|</span>
            <a>苏宁联盟</a><span>|</span>
            <a>苏宁招标</a><span>|</span>
            <a>隐私政策</a><span>|</span>
            <a>用户体验提升计划</a><span>|</span>
            <a>股东会员认证</a>
        </div>
    </div>
    <div class="footer_ti3">
        <p>
            CopyrightO 2002-2021.苏宁易购集团股份有限公司版权所有 <span>|</span><i></i> 苏公网安备32010202010078号 <span>|</span> 苏ICP备
            10207551号-4
        </p>
    </div>
    <div class="footer_ti4">
        <p>
            合字B2-20180025 <span>|</span>合字A1.B1.B2-20180017<span>|</span> 出版物经营许可证新出发苏批字第A-243号 <span>|</span>
            互联网药品信息服务资格证书 (苏) -非经营性-2016-0005
        </p>
    </div>
    <div class="footer_ti5">
        <p>
            经营证照 <span>|</span> 网络文化经营许可证: 苏网文[2018] 10580-203号 <span>|</span> 互联网违法和不良信息举报邮箱: kfpt-yy@cnsuning.com
            <span>|</span> 举报电话: 02566996699-865948
        </p>
    </div>
    <div class="footer_ti6">
        <p>
            医疗器械网络交易服务第三方平台备案凭证- (苏) 网械平台备字(2018) 第00052号
        </p>
    </div>
    <div class="footer_ti7">
        <p>
            本网站直接或间接向消费者准销商品或者服务的商业宣传均属于"告”(包装及参数、 售后保障等商品信息除外)
        </p>
    </div>
    <div class="footer_ti8">
        <p>
            <img src="./img/wxrz.png" alt="">
            <img src="./img/chengxin.png" alt="">
            <img src="./img/unicom.png" alt="">
            <img src="./img/dianxin.jpg" alt="">
            <img src="./img/dianzizhizhao.png" alt="">
            <img src="./img/netsafe1.png" alt="">
            <img src="./img/netsafe2.png" alt="">
            <img src="./img/netsafe3.png" alt="">
        </p>
    </div>

</div>
上一篇：css固定footer到浏览器底部的方法


下一篇：【jq 分享】伪微信分享