ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-03-20 11:02:58  阅读：149  来源： 互联网

标签：footer 模块化 height width nav 公共 0px margin cv


模块化思想

  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>

标签：footer,模块化,height,width,nav,公共,0px,margin,cv
来源： https://blog.csdn.net/qq_53167080/article/details/115023755

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有