zoukankan      html  css  js  c++  java
  • 使用jquery.layout.js构建页眉/页脚/左侧导航/中间展示内容的网页结构

    背景:

      快速将一个页面分成几个部分,在导航和页眉的位置放置公用的元素。

    准备:

      jquery.layout.js

    首先,向页面中引入如下js文件和css文件,代码:

    1 <link href="~/Resource/Css/Site.css" rel="stylesheet" />
    2 <link href="~/Resource/Script/jquery.layout/jquery.layout.css" rel="stylesheet" />
    3 <script src="~/Resource/Script/jquery.js"></script>
    4 <script src="~/Resource/Script/jquery.layout/jquery.layout.js"></script>

    然后,在指定的视图页面中,添加如下四个div元素,注意各div元素的class。

    1      <div class="ui-layout-north" style="padding-left:20px;padding-top:10px;height:38px;background-color:#C00">
    2             北山北
    3         </div>
    4     <div class="ui-layout-south">南山南</div>
    5     <div class="ui-layout-west">西山西</div>
    6     <div class="ui-layout-center">
    7         中间有谷堆
    8     </div>

    最后添加如下JS代码:

    1     $(function () {
    2         $("body").layout();
    3     })

    编译并运行,效果图如下:

    只是截取了网页的一部分。

  • 相关阅读:
    vue axios创建实例
    vue axios全局配置
    vue axios并发请求
    vue axios HTTP 库
    vuex actions异步操作
    vuex getters
    Go并发控制--Channel篇
    UVA10228 A Star not a Tree?
    P1395 会议
    P1337 [JSOI2004]平衡点 / 吊打XXX
  • 原文地址:https://www.cnblogs.com/SharpL/p/4899192.html
Copyright © 2011-2022 走看看