Git Hub

最新推荐文章于 2025-04-04 15:04:22 发布

原创最新推荐文章于 2025-04-04 15:04:22 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Git Hub #html #css

Git Hub制作专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于HTML和CSS实现的GitHub注册页面设计，包括上部导航栏和下部注册表单，展示了如何使用样式表来美化网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码

<html>
<head>
	<title>github</title>
	<link rel="stylesheet" style="text/css" href="style.css"/>
</head>
<body>
		<div class="div_shangbu">
			<div class="div_tu1"><img width=50px height=50px  src="564.png"/></div>
			<div class="div_ziti1">Features</div>
			<div class="div_ziti1">Business</div>
			<div class="div_ziti1">Explore</div>
			<div class="div_ziti1">Marketplace</div>
			<div class="div_ziti1">Pricing</div>
			<input type="text" class="div_ss1"placeholder="Search Github"/>
			<div class="div_ziti1">Sing in</div>
			<div class="div_ziti2">or</div>
			<div class="div_ziti1">Sing up</div>
		</div>
		<div class="div_xiabu">
		<div class="div_xiazuo">
			<div class="zmk1">
				<div class="div_zimu1">Built for</div>
				<div class="div_zimu2">developers</div>
			</div>
				<div class="div_zmk2"><div class="div_zimu3">GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside 28 million developers.</div></div>
		</div>	
			<div class="div_xiayou">
				<div class="div_xk">
					<div class="div_1"><div class="div_ziti3">Username</div></div>
					<div class="div_2"><input class="div_ss2" type="text"placeholder="Pick a username"/></div>
					<div class="div_1"><div class="div_ziti3">Email</div></div>
					<div class="div_2"><input class="div_ss2" type="text"placeholder="You@example.com"/></div>
					<div class="div_1"><div class="div_ziti3">Password</div></div>
					<div class="div_2"><input class="div_ss2" type="text"placeholder="Create a password"/></div>
					<div class="div_3"><div class="div_ziti4">Make sure it's at least 7 characters, including a number, and a lowercase letter.</div></div>
					<div class="div_4"><input class="div_000" type="button" value="Sign up for GitHub" style="height:60px;width:350px;" /></div>
					<div class="div_5"><div class="div_ziti4">By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.</div></div>
				</div>
				</div>
		</div>
		
</body>
</html>

css代码

		.div_shangbu{
			width:100%;
			height:64px;
			background-color:#24292e;
			}
		.div_tu1{
			margin-left:11%;
			float:left;
			margin-top:8px;
			}
		.div_ziti1{
			color:#fff;
			font-size:16px;
			float:left;
			margin-left:20px;
			line-height:64px;
			}
		.div_ziti2{
			color:black;
			font-size:16px;
			float:left;
			margin-left:20px;
			line-height:64px;
			}
		.div_tu2{
			float:left;
			margin-top:8px;
			margin-left:95%;
			}
		.div_ss1{
			width:300px;
			height:30px;
			background-color:#2b3137;
			margin-left:60px;
			float:left;
			margin-top:15px;
			border:0px;
			}
		.div_xiabu{
			width:100%;
			height:1000px;
			background-color:#2b3137;
			}
		.div_kuang{
			background-color:#fafbfc;
			width:380px;
			height:476px;
			}
		.div_zimu1{
			font-size:64px;
			color:#ffffff;
			padding-top:150px;
			padding-left:22%;
			}
		.div_zimu2{
			font-size:64px;
			color:#ffffff;
			padding-top:0px;
			padding-left:22%;
			}
		.div_zimu3{
			font-size:21px;
			color:#ffffff;
			padding-top:0px;
			padding-left:14%;
			}
		.div_zmk1{
			width:350px;
			height:165px;
			}
		.div_zmk2{
			width:551px;
			hheight:124px;
			padding-left:10%;
			padding-top:10px;
			}
		.div_xiazuo{
			width:660px;
			height:540px;
			float:left;
			}
		.div_xiayou{
			width:600px;
			height:800px;
			float:left;
			}
		.div_xk{
			width:380px;
			height:450px;
			background-color:#fafbfc;
			margin-left:70px;
			margin-top:70px;
			}
		.div_1{
			width:380px;
			height:21px;
			padding-top:1px;
			padding-left:10px;
			}
		.div_2{
			width:380px;
			height:46px;
			padding-left:10px;
			margin-top:5px;
			padding-top:5px;
			}
		.div_3{
			width:380px;
			height:36px;
			margin-left:10px;
			margin-top:15px;
			}
		.div_4{
			width:380px;
			height:64px;
			margin-left:13px;
			}
		.div_5{
			width:380px;
			height:54px;
			margin-left:10px;
			margin-top:15px;
			}
		.div_ziti3{
			color:#586069;
			font-size:14px;
			margin-top:10px;
			}
		.div_ss2{
			width:350px;
			height:45px;
			border:1px solid gray;
			}
		.div_ziti4{
			font-size:12px;
			color:#6a737d;
			}
		.div_000{
			background-color:#2ebc4f;
			border:0px;
			}

效果图

在这里插入图片描述