没办法，哈哈，以后一段时间，如果公司没有招到合适的运维研发，
啥啥都要我一个人先顶上了~~~：）
也好，可以让人成长。
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="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="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="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
</div>
</div>
</div>
</body>
<html>
时间： 2024-09-09 05:32:52