1.用户注册表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
.box {
  width: 1200px;
  margin: 100px auto 15px;
  border: 1px solid #dfdfdf;
}
.box .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ececec;
  padding: 6px 15px;
}
.box .title h3 {
  border-bottom: 1px solid #dfdfdf;
  color: #333;
}
.box .title p {
  font-size: 14px;
  font-weight: bold;
}
.box .title p a {
  color: #28a3ef;
}
.box .bottom {
  margin: 40px auto;
  width: 600px;
  display: grid;
  grid-template-rows: repeat(6, 38px);
  gap: 18px 0;
}
.box .bottom .inp {
  width: 368px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 2px;
}
.box .bottom .inp #check {
  grid-area: 1/2/2/3;
  place-self: center start;
}
.box .bottom .inp .bt1 {
  grid-area: 1/2/2/3;
  padding-left: 16px;
  font-size: 12px;
  color: #333;
  place-self: center start;
}
.box .bottom .inp label {
  place-self: center end;
  font-size: 14px;
  color: #333;
}
.box .bottom .inp input {
  border: 1px solid #999;
  border-radius: 0;
  padding: 6px 8px;
  outline: none;
}
.box button {
  width: 270px;
  padding: 6px;
  border-radius: 0;
  background-color: #c81623;
  border: none;
  color: #fff;
  font-size: 16px;
  margin-left: 99px;
}
.foot {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.foot .top {
  display: flex;
  justify-content: center;
}
.foot .top a {
  margin: 15px 0;
  padding: 0 20px;
  border-right: 1px solid #e4e4e4;
  font-size: 12px;
  color: #666;
}
.foot p {
  font-size: 12px;
  margin-bottom: 5px;
}
.at {
  border-color: #e6e6e6 !important;
  background-color: #f3f3f3 !important;
  color: #c6c6c6 !important;
}
</style>
<body>
    <div class="box">
        <div class="title">
            <h3>注册新用户</h3>
            <p>我有账号，去<a href="#">登陆</a></p>
        </div>
        <div class="bottom">
           <div class="inp">
            <label for="user">用户名：</label>
            <input type="text" placeholder="用户名" id="user" name="user">
           </div>
            <div class="inp"><label for="email">邮箱：</label>
                <input type="email" placeholder="邮箱" id="email" name="email"></div>
            <div class="inp"><label for="password">登录密码：</label>
                <input type="password" placeholder="设置登录密码" id="password"></div>
         <div class="inp">   <label for="pass">确认密码：</label>
            <input type="password" placeholder="再次确认密码" id="pass" name="pass"></div>
       <div class="inp"> 
        <input type="checkbox" class="bt" id="check" checked >
        <label for="check" class="bt1">同意协议并注册《品优购用户协议》
        </label></div>
        <button >完成注册</button>
        </div>
    </div>
    <div class="foot">
        <div class="top">
            <a href="#">关于我们</a>
            <a href="#">联系我们</a>
            <a href="#">联系客服</a>
            <a href="#">商家入驻</a>
            <a href="#">营销中心</a>
            <a href="#">手机品优购</a>
            <a href="#">销售联盟</a>
            <a href="#">品优购社区</a>
            <a href="#">品优购公益</a>
            <a href="#">English Site</a>
            <a href="#">Contact U</a>
        </div>
        <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
    <p>京ICP备08001421号京公网安备110108007702</p>
    </div>
    <script>
        let check=document.querySelector('input[type="checkbox"]')
        let btn=document.querySelector('button')
        check.addEventListener('click',function(){
        //     if(check.checked){
        //         btn.disabled=false
        //         btn.classList.remove('at')
        //     }else{
        //         btn.disabled=true
        //    btn.classList.add('at')
        //     }
        btn.classList.toggle('at')
        btn.disabled=!check.checked
        })
    </script>
</body>
</html>

2.简单后台

<body>
 <div class="top">
    <h1>网站台管理系统</h1>
    <p><span>admin</span>
    <a href="#">退出</a></p>
 </div>
    <div class="one">
       <div class="left">
        <a href="https://map.baidu.com/" target="max">baidu</a>
        <a href="https://map.baidu.com/" target="max">baidu</a>
        <a href="https://map.baidu.com/" target="max">baidu</a>
        <a href="https://map.baidu.com/" target="max">baidu</a>
       </div>
        <iframe srcdoc="点击左边链接" frameborder="1" name="max"></iframe>
</body>

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .top{
        display: flex;
        background-color: aquamarine;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
        height: 100px;
        padding: 0 20px;
        margin: 0 auto;
    }
.one {
    display:flex;
    width: 1200px;
    height: 800px;
    margin: 0 auto;
}
.left{
width: 100px;
background-color: hotpink;
text-align: center;
}
iframe{
    flex: 1;
}
.left a{
    display: block;
    margin: 10px 0;
}
</style>

用户注册表单与简单后台

1.用户注册表单

2.简单后台

相关文章