php第三次2


设计下面的网页，用div+css，参考给出的实例实现。

 

 

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *  {margin:0;padding:0;}/*去掉页面样式*/
           body{color:#3333FF;}
          .content{
              background-color:#FFFF99;
            
            left:0;
             width:100%;
             height:400px;
             margin-top:0px;
            overflow:hidden;/*隐藏滚动条*/
         }
         .main{
            text-align:center;/*文本居中*/
             max-width:600px;
             height:400px;
             padding:100px 0px;/*上下80px,左右为0*/
             /*background:yellow;*//*验证div的位置*/
            margin:0 auto;/*设置上右下左,居中显示*/
         }
         .main h1{
             font-family:"楷体";/*设置字体*/
              border:1px solid #FF9999;
             display:block;
             margin:0px auto 20px auto;/*上 右  下 左*/
             padding:20px;
             width:520px;
             border-radius:50px;/*H5设置圆角边框*/
            font-size:70px;/*设置字体大小*/
             font-weight:2px;/*调整字体粗细*/
             text-align:center;
        }
         form{
             padding:20px 0;
         }
         form input{
             border:1px solid white;
             display:block;
             margin:0px auto 10px auto;/*上 右  下 左*/
             padding:10px;
             width:220px;
             border-radius:30px;/*H5设置圆角边框*/
             font-size:18px;
             font-weight:300;
             text-align:center;
         }
         form input:hover{
             background-color:#FFFF99;
        }
         form button{
             background-color:#CCFFCC;
             border-radius:10px;
             border:0;
             height:30px;
             width:50px;
             padding:5px 10px;
        }
         form button:hover{
             background-color:red;
         }
     </style>
<head>
    <meta charset="UTF-8">
    <title>****</title>
</head>
<body>
    <div class="content">    
     <div class="main">
         <h1 style="background-color: #FF9999;">信息学院</h1>
         <form>
             <input type="text" name="useid" placeholder="请输入账号"/>
             <input type="password" name="pw" placeholder="请输入密码">
            <button type="submit">登&nbsp;&nbsp;录</button>
             <button type="submit">注&nbsp;&nbsp;册</button>
         </form>
     </div>
 </div>    
</body>
</html>

 

posted @ 2022-03-16 21:45  好(justice)……  阅读(17)  评论(0)  编辑  收藏  举报