1. 程式人生 > >前端——GitHub登入介面和首頁製作

前端——GitHub登入介面和首頁製作

程式設計師當然少不了運用GitHub,這正好在複習前端知識,就做了一個GitHub的登入介面和首頁。

登入介面如下:

我做的這個網頁並沒有提交表單的功能,只是簡單地在button中添加了超連結。點選Sign in 按鈕之後會跳轉到首頁。

首頁介面如下:

  下面是原始碼。

登入介面原始碼:

<!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>



						

首頁原始碼:

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type"content="text/html";charset="utf-8"/>
		<title>GitHub</title>
		<link href="https://assets-cdn.github.com/favicon.ico" rel="Shortcut Icon"  type="image/x-icon" />

		<link href="Github.css" rel="stylesheet" type="text/css"/>

<head>

</head>

<body>
	<div class="div_upper"  >
			<div class="top">
				<div style="float:left"><img src="images/1.png"style="width:45px;height:45px;"/> </div>
				
				<div class="search"style="float:left;">
					<form action="http://www.baidu.com/s" method="get"id="submit">
					<input id="usename" name="wd" placeholder="Search to jump to" type="text" style="width:300px;height:28px; border:1px #24292E solid;border-radius:4px; background-color:#3F4347">		
				</div>
					<div style="float:left;margin-left:142px;margin-top:8px"><img src="images/2.png"/></div>
		
				<div class="top_menu">			
					<div class="top_word">Pull request</div>			
					<div class="top_word">Issues</div>		
					<div class="top_word">Marketplace</div>
					<div class="top_word">Explore</div>
				</div>
				<div style="float:right;">
					
					<div style="float:right;"><img src="images/5.png"/></div>
					<div style="float:right;"><img src="images/4.png"/></div>
					<div style="float:right;margin-top:4px;"><img src="images/3.png"/></div>
				
					
				</div>
			</div>
			<div style="clear:both;"></div>
	</div>
	<div class="div_container">
		<div class="div_shift">
			<div class="div_center">
					<div class="div_shift_title">
						<h2 style="font-weight: 500;">Learn Git and GitHub without any code!</h2>
					</div>
					<div class="div_shift_leader">
						<h2 style="font-size:18px;font-weight:400;">Using the Hello World guide, you’ll create a repository, start a branch, write comments, and open a pull request.</h2>
						<a href="https://guides.github.com/activities/hello-world/" class="btn btn-primary shelf-cta" target="_blank" data-ga-click="Hello World, click, Clicked Let’s get started button"style="margin-top:15px;">Read the guide</a>
						<a  href="https://github.com/new"class="btn shelf-cta ml-3" data-ga-click="Hello World, click, Clicked new repository button - context:user"style="background-image: linear-gradient(-180deg,#fafbfc 0%,#eff3f6 90%);margin-top:15px;">Start a project</a>
					</div>
					

			</div>

		</div>

		<div class="lay_body">
			<div class="div_list"style="margin-top:30px;
					width:300px;
					height:500px;
					padding-right: 30px;
					float:left;">
				
					<div style="border-radius:5px;background-color:#24292e;">
						<div class="div_left1">
							<img src="images/6.png" style="display:inline-block;"/>
							<div class="word">
								<div style="font-size:12px;font-weight:600;">Workshops at GitHub Universe</div>
								<div style="width:210px;">Register to attend a workshop in San Francisco on October 15</div>
							</div>
						</div>
					</div>
				
			
					<div class="div_left2">
							<img src="images/7.png" style="display:inline-block;vertical-align:top;"/>
							<div class="l_word">Our new Terms of Service and Privacy Statement are in effect.</div>
					</div>
					<div class="div_self">
							<img src="images/8.png" />
							<div class="div_self_word">SearchinR</div>
							<img src="images/9.png" style="float:right;margin-top:-25px;"/>
					</div>
					<div class="div_left3">
							<div class="div_left_boxhead">
								<p style="font-size:14px;font-weight:600;display:inline-block;margin-top:5px;">Repositories</p>
								<div class="l_button"style="width:108px;height:28px;">						
									<a href="https://guides.github.com/activities/hello-world/" class="btn1 btn-primary " target="_blank" data-ga-click="Hello World, click, Clicked Let’s get started button"style="margin-top:-62px;margin-left:140px;">New repository</a>
								</div>
							</div>
							<div class="div_left_boxbody">
								<p style="font-size:14px;text-align:center;line-height: 1.25;">You don’t have any repositories yet!</p>
							</div>
					</div>
					
					
					<div class="div_left3"style="margin-top:-5px;">
							<div class="div_left_boxhead">
								<p style="font-size:14px;font-weight:600;display:inline-block;margin-top:5px;">Your teams</p>
								
							</div>
							<div class="div_left_boxbody">
								<p style="font-size:14px;text-align:center;line-height: 1.25;">You don’t belong to any teams yet!</p>
							</div>
					</div>

			</div>
			

			<div class="div_chat">
					<div class="div_chat_top">
							<div class="div_chat_top_word1">
							Browse activity
							</div>
							<div class="div_chat_top_word2">
							Discover repositories
							</div>
					</div>
					<div class="div_chat_main">
						<h3 style="font-size:24px;font-weight:600;margin-bottom:8px;margin-top:0px;">Discover interesting projects and people to populate your personal news feed.</h3>
						<p style="font-size:16px;border-bottom:8px;">Your news feed helps you keep up with recent activity on repositories you watch and people you follow. </p>
						<a href="https://github.com/explore" class="div_chat_button">Explore GitHub</a>     
					</div>
			
			</div>
			<div class="foot">
				<div class="in_foot">
					<div style="float:left;margin-left:10px;"><img src="images/10.png"style="margin-top:-3px;"/></div>
					<div style="float:left;color:#586069;">2018 GitHub, Inc.</div>
					<div class="foot_menu1">Terms</div>
					<div class="foot_menu1">Privacy</div>
					<div class="foot_menu1">Security</div>
					<div class="foot_menu1">Status</div>
					<div class="foot_menu1">Help</div>
					<div style="float:left;margin-left:100px;"><img src="images/11.png"style="margin-right:70px;;"/></div>
					<div class="foot_menu2">About</div>
					<div class="foot_menu2">Blog</div>
					<div class="foot_menu2">Training</div>
					<div class="foot_menu2">API</div>
					<div class="foot_menu2">Pricing</div>
					<div class="foot_menu2">Contact GitHub</div>
				</div>
			</div>
			<div style="clear:both;">	</div>
		</div>
	</div>
<body>

</html>