教务管理系统登录页面仿写

注：仅用于学习

效果图、尺寸以及主要颜色如下：

主要颜色：

左边蓝色背景颜色：#d2d6f9。或者采用线性渐变色。css为：background: linear-gradient(#f5f5f8,#d2d6f9);

右边输入框的边框颜色：#ccc

登录按钮（图中写的是提交按钮，应该是登录）：背景色#3B82FF，字体白色。

第一步

创建站点，即新建一个文件夹，命名为【学号姓名】。在此文件夹里面创建一个【images】文件夹，用于存放所有图片素材。

第二步

网页布局。

 参考代码如下：

第三步

填充内容，参考代码如下：

 

 

---------------------------             教务系统登录页面仿写基本完成     --------------------------

第四步：对比原网页，还有阴影和圆角可以进一步优化，可自己完成。

设置圆角：

border-radius : 10px;   /* 四个角的圆角半径都为10px */
border-radius : 10px 20px 30px 40px;   /* 左上角、右上角、右下角、左下角*/

设置阴影：

box-shadow:x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-radius（阴影模糊半径，为正，0为无模糊效果，值越大，越模糊） spread-radius（阴影扩展半径，可正可负） color（设置对象的阴影的颜色）;
			
/*举例：X轴与Y轴的偏移量为0，设置值阴影模糊半径为15px, 颜色为红色。*/
box-shadow: 0 0 15px red;

 网站原址 http://49.234.155.183/hngsdxbjxy_jsxsd/