从0开始做系统之前端

赵云龙龙

发布于 2019-07-23 16:21:09

1.1K0

发布于 2019-07-23 16:21:09

文章被收录于专栏：python爱好部落python爱好部落

其实前端就是一个体力活，你要优化你的布局，美化你的界面，交互你的控件。如果按照传统的写法，每个都劳心劳力。有没有快速的方法呢？

做前端，我们一般要掌握三方面的知识：html，CSS 和javascript。 html负责搭建基础，就像人类的骨架。 CSS负责布局和美化，就像人类的肌肉和皮肤。 Javascript就像是人的神经系统，负责接收信息和做出反馈。

前面我们讲过组件的思想，就是很多常用的东西，提前组装起来，直接调用即可。前端也有这样的框架，比如bootstarp, element UI.

如今，一个工具好不好用，在很大程度上要看它是不是集成了很多的好用的模块。 semantic UI 就是这样一款工具，集成了很多很漂亮的UI模块，能够使网页制作更加高效和美观。

关键是使得编程的门槛更低了。

首先我们去官网走一遭。 semantic-ui Semantic是围绕自然交流语言而架构的，这使得开发更加直观、易于理解。把词语和类看成一个个可以任意组合的概念，使用如：名词/修饰语，文字序列以及诸多的自然语法来定义类名。常见用法:

- 名词：具体的元素
ui segment
ui button
ui image
ui container
ui divider
ui header
ui label
 
- 形容词：
very padded：文字的间距靠里
vertical：去掉边框的圆角、阴影和缝隙
inverted：颜色需要反选填充
basic: 处理黑边问题
fixed: 固定位置
Mini Tiny Small Medium Large Big Huge Massive：大小
circular：圆形
 
- 图标名称：
share icon
wifi icon

使用Semantic UI，只需要在HTML文件头部引入如下3个文件即可

   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.js"></script>

因为bootcss网站国内可能访问不到了。可以在某度搜索

cdn semanticui

然后就可以复制镜像文件了：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>

如果可以爬墙，可以用一个在线js调试工具来预览效果。 jsfiddle 国内也有类似的，jsrun

OK, 我们尝试按照例子把代码copy过来：

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<head>
    <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.js"></script>
<body>

    <form id="form1" runat="server">
        <div  class="ui form segment">
        <div class="ui one  column relaxed grid">
            <div class="column">
                      <div class="ui fluid form segment">
          <h3 class="ui header">测试系统登录界面</h3>
          <div class="field">
              <label>用户名</label>
              <input type="text" name="userName" id="userName" placeholder="用户名"/>
          </div>
          <div class="field">
              <label>密码</label>
              <input type="password" name="userPass" id="userPass"/>
          </div>
          <div class="ui blue submit button" onclick="login()">登录</div>
      </div>
            </div>
        </div>
            <div class="ui error message">

            </div>
        </div>
    </form>
</body>

效果如下：

太丑了，优化一下，加个样式：

    <style type="text/css">
        #form1 {
            margin: 0 auto;
            top: 30%;
            left: 40%;
            position: absolute;

        }
          </style>

好看多了。

我们还可以加个验证，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<head>
    <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.css" rel="stylesheet" />
    <script src="https://cdn.bootcss.com/semantic-ui/2.4.0/semantic.min.js"></script>
    <script>
        //登录验证
        function login()
        {

            $(".ui.form").form(
                {
                    username: {
                        identifier: 'userName',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '用户名不能为空'
                            }]
                    },
                    userpass: {
                        identifier: 'userPass',
                        rules: [
                            {
                                type: 'empty',
                                prompt: '用户密码不能为空'
                            }]
                    }
                }, {
                    onSuccess: function () {
                        alert("成功了啊");
                    }
                }
                );
        }
    </script>
    <style type="text/css">
        #form1 {
            margin: 0 auto;
            top: 30%;
            left: 40%;
            position: absolute;

        }
          </style>
</head>
<body>

    <form id="form1" runat="server">
        <div  class="ui form segment">
        <div class="ui one  column relaxed grid">
            <div class="column">
                      <div class="ui fluid form segment">
          <h3 class="ui header">测试系统登录界面</h3>
          <div class="field">
              <label>用户名</label>
              <input type="text" name="userName" id="userName" placeholder="用户名"/>
          </div>
          <div class="field">
              <label>密码</label>
              <input type="password" name="userPass" id="userPass"/>
          </div>
          <div class="ui blue submit button" onclick="login()">登录</div>
      </div>
            </div>
        </div>
            <div class="ui error message">

            </div>
        </div>
    </form>
</body>
</html>