专栏首页python爱好部落从0开始做系统之前端

从0开始做系统之前端

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

做前端,我们一般要掌握三方面的知识: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>

基本上自己没有写几行代码,就搞定了一个简单登陆页面的前端。

然后再结合前面讲的后端,就可以做出一个完整的登陆页面来了。 前端的东西,要慢慢磨,熟能生巧。

本文分享自微信公众号 - python爱好部落(lovesweet2018),作者:Snake

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 利用python开发小工具

    在日常工具中,我们需要利用一些工具来减少重复,耗时的劳动。有时候这样的工具没有现成的。我们得利用自己的智慧,来造一些工具来提高效率。

    赵云龙龙
  • Git撤销&回滚操作(git reset 和 get revert)

    俗话说,老虎也有打盹的时候。我们提交代码,也会有出错的时候。 我今天不小心把不该提交的文件给提交了。

    赵云龙龙
  • 从0开始做系统之vue

    不知道有人见过造房子或者建设工程没有。最基本的是水泥,沙子,然后跟钢精一起凝结成混凝土。如果要按照传统的方法,在施工现场,要将沙子,水泥和水按照一定的比...

    赵云龙龙
  • React+Mobx写法更像Vue了

    Mobx是一个功能强大,上手非常容易的状态管理工具。就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux。 本教程旨...

    javascript.shop
  • 自定义事件 原

    事件是一种叫做观察者的设计模式,这是一种创建松散耦合的技术。观察者模式由两类对象组成:主体和观察者。主体负责发布事件。同时观察者通过订阅这些事件来观察该主体。该...

    tianyawhl
  • mint-UI上拉加载下拉刷新和fastclick冲突问题解决

    当我们的Vue项目为了解决IOS设备事件点击卡顿,300ms的延迟的问题,引入了fastclick后,会有很多小的冲突,例如在使用mint-UI实现上拉加载和下...

    honey缘木鱼
  • 数据猿专访 | 比邻弘科联合创始人史建刚:数据造假忍无可忍,我们要像金庸一样创造一个“不妥协的世界”

    <数据猿导读> 近年来,移动互联网浪潮席卷着中国市场。而在这次革命浪潮中,众多资本涌入,造成移动流量推广行业迅猛发展的同时,也滋生了很多产业泡沫,其中最大的泡沫...

    数据猿
  • 特工黑科技成真,人脸识别无人机可瞬间锁定你

    以往在一些谍战或者是科幻电影中经常会有通过无人机从人群中搜索锁定目标的情节。现在,这种技术已经成为现实。在今年的Secutech 2017展会上,台湾无人机厂商...

    机器人网
  • Yann LeCun说阿尔法狗在现实世界无法复制,还和MJ、李开复聊了聊AI前景(全程实录+PPT)

    大数据文摘
  • 博客园加上博客精灵

    http://files.cnblogs.com/files/flipped/spig.js换成你的js代码(为什么要换呢?因为里面有的内容需要修改,比如有网址...

    饶文津

扫码关注云+社区

领取腾讯云代金券