6.20 实训工作记录

qq_40912813

于 2020-06-20 23:56:54 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/qq_40912813/article/details/106879807

版权

今日工作

今天按照昨天的计划使用bootstrap技术实现了前端登录页面的UI设计，参照了一只野生饭皮卡丘这位大佬的博客一只野生饭皮卡丘前端——GitHub登录界面和首页制作
具体实现效果如下图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type"content="text/html";charset="utf-8"/>
		<title>Sign in to GitHub</title>
		<link href="https://assets-cdn.github.com/favicon.ico" rel="Shortcut Icon"  type="image/x-icon" />
 
<head>
	<style>
 
		.div_container_top{
				width:100%;
				
		}
		.div_container_top_center{
				width:310px;
				height:150px;
				margin:0 auto;
			
		}
		.div_logo{
		width:53px;
		height:53px;
		margin:0 auto;
 
		}
		.div_word{
		width:310;
		margin:0 auto;
		font-size: 24px;
		font-weight: 300;
		letter-spacing: -0.5px;
		text-align:center;
		}
		//class="form-control form-control input-block"
		//class="form-control input-block"
		
		.div_container_main{
				width:100%;
		
		}
		.div_container_main_center{
				width:310px;
				height:235px;
				margin:0 auto;
				background-color:#FFF;
				border: 1px solid #d8dee2;
				border-radius: 5px;
				padding: 20px;
				box-sizing: border-box;
		}
		.div_main_first{
				width:100%;
				height:20px;
				
		}
		.div_first_word{
				font-size: 13px;
				color:black;
				font-weight:bold;
				float:left;
		
		}
		.div_main_second{
				width:100%;
				height:40px;
				
		}
 
		.div_main_third{
				width:100%;
				height:30px;
				margin-top:10px;
				
		}
		.div_chat_top_word1{
		font-size: 16px;
		font-weight:600;
		float:left;
		}	
		.div_chat_top_word2{
		font-size: 12px;
		color:#0366d6;
		font-weight:600;
		float:right;
		}
		
		.div_main_fouth{
				width:100%;
				height:40px;
				
		}
 
		.search{
				//width:135px;
				height:20px;
				float:right;
				margin:0 auto;
				
				
				
			}
		.div_main_fifth{
				width:100%;
				height:40px;
				
		}
		.div_fifth_button{
			
				margin-top:8px;
				padding:8px 12px;
				font-size:14px;
				font-weight:600;
				line-height:20px;
				border:1px solid rgba(27,31,35,0.2);
				width:248px;
				//color:white;
				background-color:#269f42;
				background-image: linear-gradient(-180deg,#34d058 0%,#28a745 90%);
				border-radius: 0.25em;
				text-align:center;
 
			}
		.div_foot{
				margin-top:20px;
				width:100%;
				height:100px;
		
		}
		.div_foot_main{
				width:310px;
				height:90px;
				margin:0 auto;
				background-color:#F9F9F9;
		
		}
		.div_sixth{
				width:310px;
				height:50px;
				background-color:#F9F9F9;
				color:#0366D6;
				border:1px solid #D8DEE2;
				border-radius: 0.25em;
				text-align:center;
		}
		.div_sixth_word1{
				
				width:150px;
				
				text-align:center;
				//margin:0 auto;
				color:#D8DEE2;
				float:left;
				margin-top:10px;
		}
		.div_sixth_word2{
				
				width:150px;
				text-align:center;
				//margin:0 auto;
				color:#0366d6;
				float:right;
				margin-top:10px;
		
		}
		.div_foot_tail{
				width:310px;
				height:30px;
				background-color:#F9F9F9;
				text-align:center;
				margin:0 auto;
				
		}
		.div_foot_word{
				margin-top:10px;
				width:50px;
				height:15px;
				text-align:center;
				font-size:6px;
				margin-left:10px;
				float:left;
		}
		.div_foot_word2{
				margin-top:10px;
				width:90px;
				height:15px;
				text-align:center;
				font-size:6px;
				margin-left:20px;
				float:left;
		}
	</style>
		
</head>
<body style="background-color: #F9F9F9;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";line-height: 1.5;
				color: #24292e;">
		<div class="div_container_top">
			<div class="div_container_top_center">
				<div class="div_logo">
					<img src="https://github.com/fluidicon.png" style="width:53px;height:53px;margin-top:30px;">
				</div>
				<div class="div_word"style="margin-top:50px;">Sign in to GitHub
				</div>
			</div>
		</div>
		<div class="div_container_main">
			<div class="div_container_main_center">
					<div class="div_main_first">
							<div class="div_first_word">
							Username or email address
							</div>
					</div>
					<div class="div_main_second">
							<div class="search"style="float:left;">
						
								<input id="usename" name="wd"  type="text" style="width:270px;height:30px; border:1px #d1d5da solid;border-radius:3px; ">		
							</div>
					</div>
					<div class="div_main_third">
							<div class="div_chat_top_word1">
							Password
							</div>
							<div class="div_chat_top_word2">
							Forgot password？
							</div>
					</div>
					<div class="div_main_fouth">
							<div class="search"style="float:left;">
						
								<input id="usename" name="wd"  type="text" style="width:270px;height:30px; border:1px #d1d5da solid;border-radius:3px; ">		
							</div>
					</div>
					<div class="div_main_fifth">
							<div class="div_fifth_button">
								<a href="file:///C:/Users/lenovo/Desktop/knowledge/2018-9/Github/Github.html" class="div_chat_button"style="color:white;text-decoration: none;">Sign in</a>     
							</div>
					</div>
			</div>
			
		</div>
		<div class="div_foot">
				<div class="div_foot_main">
						<div class="div_sixth">
								<div class="div_sixth_word1">
								New to GitHub?
								</div>			
								<div class="div_sixth_word2">
								Create an account.	
								</div>	
								
						</div>
						<div class="div_foot_tail">
								<div class="div_foot_word">
								Terms
								</div>
								<div class="div_foot_word">
								Privacy
								</div>
								<div class="div_foot_word">
								Security
								</div>
								<div class="div_foot_word2">
								Contact GitHub
								</div>
								
						</div>
 
				</div>
</body>
</html>

还有注册页面也正在实现中，预计明天可以交与后端同学进行测试。之后根据之前设计的主界面功能草图来设计主界面的UI，要兼顾美观和实用性，还需要参照一些优秀作品进行进一步考量。

下一步展望

实现注册页面和主界面的UI布局，尽快与后端同学进行交互测试

qq_40912813

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.20 实训工作记录

今日工作今天按照昨天的计划使用bootstrap技术实现了前端登录页面的UI设计：还有注册页面也正在实现中，预计明天可以交与后端同学进行测试。之后根据之前设计的主界面功能草图来设计主界面的UI，要兼顾美观和实用性，还需要参照一些优秀作品进行进一步考量。下一步展望实现注册页面和主界面的UI布局，尽快与后端同学进行交互测试...
复制链接

扫一扫