电工基地软件组前端培训2

回到主页

相信大家现在都已经有了一定写网页的基础了，目前我们在自己网页中写的css较为单一，所实现的效果可能也达不到自己的预期。

写一个网站，首先风格要统一，从色调，各种元素之间相配合，其次要美观，给用户的第一印象要好，这就需要我们对CSS进行分类管理，将一些通用的类提取出来，也就是所谓的“基类”，打个比方：一个网站中需要用到几种按钮，一种是用来确认的绿色按钮，一种是用来取消的红色按钮，一种是一般的按钮。那么为了达到风格统一的目的，我要求所有的按钮都要是四个角为圆角，空心，大小固定的，只不过不同的按钮颜色不一样。那么我们的“基类”其实就是“四个角为圆角，空心，大小固定”，我们就可以写一个基类：

.button_base{
    border-radius:4px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

然后对于不同的按钮分别写不同的类：

.button_confirm{
    background-color:green;
}

.button_cancel{
    background-color:red;
}

然后在不同的按钮中使用上述类：

<button class="button_base button_confirm">确认</button>//第一种按钮
<button class="button_base button_cancel">取消</button>//第二种按钮
<button class="button_base">选择</button>//第三种按钮

当然现在网上有非常多优秀的CSS库可以供我们使用，这里推荐bulma，当然bootstrap或者是其他的CSS库也可以。

bulma

网址为：https://bulma.zcopy.site/

点击文档，就可以查阅相关官方文档。

在自己的项目使用相应的库有两种方式：下载相应的CSS包，然后通过<link>标签链接进项目中，还有就是不下载，直接用CDN链接：

<link rel="stylesheet" src="https://cdn.jsdelivr.net/npm/bulma@0.8.0/bulma.css">

关于如何使用，其实和我们自己写的CSS库的用法一样，只不过那些类的名字不是自己指定的，你需要查阅官方文档。例如：

这里使用bulma中的column类可以来来方便来划分网页布局。

还有这种媒体对象，有的时候可以直接拿过来用。

即使网站上有那么多库是不是意味着我们不需要学习自己写CSS？答案必然是否定的，这种库的是有一定局限性的，并不能满足我们所有的要求，所以不能一味依赖于这些CSS库。

Font Awesome

这是一个含有大部分我们需要的小图标的网站，非常推荐使用。

网址是：https://fontawesome.dashgame.com/

使用方法同样是：可以采用CDN链接

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

只要找到我们需要的图标对应的类名字：

比如说这个照相机图标，我们知道它的类的名字是“fa-camera-retro”。

我们就可以使用：

<i class="fa fa-camera-retro"></i>

这个“fa”代表这是Font Awesome库的，必须要加上，然后后面加上“fa-camera-retro”。

还可以调节图标的大小：

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

从上到下逐渐变大：

除了控制大小还可以：

更多的功能可以查看官方文档

作业

用上述介绍的两个库将你们的博客和登录系统界面进行优化。设计一个注册界面，要求如下：

1.登录和注册做成模态框，注册能够和登录界面相互转换，就是在登陆界面有一个“现在注册”的按钮，然后在注册界面有一个“返回登录”。

2.要求能够通过我注册的账号密码来进行登录，做一个假的验证即可。

3.注册需要对账号密码进行限制：账号需要大于8字符（或者可以挑战下规定账后需要字母与数字混合且大于8字符，提示：可以了解下正则表达式），密码也可以给一些限制，但是你要给用户明显的提示，当用户输入不符合的时候你要提醒，至于你是在用户输完提示还是在用户点注册后再来判断可以自己决定，要有二次确认密码。

提交时间下周一