zoukankan      html  css  js  c++  java
  • 新闻网站项目静态页面--注册页

    外联css register.css:

    body{
        background-image:url(../images/login/backgroundimg.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .ui.basic.segment.container.content{
       425px;
    
      margin-left: 50%;
      margin-top: 389px;
    }
    .ui.header{
      color:red;
      font-size: 50px !important;
      height: 75px;
    }
    input{
        border-radius: 31.5px!important;
        height: 31px!important;
        background-color: #ffffff!important;
        border: solid 1px #ededed!important;
    }
    .field{
      position: relative;
    }
    .ui.image.top{
      position: absolute;
      left: -20px;
      top:10px;
    }
    .ui.red.button.register{
      border-radius: 32px;
      height: 30px;
       400px;
      padding-top: 8px;
    }
    .ui.basic.segment.container.footer{
      position: relative;
      margin-top: 150px;
    }
    .ui.circular.red.button.backtoindex{
       31px!important;
      height: 62px;
      border-radius: 15.5px;
      background-color: #f30c28;
      position: absolute;
      transform: translate(-50%,-50%);
      left: 50%;
      top:30px;
      padding: 0;
    }
    img{
      margin-left: 2px;
    }
    h4{
        font-size: 12px!important;
        color: #ffffff;
        margin-left: 2px;
    }
    .ui.image.title{
      position: relative;
      transform: translate(-50%);
      left: 50%;
      top:45px;
    }
    

    html文件:

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>注册页</title>
        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="css/register.css" media="screen" title="no title" charset="utf-8">
      </head>
      <body>
        <div class="ui basic segment container content">
          <h1 class="ui center aligned header">注册</h1>
          <div class="ui form">
            <div class="field">
              <div class="ui  image top">
                <img src="images/login/usericon.png" alt="" />
              </div>
              <input type="text" placeholder="用户名">
            </div>
            <div class="field">
              <div class="ui  image top">
                <img src="images/login/checkboxicon.png" alt="" />
              </div>
              <input type="text" placeholder="注册邮箱">
            </div>
            <div class="field">
              <div class="ui  image top">
                <img src="images/login/lockicon.png" alt="" />
              </div>
              <input type="text" placeholder="密码">
            </div>
            <div class="field">
              <div class="ui  image top">
                <img src="images/login/lockicon.png" alt="" />
              </div>
              <input type="text" placeholder="确认密码">
            </div>
            <div class="field">
              <button type="button" class="ui red button register">注册</button>
            </div>
          </div>
        </div>
        <div class="ui basic segment container footer">
          <div class="bottom">
            <div class="ui divider"></div>
            <button type="button" name="button" class="ui circular red button backtoindex">
                <img src="images/login/homeicon.png" style="position:absolute;left:18%;top:10%;">
                <h4>首页</h4>
            </button>
            <div class="ui image title">
                <img src="images/login/zhiribao.png" alt="" />
            </div>
          </div>
        </div>
      </body>
    </html>
    

     

  • 相关阅读:
    请输入关键字
    如何把心动变成行动
    理解ASP.NET MVC系列之一:ASP.NET MVC基于MVC设计模式
    window.showModalDialog()
    visual studio 2010 winform程序不能添加对system.web的引用[转载]
    理解ASP.NET MVC系列之三:从URL到Route
    Dan计划:重新定义人生的10000个小时
    为Visual Studio添加配色方案
    [转载]用缓存服务器负载均衡 提数据库查询效率
    Json的序列化和反序列化
  • 原文地址:https://www.cnblogs.com/xyxpython/p/6607782.html
Copyright © 2011-2022 走看看