一、实验目标
基本上每个web项目都会有网站登录模块,我们今天要实现的登录框是以弹出的方式呈现。页面如下:
二、实验环境
此登录框采用bootstrap框架来实现,依赖的版本为3.3.7。
我们可以直接引用cdn的资源,资源地址如下:
三、实验步骤
## 步骤1.实现弹出式登录框显示
知识点:
- 自定义数据属性:data-toggle、data-target
- bootstrap自带样式:text-align
## 步骤2.实现登录框
知识点:
- bootstrap自带样式:modal、fade、modal-dialog
- 自定义样式:loginmodal-container、loginmodal-container h1、loginmodal-container input[type=text]、input[type=password]、loginmodal-container input[type=text]:hover、 input[type=password]:hover、loginmodal-container a
完整代码链接:https://www.itbegin.com/apps/mooc/77a8ddd1229d4556956b49cb82c48708
领取专属 10元无门槛券
私享最新 技术干货