1号店项目

最新推荐文章于 2022-11-07 21:59:36 发布

原创

最新推荐文章于 2022-11-07 21:59:36 发布 · 3.1k 阅读

21 ·

CC 4.0 BY-SA版权

该项目涵盖了1号店的用户注册和登录功能，以及首页和搜索操作的详细设计和实现。

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

注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
  <style>
body,div,header{
  margin: 0px;
  padding: 0px;
}
header{
  overflow: hidden;
}
a {
  text-decoration: none;
}
.one{
  float: left;
  margin-left: 100px;
  margin-top: 25px;
}
.two {
  margin-right: 230px;
  margin-top: 2px;
  float: right;
  margin-left: 1050px;
}
    header p{
      display: inline-block;
      margin-right: 40px;
      color: grey;
      font-size: 13px;
      font-weight: lighter;
    }
header .two a:nth-child(2) {
  color: black;
}
header a {
  border: 1px grey solid;
  padding: 5px;
  color: dodgerblue;
}
#ct{
  padding: 5px;
  color: dodgerblue;
}
a {
  text-decoration: none;
}
    #uu{
      background: linear-gradient(to top,white,gray);
      border: 1px;
      height: 5px;
      width: 100%;
    }
    h2{
      text-align: center;
    }
    .pp{
      border: 1px  lightgray solid;
      height: 50px;
      width: 350px;
      color: gray;
    }
    p{
      text-align: center;
    }
    #jj{
      border: 1px  lightgray solid;
      height: 50px;
      width: 215px;
      color: gray;
    }
    #ji{
      border: 1px  lightgray solid;
      height: 50px;
      width: 120px;
      color: white;
      background-color:#57565f ;
      margin-left: 15px;
    }
    #uko{
      color: gray;
      font-weight: lighter;
    }
    #uki{
      color: blue;
    }
    #uci{
      color: white;
      background-color: red;
      border: 1px  lightgray solid;
      height: 50px;
      width: 350px;
      font-weight: bold;
      font-size: 15px;
    }
    #xi{
      font-weight: lighter;
      font-size: 13px;
    }
    #lk{
      font-weight: lighter;
      font-size: 13px;
    }
  </style>
</head>
<body>
<header>
<div class="one">
  <img src="../珠宝项目/loginlogo.jpg"/>
  <div class="two">
    <p>您好，欢迎光临1号店！<span id="ct">请登录</span></p>
    <a href="#"><span><img src="../珠宝项目/runbun.png"></span>帮助中心<span><img src="../珠宝项目/turnb.png"></span></a>
  </div>
</div>
</header>
<div id="uu"></div>
<h2>1号店注册</h2>
<p><input  class="pp" type="text"name="" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机号码"></p>
<p><input  id="jj" type="text"name="" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;验证码"><input id="ji" type="submit"value="获取验证码"></p>
<p><input  class="pp"type="text"name="" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;设置密码"></p>
<p><input  class="pp"type="text"name="" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确认密码"></p>
<p><span id="uko">点击注册，表示您同意1号店</span><span id="uki">《服务协议》</span></p>
<p><input id="uci" type="submit" value="同意协议并注册"></p>
<br/>
<p><span id="xi">沪ICP备13044278号|  合字B1.B2-20130004  |营业执照</span></p>
<p><span id="lk">Copyright © 1号店网上超市 2007-2016，All Rights Reserved</span></p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
  <style>
    body,div,header{
      margin: 0px;
      padding: 0px;
    }
    header{
      overflow: hidden;
    }
    .one{
       float: left;
       margin-left: 100px;
       margin-top: 25px;
     }
    .two {
      margin-right: 230px;
      margin-top: 2px;
      float: right;
      margin-left: 1050px;
    }
    header p{
      display: inline-block;
      margin-right: 40px;
      color: grey;
      font-size: 13px;
      font-weight: lighter;
    }
    header .two a:nth-child(2) {
      color: black;
    }
    header a {
      border: 1px grey solid;
      padding: 5px;
      color: dodgerblue;
    }
    #ct{
      padding: 5px;
      color: dodgerblue;
    }
    a {
      text-decoration: none;
    }
    #uu{
      background: linear-gradient(to top,white,gray);
      border: 1px;
      height: 5px;
      width: 100%;
    }
    section div:nth-of-type(1){
      width: 450px;
      height: 500px;
      float: right;
      margin-right: 400px;
      position: relative;
      bottom: -45px;
    }
    footer div:nth-of-type(1){
      text-align: center;
      margin-top: 100px;
    }
    section img:nth-of-type(1){
      margin-right: 0px;
      margin-left: 500px;
      position: relative;
      bottom: -25px;
    }
    .gu{
      border: 1px  lightgray solid;
      height: 50px;
      width: 330px;
      background: url("../珠宝项目/userHead.png")no-repeat 20px 15px;
      color: gray;
    }
    p{
      text-align: center;
    }
    .gt{
      border: 1px  lightgray solid;
      height: 50px;
      width: 330px;
      background: url("../珠宝项目/lock.png")no-repeat 20px 12px;
      color: gray;
    }
    .one img:nth-of-type(1){
      position: relative;
      left: 300px;
    }
    #uci{
      color: white;
      background-color: red;
      border: 1px  lightgray solid;
      height: 50px;
      width: 330px;
      font-weight: bold;
      font-size: 15px;
    }
    li:nth-child(1){
      width: 35px;
      height: 35px;
      background: url("../珠宝项目/qqf.png") no-repeat;
      background-size: 35px;
    }
    li:nth-child(1):hover{
      background: url("../珠宝项目/qqt.png") no-repeat;
      width: 35px;
      height: 35px;
      background-size: 35px;
    }
     li:nth-child(2){
      width: 35px;
      height: 35px;
      background: url("../珠宝项目/wbf.png") no-repeat;
      background-size: 35px;
    }
    li:nth-child(2):hover{
      background: url("../珠宝项目/wbt.png") no-repeat;
      width: 35px;
      height: 35px;
      background-size: 35px;
    }
    li:nth-child(3){
      width: 35px;
      height: 35px;
      background: url("../珠宝项目/zhif.png") no-repeat;
      background-size: 35px;
    }
    li:nth-child(3):hover{
      background: url("../珠宝项目/zhit.png") no-repeat;
      width: 35px;
      height: 35px;
      background-size: 35px;
    }
    li:nth-child(4){
      width: 35px;
      height: 35px;
      background: url("../珠宝项目/wxf.png") no-repeat;
      background-size: 35px;
    }
    li:nth-child(4):hover{
      background: url("../珠宝项目/wxt.png") no-repeat;
      width: 35px;
      height: 35px;
      background-size: 35px;
    }
    li{
      display: inline-block;
      position: relative;
      left: 20px;
      margin-right: 13px;
    }
    li:nth-child(6) {
      width: 15px;
      height: 15px;
      background: url("../珠宝项目/turnb.png") no-repeat;
      background-size: 15px;
      position: relative;
      top: -7px;
    }
    li:nth-of-type(5){
      position: relative;
      left: 30px;
      top: -10px;
    }
    #mn{
      color: gray;
      font-size: 13px;
    }
    #jm{
      font-weight: bold;
      color: black;
      font-size: 13px;
    }
    #vb{
      position: relative;
      bottom: -7px;
    }
    #xi{
      font-weight: lighter;
      font-size: 13px;
      position: relative;
      left: 420px;
    }
    #lk{
      font-weight: lighter;
      font-size: 13px;
      position: relative;
      left: 420px;
    }
  </style>
</head>
<body>
<header>
  <div class="one">
    <img src="../珠宝项目/loginlogo.jpg"/>
    <div class="two">
      <p>您好，欢迎光临1号店！<span id="ct">请登录</span></p>
      <a href="#"><span><img src="../珠宝项目/runbun.png"></span>帮助中心<span><img src="../珠宝项目/turnb.png"></span></a>
    </div>
  </div>
</header>
<div id="uu"></div>
<section>
  <img src="../珠宝项目/loadimg.jpg"/>
  <div id="mn"><span id="vb">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="jm">1号店用户登录</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册账号</span>
  <p><input class="gu" type="text" name="" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱/手机/用户名"></p>
    <p><input class="gt" type="text" name="" value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱/手机/用户名"></p>
    <p><input type="checkbox" name="ss" value="">自动登录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;忘记密码？<p>
    <p><input id="uci" type="submit" value="登录"></p>
    <p>更多合作网站账号登录</p>
    <p>
      <ul>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li><a href="#"></a></li>
      <li>更多合作网站</li>
      <li></li>
      </ul>
    </p>
  </div>
</section>
<br/>
<footer>
  <div>
<p><span id="xi">沪ICP备13044278号|  合字B1.B2-20130004  |营业执照</span></p>
<p><span id="lk">Copyright © 1号店网上超市 2007-2016，All Rights Reserved</span></p>
  </div>
</footer>
</body>
</html>

首页

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <style>
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
    header{
      margin-top: -10px;
      height: 30px;
      padding:5px;
      background: linear-gradient(gainsboro,ghostwhite);
      overflow: hidden;
    }
    header span{
      color: dimgray;
      position: absolute;
      left: 50px;
      padding-top: 6px;
      font-size: 12px;
      font-weight: lighter;
    }
    .ddao .注册{
      color: red;
    }
    .ddao li{
      display: inline-block;
      font-size: 12px;
      font-weight: lighter;
      color:dimgray;
      margin: 0px 5px;
      vertical-align: top;
    }
    .ddao{
      float: right;
      position: absolute;
      right: 60px;
      mar