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="[email protected]"/></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;
}
效果图
