GitHub官网制作

最新推荐文章于 2024-08-22 00:37:41 发布

英俊帅比林

最新推荐文章于 2024-08-22 00:37:41 发布

阅读量2.4k

点赞数 2

分类专栏：前端文章标签： html css 网页布局 GitHub

本文链接：https://blog.csdn.net/qq_37856300/article/details/82898952

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

源码：

登陆页面

html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/login.css" />
		<script src="js/login.js"></script>
	</head>
	
	<body>
		<div class="div_head">
			<img src="" class="logo"/>
			<ul class="head_nav">
				<li>Features</li>
				<li>Business</li>
				<li>Explore</li>
				<li>MarketPlace</li>
				<li>Pricing</li>
			</ul>
			
			<div class="searchArea">
				<div class="searchBox">
					<input type="text" class="searchInput" placeholder="Search GitHub"/>
				</div>
			</div>
			<div class="sign">
				<strong>Sign in</strong>
				<span class="or">or</span>
				<strong>Sign up</strong>
			</div>
		</div>
		
		<div class="div_body">
			<div class="body_info">
				<div class="headLine">Built for developers</div>
				<div class="essay">GitHub is a development platform inspired by the way you work.From <span class="weight">open source</span> to <span class="weight">business</span>,you can host and review code,manage projects,and build software alongside 28 million developers.</div>
			</div>
			<div class="operation">
				<div class="inputArea">
					<form action="">
						<label for="username">Username</label><br>
						<input id="username" type="text" class="inputBox" required/><br>
						<label for="email">Email</label><br>
						<input id="email" type="text" class="inputBox" placeholder=" you@example.com" required/><br>
						<label for="password">Password</label><br>
						<input id="password" type="password" class="inputBox passwordBox" required pattern="[a-z0-9]{6,12}"/><br>
						<span class="tip">Use at least one letter,one numeral,and seven characters.</span>
						<input class="submitButton" type="submit" value="Sign up for GitHub"/>
						<span class="tail_info"></span>
					</form>
				</div>
			</div>
		</div>
		
		<div class="div_bottom">
			<div class="bottom_inner">
				<p class="bottom_info">Through a commbination of creativity,determination,and (a lot of) carefully crafted code,the future is being built evertday.</p>
			</div>
		</div>
	</body>
</html>

CSS

body
{
	margin:0px;
}
.div_head
{
	width:1920px;
	background-color:rgba(36,40,46,1);
	height:80px;
}
.div_body
{
	width:1920px;
	height:573px;
	background-color:rgba(42,48,54,1);
}
.div_bottom
{
	width:1920px;
	background-color:rgba(16,24,30,1);
	height:100px;
}
.bottom_info
{
	width:650px;
	height:60px;
	color:white;
	line-height:25px;
	font-size:17px;
	margin-top:30px;
}
.bottom_inner
{
	width:650px;
	height:60px;
	float:left;
	margin-left:250px;
}
.head_nav
{
	width:500px;
	height:80px;
	float:left;
	margin-left:250px;
}
li
{
	list-style-type:none;
	margin-right:30px;
	color:white;
	float:left;
	line-height:50px;
}
.searchArea
{
	width:300px;
	height:80px;
	float:left;
}
.searchBox
{
	width:280px;
	height:30px;
	float:left;
	background-color:rgba(62,68,72,1);
	border-radius:3px;
	margin-top:25px;
}
.searchInput
{
	width:250px;
	height:30px;
	float:left;
	background-color:rgba(62,68,72,1);
	border:none;
	margin-left:10px;
	outline:none;
}
.sign
{
	width:200px;
	float:left;
	margin-top:28px;
}
strong
{
	font-size:17px;
	color:white;
}
.or
{
	color:rgba(62,68,72,1);
}
.body_info
{
	width:550px;
	height:300px;
	float:left;
	margin-left:-500px;
	margin-top:140px;
}
.headLine
{
	width:250px;
	font-size:60px;
	font-weight:bold;
	float:left;
	line-height:60px;
	color:white;
}
.essay
{
	width:470px;
	font-size:21px;
	float:left;
	margin-top:15px;
	line-height:25px;
	color:rgba(171,173,176,1)
}
.weight
{
	color:white;
	text-decoration:underline;
}
.operation
{
	width:373px;
	height:413px;
	border-radius:3px;
	background-color:white;
	float:left;
	margin-left:60px;
	margin-top:85px;
}
.inputBox
{
	width:280px;
	height:40px;
	border:1px solid black;
	border-radius:4px;
	margin-bottom:20px;
}
.inputArea
{
	float:left;
	margin-left:40px;
	margin-top:30px;
}
.passwordBox
{
	margin-bottom:5px;
}
.tip
{
	font-size:13px;
	float:left;
	margin-bottom:20px;
}
.submitButton
{
	width:285px;
	height:60px;
	border-radius:3px;
	background-color:rgba(46,189,78,1);
	border:none;
	color:white;
	font-weight:bold;
	font-size:15px;
}

主页

html

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>

	<body>
		<div class="div_top">
			<div class="searchArea">
				<div class="searchBox">
					<input type="text" class="searchInput" placeholder="Search GitHub"/>
				</div>
			</div>
			<ul class="top_nav">
				<li>Pull requests</li>
				<li>Issues</li>
				<li>Marketplace</li>
				<li>Explore</li>
			</ul>
		</div>
		<div class="div_head">
			<div class="sign">Learn Git and GitHub without any code!</div>
			<div class="sign_info">Using the Hello World guide,you'll create a repository,start a branch,write comments,and open a pull request. </div>
			<button class="head_button_left head_button">Read the guide</button>
			<button class="head_button_right head_button">Start a project</button>
		</div>
		
		<div class="div_body">
			<div class="div_aside">
				<div class="left1">
					<div class="left1_text">
						<b>Workshops at GitHub Universe</b><br>
						Register to attend a workshop in San Francisco on October 15
					</div>
				</div>
				<div class="left2">
					<div class="left2_text">
						Our new Terms of Service and privacy Statement are in effect.
					</div>
				</div>
				<div class="left3">
					<div class="left3_head">
						<span class="left3_headline">Repositories</span>
						<button class="left3_button">New repository</button>
					</div>
					<input type="text" class="left3_input" placeholder="  Find a repository"/>
				</div>
			</div>
			<div class="div_main">
				<div class="main_headline">
					<span class="main_headline_left">Browse activity</span>
					<span class="main_headline_right">Discover repositories</span>
				</div>
				<div class="line"></div>
				<div class="main_body">
				
				</div>
				
			</div>
		</div>
		
		<div class="div_bottom">
		
		</div>
	</body>
</html>

CSS

body
{
	margin:0px;
}
.div_top
{
	width:100%;
	height:60px;
	float:left;
	position:absolute;
	top:0px;
	background-color:rgba(36,40,46,1);
	
}
.searchArea
{
	width:300px;
	height:80px;
	float:left;
	margin-left:320px;
}
.searchBox
{
	width:280px;
	height:30px;
	float:left;
	background-color:rgba(62,68,72,1);
	border-radius:3px;
	margin-top:15px;
}
.searchInput
{
	width:250px;
	height:30px;
	float:left;
	background-color:rgba(62,68,72,1);
	border:none;
	margin-left:10px;
	outline:none;
}
.top_nav
{
	width:500px;
	height:80px;
	float:left;
	padding-left:0px;
}
li
{
	list-style-type:none;
	margin-right:30px;
	color:white;
	float:left;
	line-height:30px;
}
.div_head
{
	width:900px;
	height:300px;
	float:left;
	margin-left:350px;
	margin-top:60px;
}
.sign
{
	width:550px;
	height:50px;
	font-size:33px;
	float:left;
	margin-left:180px;
	margin-top:80px;
}
.sign_info
{
	width:800px;
	height:100px;
	font-size:20px;
	float:left;
	margin-left:50px;
	margin-top:20px;
	text-align:center;
}
.head_button
{
	width:233px;
	height:45px;
	border-radius:5px;
	border:1px solid grey;
	float:left;
	margin-left:30px;
}
.head_button_left
{
	margin-left:205px;
	background-color:rgba(44,184,76,1);
	color:white;
	font-size:18px;
}
.head_button_right
{
	font-size:18px;
}
.div_body
{
	width:1100px;
	height:600px;
	float:left;
	margin-left:250px;
	margin-top:90px;
}
.div_aside
{
	width:300px;
	height:600px;
	float:left;
}
.left1
{
	width:300px;
	height:80px;
	border-radius:7px;
	background-color:rgba(36,40,46,1);
}
.left1_text
{
	color:white;
	width:220px;
	height:80px;
	float:right;
	margin-top:10px;
	margin-right:5px;
}
.left2
{
	width:298px;
	height:55px;
	border:1px solid rgba(5,102,216,1);
	border-radius:3px;
	margin-top:30px;
}
.left2_text
{
	width:240px;
	height:80px;
	font-size:15px;
	float:right;
	margin-right:25px;
}
.left3
{
	width:300px;
	height:150px;
	float:left;
	border:1px solid grey;
	border-radius:3px;
}
.left3_head
{
	width:300px;
	height:45px;
	background-color:rgba(245,247,249,1);
}
.left3_headline
{
	line-height:45px;
	margin-left:15px;
}
.left3_button
{
	width:120px;
	height:30px;
	background-color:rgba(48,199,83,1);
	color:white;
	border:none;
	border-radius:3px;
	margin-left:60px;
}
.left3_input
{
	width:250px;
	height:35px;
	margin-left:25px;
	margin-top:15px;
	border:1px solid grey;
	border-radius:3px;
	float:left;
}
.div_main
{
	width:600px;
	height:600px;
	float:left;
	margin-left:50px;
}
.main_headline_left
{
	font-size:16px;
	
}
.main_headline_right
{
	font-size:16px;
	color:rgba(5,102,216,1);
	float:right;
}
.line
{
	width:600px;
	height:1px;
	background-color:rgba(209,213,219,1);
	float:left;
	margin:15px 0px;
}
.main_body
{
	width:600px;
	height:300px;
	float:left;
	border:1px solid grey;
	border-radius:4px;
}