UIKIT网页基本结构学习
没办法，哈哈，以后一段时间，如果公司没有招到合适的运维研发，
啥啥都要我一个人先顶上了~~~：）
也好，可以让人成长。
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之类的）
那么，最后，我测试（抄的）如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="css/uikit.min.css" />
<link rel="stylesheet" href="css/docs.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/uikit.min.js"></script>
</head>
<body class="tm-background">
<nav class="tm-navbar uk-navbar uk-navbar-attached">
<div class="uk-container uk-container-center">
<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>
<ul class="uk-navbar-nav uk-hidden-small">
<li><a href="documentation_get-started.html">开始使用</a></li>
<li class="uk-active"><a href="core.html">核心组件</a></li>
<li><a href="components.html">附加组件</a></li>
<li><a href="customizer.html">定制工具</a></li>
<li><a href="../showcases/index.html">案例展示</a></li>
<li><a href="tutorials.html">视频教程</a></li>
</ul>
<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>
</div>
</nav>
<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">
<ul class="tm-nav uk-nav" data-uk-nav>
<li class="uk-nav-header">初学者</li>
<li class="uk-active"><a href="documentation_get-started.html">开始使用</a></li>
<li><a href="documentation_how-to-customize.html">如何定制</a></li>
<li><a href="documentation_layouts.html">布局示例</a></li>
<li class="uk-nav-header">开发者</li>
<li><a href="documentation_project-structure.html">项目结构</a></li>
<li><a href="documentation_less-sass.html">Less & Sass 文件</a></li>
<li><a href="documentation_create-a-theme.html">创建主题</a></li>
<li><a href="documentation_create-a-style.html">创建样式</a></li>
<li><a href="documentation_customizer-json.html">Customizer.json</a></li>
<li><a href="documentation_javascript.html">JavaScript</a></li>
<li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
</ul>
</div>
<div class="tm-main uk-width-medium-3-4">
<article class="uk-article">
<h1>开始使用</h1>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="tm-footer">
<div class="uk-container uk-container-center uk-text-center">
<ul class="uk-subnav uk-subnav-line uk-flex-center">
<li><a href="http://github.com/uikit/uikit">GitHub</a></li>
<li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
<li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
<li><a href="https://twitter.com/getuikit">Twitter</a></li>
</ul>
<div class="uk-panel">
<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>
<a href="../index.html"><img src="data:images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
</div>
</div>
</div>
</body>
<html>
UIKIT网页基本结构学习的更多相关文章
- 机器学习&数据挖掘笔记_24（PGM练习八：结构学习）
前言: 本次实验包含了2部分:贝叶斯模型参数的学习以及贝叶斯模型结构的学习,在前面的博文PGM练习七:CRF中参数的学习 中我们已经知道怎样学习马尔科夫模型(CRF)的参数,那个实验采用的是优化方法, ...
- seo之google rich-snippets丰富网页摘要结构化数据（微数据）实例代码
seo之google rich-snippets丰富网页摘要结构化数据(微数据)实例代码 网页摘要是搜索引擎搜索结果下的几行字,用户能通过网页摘要迅速了解到网页的大概内容,传统的摘要是纯文字摘要,而结 ...
- Linux 目录结构学习与简析 Part2
linux目录结构学习与简析 by:授客 QQ:1033553122 ---------------接Part 1-------------- #1.查看CPU信息 #cat /proc/cpuinf ...
- Linux 目录结构学习与简析 Part1
linux目录结构学习与简析 by:授客 QQ:1033553122 说明: / linux系统目录树的起点 =============== /bin User Bi ...
- html网页基本结构
<!DOCTYPE> 不是 HTML 标签.它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的. HTML5 DOCTYPE 的 HTML 文档类型如下: <!DOCT ...
- 【pwn】学pwn日记（堆结构学习）
[pwn]学pwn日记(堆结构学习) 1.什么是堆? 堆是下图中绿色的部分,而它上面的橙色部分则是堆管理器 我们都知道栈的从高内存向低内存扩展的,而堆是相反的,它是由低内存向高内存扩展的 堆管理器的作 ...
- C语言获取网页源代码的学习所得
研究了一天这个玩意感觉挺有意思的. 刚开始是什么都不懂,现在写出来一段代码感觉略微有点意思了. 下面我分享一下学习过程和自己的理解. 整体过程大概就是如下情况: 先搜了一下别人的写这个东西的代码. 研 ...
- HTML5的结构学习(3) --- 综合运用
前面学习了HTML5新增的主体结构元素和新增的非主体结构元素, 而这里我们来学习如何去综合的运用这些新增元素. 1.大纲 HMTL5元素的关键就是将显示内容和便签类型紧密相关,提高了代码的语义化和可读 ...
- HTML5的结构学习(2) --- 新增的非主体结构元素
除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...
随机推荐
- 【亲测可用】MySQL 4.1迁移到MySQL 5.0版本的中文乱码问题解决
核心:先导出结构,再导出数据. 结构最好使用myphpadmin导出.使用mysqldump导出的可能会导致一些问题. ---------------以下为转载---------------- 在生成 ...
- 20160127 linux 学习笔记
Linux学习笔记第一天 Linux基本介绍 Linux的起源和发展: 简单说linux是一种操作系统,可以安装在包括服务器.个人电脑,乃至PDA.手机.打印机等各类设备中. 起源: Linux起源于 ...
- nyoj349 poj1094 Sorting It All Out(拓扑排序)
nyoj349 http://acm.nyist.net/JudgeOnline/problem.php?pid=349poj1094 http://poj.org/problem?id=10 ...
- ANDROID_SDK_HOME设置
创建.删除和浏览AVD之前,通常应该先为Android SDk设置一个环境变量:ANDROID_SDK_HOME,该环境变量的值为磁盘上一个已有的路径.如果不设置环境变量,开发者创建的虚拟设备默认保存 ...
- ubuntu netbeans compile ygopro client with google protobuf lib
environment: ubuntu 16.04 netbeans 8.2 ygopro Fluorohydride with Irrlicht Game Engine 问题1: google pr ...
- Qt creator 创建鼠标右键菜单 (不新建类)
界面 步骤 打开你的界面文件并选中你要添加右键的控件,选择“CustomContextMenu” 右键选择“转到槽...” -> customContextMenuRequested 插入下面代 ...
- IOS 学习日志 2015-3-16
Objective--C 一 关键字 self 相当于java中的this,但是又有不同 它即可一代替对象,也可以代替类, 也就是说它既可以用在静态方法中又可以用在动态方法中. super 相当于父类 ...
- 简单的一个makefile
cpp_obj = $(patsubst %.cpp, %.o, $(wildcard *.cpp)) bin : $(cpp_obj) g++ -o bin $(cpp_obj) .PHONY : ...
- HTTP_USER_AGENT
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>We ...
- 一个供新手把玩的jQueryUI在线文档
最近整理了一份jQueryUI文档,方便以后学习和运用. 把玩地址