【微服务架构】-【架构设计】-从前端到后端再到运维-全程开发一个系统—一切从0开始—登陆页面

开发功能： 登陆页面

事先了解登录的业务流程，这个几乎所有系统都差不多，就不多说了，具体参考上一篇博客

总体开发思维：敏捷开发+前后端分离+自动化测试与运维+模块化管理

开发之前找个例子先练手 熟悉下，所以有必要做技术预研（对于老手可以跳过）

在此之前需要有原型设计图，这块工作不需我们负责，也不是我们的工作内容，有产品经理负责。

技术要求：html 、css 、javascript（Jquery）、ajax、mockjs（测试使用）

设计要求：界面设计，交互式设计、页面流程设计 

界面效果图：如下图

参考其他网站布局：总体都是 用信息分类画页面布局

发现主流的形式是把基础功能和信息放在顶部，主要功能和信息放在中间，两侧放置辅助信息、最下面放置版权信息。

 

我们以下面的登录界面做技术预研（假设你啥也不会，这个步骤只是为了演示敏捷开发中开发人员需要的编码技术）

代码实现：

 创建login.html 、login.js 、login.css （将相同页面资源文件命名一致，方便开发管理）

login.html：

	
	
	


	

		
		

			

				
其他链接
				
社区
				
产品
				
首页
			
		
 
		
		

			
			

				
海量数据    信息共享
                

				
数据结合商业  让大数据发挥大价值
				



				
精准营销、数据化管理，提升管理水平。
				
打造线上线下数字一体化。
				
双选平台，建立工厂与经销商双向选择平台。
				
服务市场，塑造经销商信用等级，为其提供相应的金融服务。
 
			
			
			

				

					

						
用户登陆
						
用户名：
						
						
密码：
						
						
						

						
  记住密码
						
忘记密码
						


						
没有账号？立即注册
					

				
			
		
 
		
		

				

					
关于我们
					
诚聘人才
					
联系商家
					
广告服务
					
江苏省苏州市园区xx路666号xxx公司 Camping 2018-2010
				
 
		
 
	

login.css

/*全局样式设置*/
/*内外边距 设置所有的列表属性 用于 li 元素*/
*{margin: 0;padding: 0;list-style: none;}

/*最外层元素设置背景图片与尺寸*/
body{
	background: url('bg.jpg') ;
    background-size: 100%; 
}
/*设置一个div主容器尺寸*/
.container{
	width: 1200px;
	height: 870px;
	margin: 0 auto;
/* 	background: #ccc; */
}

/* 导航 */
.nav{
	margin-top: 10px;
	height: 50px;
	line-height: 50px; /*当行高与元素高相同 内容居中显示*/
}
.nav ul li{
	float: right;/*设置元素 右边浮动排列显示*/
	font-size: 15px;/*字体大小*/
}
.nav ul li a{
	text-decoration: none;
	color: #152b3c;
	padding:15px 30px;
}
/*鼠标悬浮时样式*/
.nav ul li a:hover{
	border: 1px solid #fff02e;/*设置元素边框 */
	border-radius:5%;/*设置圆角半径*/
	color: #1177ff;/*设置颜色样式*/
}

/* 主体内容 */
.main{
	width:1200px;
	height: 450px;
}
.sideleft{
	width:460px;
	height: 250px;
	float: left;/*左浮动*/
	padding:85px 130px
}
.sideleft p{
	padding: 8px 0;
	font-size: 16px;
}
.sideright{
	width: 480px;
	height: 450px;
	float: right;/*右浮动*/
}
.sideright .index{
	width: 330px;
	height: 350px;
	background-color:rgba(255,255,255,0.75);
	margin: 50px 90px;
}
.headline{
	font-size: 22px;
	text-align: center;
	padding: 20px;
}
input[type="text"],
input[type="submit"]{
    display: block;
    margin: 0 auto;
    font-size:15px;
    width: 240px;
}
input[type="text"]{
	height:35px;
	border-radius:3px;
	border:1px solid #c8cccf;
	color:#6a6f77;
	outline:0;/*outline:0与outline:none*/
}
input[type="submit"]{
	margin-top: 25px;
	height: 35px;
	background: #357eb8;
	color: #bcedff;
	font-weight: bold;
	/*font-size: 16px;*/
}
input[type="submit"]:hover{
	background: #0e62a3;
	cursor: pointer;
}
.astyle{
	margin: 5px 0 5px 42px;
	font-size:17px; 
	color: #6a6f77;
}
.bstyle{
	display: block;
	float: left;
	margin-left: 46px;
	font-size: 15px;
}
.cstyle{
	display: block;
	float: right;
	margin-right: 46px;
	font-size: 15px;
}
.cstyle a{
	text-decoration: none;
}

/*底部样式*/
.footer{
	width: 1000px;  /*占满所有宽度*/
	margin:60px auto;/*外边距属性 上右下左 顺时针 设置与其他元素的间距  居中显示*/
}
.footer ul li{
    float: left;/*设置元素 左边浮动排列显示*/

}
.footer ul{
	margin-left: 100px;/*设置元素左外边距 让元素间隔着排列*/
}

.footer ul li a{
	text-decoration: none;/*设置文本修饰 没有文本装饰*/
	color: black;/*设置显示颜色*/
	border-left: 2px solid black;/*设置对象边框 左边添加竖线*/
	padding:0 10px; /*设置内边距 让内部元素与边框不会太紧挨着*/
}

 

 先不急写 页面交互代码js，打开浏览器一点一点调试到最佳布局与样式为止：

里面涉及到的知识点：页面布局思维，CSS盒模型 -box模型、行内元素与块元素的设置、字体的设置、边框设置、常用表单元素

最后界面如下：

技术总结：