没办法，哈哈，以后一段时间，如果公司没有招到合适的运维研发，

啥啥都要我一个人先顶上了~~~：）

也好，可以让人成长。

UIKIT,BOOTSTRAP之类的前端，搞一个是有好处的，我们以前即然是用了UIKIT，那我也跟上吧。

以前可以找到中文网站，找个BOTTON之类的，而现在，就从网页的大体结构入手吧。

嘿嘿，UIKIT的官网就是一个好的CASE哈。。

以下就是一个典型的大版标签：

<div class="tm-middle">
　　<div class="uk-container uk-container-center">
　　　　<div class="uk-grid" data-uk-grid-margin">
　　　　　　<div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

大约第一行，定义网站第一级元素。比如有NAV,TM-MIDDLE,TM-FOOTER之类。

第二行，定义容器及对齐规则。这个容器看来容量大哟，所以仅次于分类框架。

第三行，定义网格，这就到了比较具体的网格风格了，这个好像还有高度对齐的意思，不十分了解。。

第四行，定义10网格的分隔宽度。（1-4，3-4之类的）

那么，最后，我测试（抄的）如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <title>test</title>
  7.   <link rel="stylesheet" href="css/uikit.min.css" />
  8.   <link rel="stylesheet" href="css/docs.css">
  9.   <script src="js/jquery-2.1.4.min.js"></script>
  10.   <script src="js/uikit.min.js"></script>
  11. </head>
  12. <body class="tm-background">
  13.  
  14.   <nav class="tm-navbar uk-navbar uk-navbar-attached">
  15.     <div class="uk-container uk-container-center">
  16.         <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="data:images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
  17.         <ul class="uk-navbar-nav uk-hidden-small">
  18.             <li><a href="documentation_get-started.html">开始使用</a></li>
  19.             <li class="uk-active"><a href="core.html">核心组件</a></li>
  20.             <li><a href="components.html">附加组件</a></li>
  21.             <li><a href="customizer.html">定制工具</a></li>
  22.             <li><a href="../showcases/index.html">案例展示</a></li>
  23.             <li><a href="tutorials.html">视频教程</a></li>
  24.         </ul>
  25.         <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="data:images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>
  26.     </div>
  27.   </nav>
  28.  
  29.   <div class="tm-middle">
  30.     <div class="uk-container uk-container-center">
  31.       <div class="uk-grid" data-uk-grid-margin">
  32.         <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">
  33.           <ul class="tm-nav uk-nav" data-uk-nav>
  34.               <li class="uk-nav-header">初学者</li>
  35.               <li class="uk-active"><a href="documentation_get-started.html">开始使用</a></li>
  36.               <li><a href="documentation_how-to-customize.html">如何定制</a></li>
  37.               <li><a href="documentation_layouts.html">布局示例</a></li>
  38.               <li class="uk-nav-header">开发者</li>
  39.               <li><a href="documentation_project-structure.html">项目结构</a></li>
  40.               <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
  41.               <li><a href="documentation_create-a-theme.html">创建主题</a></li>
  42.               <li><a href="documentation_create-a-style.html">创建样式</a></li>
  43.               <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
  44.               <li><a href="documentation_javascript.html">JavaScript</a></li>
  45.               <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
  46.           </ul>
  47.  
  48.           </div>
  49.  
  50.           <div class="tm-main uk-width-medium-3-4">
  51.             <article class="uk-article">
  52.               <h1>开始使用</h1>
  53.             </article>
  54.           </div>
  55.           </div>
  56.         </div>
  57.       </div>
  58.     </div>
  59.  
  60.     <div class="tm-footer">
  61.       <div class="uk-container uk-container-center uk-text-center">
  62.  
  63.           <ul class="uk-subnav uk-subnav-line uk-flex-center">
  64.               <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
  65.               <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
  66.               <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
  67.               <li><a href="https://twitter.com/getuikit">Twitter</a></li>
  68.           </ul>
  69.  
  70.           <div class="uk-panel">
  71.               <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
  72.               <a href="../index.html"><img src="data:images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
  73.           </div>
  74.  
  75.       </div>
  76.   </div>
  77.  
  78. </body>
  79. <html>

UIKIT网页基本结构学习的更多相关文章

  1. 机器学习&数据挖掘笔记_24（PGM练习八：结构学习）

    前言: 本次实验包含了2部分:贝叶斯模型参数的学习以及贝叶斯模型结构的学习,在前面的博文PGM练习七:CRF中参数的学习 中我们已经知道怎样学习马尔科夫模型(CRF)的参数,那个实验采用的是优化方法, ...

  2. seo之google rich-snippets丰富网页摘要结构化数据（微数据）实例代码

    seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...

  3. Linux 目录结构学习与简析 Part2

    linux目录结构学习与简析 by:授客 QQ:1033553122 ---------------接Part 1-------------- #1.查看CPU信息 #cat /proc/cpuinf ...

  4. Linux 目录结构学习与简析 Part1

    linux目录结构学习与简析 by:授客 QQ:1033553122 说明: /             linux系统目录树的起点 =============== /bin      User Bi ...

  5. html网页基本结构

    <!DOCTYPE> 不是 HTML 标签.它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的. HTML5 DOCTYPE 的 HTML 文档类型如下: <!DOCT ...

  6. 【pwn】学pwn日记（堆结构学习）

    [pwn]学pwn日记(堆结构学习) 1.什么是堆? 堆是下图中绿色的部分,而它上面的橙色部分则是堆管理器 我们都知道栈的从高内存向低内存扩展的,而堆是相反的,它是由低内存向高内存扩展的 堆管理器的作 ...

  7. C语言获取网页源代码的学习所得

    研究了一天这个玩意感觉挺有意思的. 刚开始是什么都不懂,现在写出来一段代码感觉略微有点意思了. 下面我分享一下学习过程和自己的理解. 整体过程大概就是如下情况: 先搜了一下别人的写这个东西的代码. 研 ...

  8. HTML5的结构学习(3) --- 综合运用

    前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读 ...

  9. HTML5的结构学习(2) --- 新增的非主体结构元素

    除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...

随机推荐

  1. StyleCop安装及配置

    How to modify the default new class template for C# in Visual Studio 2008 or 2010? 可参考博客: http://www ...

  2. java内存分块

     运行时数据区域 Java虚拟机在执行Java的过程中会把管理的内存划分为若干个不同的数据区域.这些区域有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,而有的区域则依赖线程的启 ...

  3. java.lang.IllegalStateException: You need to use a theme.appcompat theme (or descendant) with this activity

    错误描述:java.lang.IllegalStateException: You need to use a theme.appcompat theme (or descendant) with t ...

  4. Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW _TASK flag.

    在Activity中使用startActivity()方法不会有任何限制,因为Activity重载了Context的startActivity()方法.但是如果是在其他地方(如Widget或Servi ...

  5. 安装完oracle重新启动后报ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务（重启前正常）

    安装完oracle重新启动后报ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务(重启前正常) 刚安装完后用plSql登录正常. 在dos命令行下 输入  sqlplus 用户 ...

  6. 摘录android工具类

    import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.Pac ...

  7. webstorm的默认project编码为系统编码GBK.

    使用新的IDE,而不会设置,会给你带来灾难. 如下为我是用webstorm时遇到的文件编码问题. 纳闷很久,终于发现是IDE的设置问题. 参考

  8. zoj 3686 A Simple Tree Problem （线段树）

    Solution: 根据树的遍历道的时间给树的节点编号,记录下进入节点和退出节点的时间.这个时间区间覆盖了这个节点的所有子树,可以当做连续的区间利用线段树进行操作. /* 线段树 */ #pragma ...

  9. python 自动化之路 day 08 面向对象进阶

    面向对象高级语法部分 经典类vs新式类 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 面向对象高级语法部分 经典类vs新式类 把下面代码用python2 和python3都执行一下 1 2 ...

  10. ubuntn svn 安装 配置

    参考文章  http://zhan.renren.com/itbegin?gid=3602888498033631485&checked=true 上面的文章说得很详细 sudo apt-ge ...