div+css实现酷黑手机登录注册表单页面代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现酷黑手机登录注册表单页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline-color: #951fae;
}

body {
  background-color: #302f37;
  color: #3d3d3d;
  display: grid;
  font-family: 'Helvetica Neue', sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  padding: 10vmin;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  place-items: center;
}

a {
  color: #fcfcfc;
  text-decoration: none;
  -webkit-transition: color 0.3s ease-in-out;
  -o-transition: color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}

a:focus,
a:hover {
  color: #e3e3e3;
}

button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
}

h1 {
  color: #fcfcfc;
  line-height: 1.2;
  margin: 0;
}

input {
  border: 0;
  color: inherit;
  font: inherit;
}

p {
  margin-top: 1em;
  margin-bottom: 1em;
}

.header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 1em;
  gap: 1em;
  margin-bottom: 3em;
}

.icon {
  display: inline-block;
  fill: currentColor;
  height: 1.5em;
  width: 1.5em;
}

.buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 1em;
  gap: 1em;
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
}

.buttons li {
  width: 100%;
}

.button {
  background-color: #171717;
  border: 1px solid #191919;
  border-radius: 1em;
  color: #fcfcfc;
  cursor: pointer;
  display: inline-block;
  padding: 0.875em 1.25em;
  text-align: center;
  -webkit-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.button:focus,
.button:hover {
  background-color: #1f1f1f;
}

.button--full {
  width: 100%;
}

.button--primary {
  background-image: -o-linear-gradient(315deg, #ae1fd1, #bf2f9a);
  background-image: linear-gradient(135deg, #ae1fd1, #bf2f9a);
  border: 1px solid #951fae;
}

.button--primary:focus,
.button--primary:hover {
  background-image: -o-linear-gradient(315deg, #bf2f9a, #ae1fd1);
  background-image: linear-gradient(135deg, #bf2f9a, #ae1fd1);
}

.button--small {
  font-size: 0.75rem;
}

.iphones {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-gap: 3em;
  gap: 3em;
}

.iphones > :first-child {
  margin-top: 5.5em;
}

.iphone {
  aspect-ratio: 9 / 19.5;
  background-color: #101010;
  border-radius: 3em;
  -webkit-box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.027999999999999997),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.027999999999999997),
    12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
    41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
  height: 844px;
  overflow: hidden;
  padding: 3em 1.5em;
  width: 390px;
}

.form {
  display: grid;
  grid-gap: 1.5em;
  gap: 1.5em;
}

.form__input {
  background-color: #171717;
  border: 2px solid #191919;
  border-radius: 1em;
  padding: 1em 1.25em;
  -webkit-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
  width: 100%;
}

.form__input:focus,
.form__input:hover {
  background-color: #1f1f1f;
}

.form__label {
  color: #fcfcfc;
  display: inline-block;
  font-size: 0.875rem;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.text--center {
  text-align: center;
}
</style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="iphones">
  <div class="iphone">
    <header class="header">
      <a href="#" class="button button--small">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <use xlink:href="#icon-arrow-left" />
        </svg>
      </a>
      <h1>Sign up</h1>
    </header>

    <main class="main">
      <div>
        <p>Sign up with one of the following options.</p>

        <ul class="buttons">
          <li>
            <a class="button button--full" href="#">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <use xlink:href="#icon-google" />
              </svg>
            </a>
          </li>
          <li>
            <a class="button button--full" href="#">
              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <use xlink:href="#icon-apple" />
              </svg>
            </a>
          </li>
        </ul>
   .........完整代码请登录后点击上方下载按钮下载查看