2022/03/06

今天学习了div+css，并写了一两个页面

页面一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tabel用户注册</title>
</head>
<style>
    .blue{
    }
</style>
<body>

<div style="float: left">名字：<input type="text" value="张三"><br><br>
密码：<input type="password"><br><br>
性别：<input type="radio" name="sex" value="0" checked="checked"><img src="../img/Male.gif">男
    <input type="radio" name="sex" value="1"><img src="../img/Female.gif">女<br><br>
爱好：<input type="checkbox" name="hobby" value="0" checked="checked">聊天
    <input type="checkbox" name="hobby" value="1">yundong<br><br>
出生日期：<input size="4" type="text" value="yyyy">年
    <select>
        <option>[选择月份]</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
    </select>月
    <input size="2" type="text" value="dd">日<br><br>
<input type="submit" value="提交">
    <input type="reset" value="重置"></div><br><br>
<div >
    <img src="../img/read.gif"><b>阅读贵美网服务协议</b><br><br>
    <textarea rows="15" cols="40">欢迎使用阅读服务条款建议，本协议阐述之条款和条件适用于您使用xx.com网站的各种工具和服务。

  本服务协议双方为xx与xx网用户，本服务协议具有合同效力。
  xx的权利和义务
    1.xx有义务在现有技术上维护整个网上交易平台的正常运行，并努为提升和改进技术,使用户网上交易活动的顺利。
    2.对用户在注册使用xx网上交易平台中所遇到的与交易或注册有关的问题及反映的情况，x应及时作出回复。
    3.对于在xx网网上交易平台上的不

            </textarea>
</div>


</body>
</html>

页面二、

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    *  {margin:0;padding:0;}/*去掉页面样式*/
    body{color:white;}
    .content{
      background-color:yellow;
      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:"楷体";/*设置字体*/
      font-size:70px;/*设置字体大小*/
      font-weight:2;/*调整字体粗细*/
      color: blue;
      border-radius: 30px;
      background:pink ;
      width: 650px;
      text-align:center;
    }
    form{
      padding:20px 0;
    }
    form input{
      border-style: inset;
      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:pink;
    }
    form button{
      background-color:gainsboro;
      border-radius:10px;
      border-style: outset;
      height:30px;
      width:50px;
      padding:5px 10px;
    }
    form button:hover{
      background-color:red;
    }
  </style>

</head>
<body>
<div class="content">
  <div class="main">
    <h1>信息学院</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-08 17:56  年年ℓ  阅读(32)  评论(0)    收藏  举报