其实前端就是一个体力活,你要优化你的布局,美化你的界面,交互你的控件。 如果按照传统的写法,每个都劳心劳力。有没有快速的方法呢?
做前端,我们一般要掌握三方面的知识: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>
基本上自己没有写几行代码,就搞定了一个简单登陆页面的前端。
然后再结合前面讲的后端,就可以做出一个完整的登陆页面来了。 前端的东西,要慢慢磨,熟能生巧。