UIKIT网页基本结构学习

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

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

也好，可以让人成长。

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

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

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

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

大约第一行，定义网站第一级元素。比如有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 &amp; 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>

转载于:https://www.cnblogs.com/aguncn/p/4948728.html

UIKIT网页基本结构学习相关推荐

wordpress page显示未找到页面_通过Avada主题了解网页基本结构和页面布局
Avada主题是目前很流行的国外建站主题,我们在学习 avada主题建站初期有必要先了解网页基本结构和页面布局情况,这样对后面使用 avada主题建站,了解 avada主题Theme Options设 ...
html网页的结构框架代码
推荐使用Notepad++编辑器写HTML代码 Notepad++官网下载地址 html学习网址: w3school在线教程 html网页的结构框架.html <!--文档声明,声明当前网页的版 ...
网页基本结构DⅣV+ CSS 静态HTML旅游景点网页制作
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,游景点介绍 | 旅游风景区 | 家乡介绍 | 等网站的设计与制作HTML期末大学生网页设计作业 ...
网页设计是要学php还是java_网页设计师需要学习什么？
原标题:网页设计师需要学习什么? 很多同学在开始学习网页设计的时候,对网页设计的了解都只存在于字面上,所以为了让大家更好的深入理解网页设计,尚观科技小编今天就给大家说说?需要的朋友可以参考一下: 网页 ...
网页设计师需要学习什么
网页设计师需要学习什么网页设计师需要学习什么?以下就是网页设计师需要学习什么等等的介绍,希望为您带来帮助. 一.需要学习美术部分: 结构素描.光影素描.速写. 设计素描.户外写生,色彩原理.色彩 ...
html怎样布局完美,一篇文章带你了解HTML的网页布局结构
大家好,我是IT共享者,人称皮皮.这篇我们来讲讲CSS网页布局. 一.网页布局网页布局有很多种方式,一般分为以下几个部分:头部区域.菜单导航区域.内容区域.底部区域. 1. 头部区域头部区域位于整 ...
读后感与机翻《基于理论的因果迁移:结合实例级的归纳和抽象级的结构学习》
研究朱松纯FPICU体系的第 3 篇文章 <Theory-based Causal Transfer: Integrating Instance-level Induction and Abst ...
计算机网页基础课专业,关于《计算机应用基础》课程网页下的学习资源使用说明....
关于<计算机应用基础>课程网页下的学习资源使用说明. 关于<计算机应用基础>课程网页下的学习资源使用说明各位同学:大家好! 07春学期已接近一半的时间了,新生对课程还需要更多 ...
Internet路由结构学习心得二：通告汇聚和具体路由影响AS入流量
如图所示.你是R1.R2.R3所在的AS 123的网管,R3所在的子公司需要大量对AS 5中的R5所在ISP进行访问,因此在它们之间连接了一条网段为36.0.0.0/24的网段.要求:除了R3与R5之 ...

UIKIT网页基本结构学习

UIKIT网页基本结构学习相关推荐

最新文章

热门文章