java 白7 Html第二次作业

最新推荐文章于 2024-03-26 23:48:49 发布

chuixu6817

最新推荐文章于 2024-03-26 23:48:49 发布

阅读量91

点赞数

原文链接：https://my.oschina.net/u/3859092/blog/1814443

版权

第一个作业代码：

css样式：

.a{border: 1px solid black; height:100px;width:100px;background-color:#3366FF;}
.a1{text-align:center;}
.a2{text-align:center;}

.b{border: 1px solid black; height:100px;width:100px;cellspacing="0";}
.b1{text-align:center;background-color:#3366FF;}
.b2{text-align:center;background-color:#3366FF;}

.c{border: 1px solid black; height:100px;width:100px;cellspacing="0";}
.c1{text-align:center;background-color:#3366FF;}
.c2{text-align:center;}
.c3{background-color:blue;}

.d{border: 1px solid black; height:100px;width:100px;cellspacing="0";}
.d1{text-align:center;background-color:#3366FF;}
.d2{text-align:center;}

.e{border: 1px solid black; height:100px;width:100px;cellspacing="0";}
.e1{text-align:center;background-color:#3366FF;}
.e2{text-align:center;}

.f{border: 1px solid black; height:100px;width:100px;cellspacing="0";}
.f1{text-align:center;background-color:#3366FF;}
.f2{text-align:center;}
.f3{text-align:center;background-color:#3366FF;}
.i{border:10px solid #3366FF;;margin-top:80px;}
.j{border:5px solid red;width:600px;height:400px;margin-left:580px;background-color:yellow;}
.j1{float:left;padding-right:20px;}
.j2{float:left; background-color:#33CC66;padding-left:10px;width:70px;height:400px;margin-left:140px;
font-size:18px;
}
.j3{float:left; font-size:20px;padding-right:10px;}
</style>

body代码：

<table class="D">
      <tr>
          <td class="d d1" rowspan="2">11</td>
          <td class="d d2">12</td>
          <td class="d d3">13</td>
      </tr>
      <tr>
          <td class="d d5">22</td>
          <td class="d d6">23</td>
      </tr>
   </table>

   <table class="E">
      <tr>
          <td class="e e1" colspan="3">11</td>
      </tr>
      <tr>
          <td class="e e4">21</td>
          <td class="e e5">22</td>
          <td class="e e6">23</td>
      </tr>
   </table>

   <table class="F">
      <tr>
          <td class="f f1" rowspan="2">1</td>
          <td class="f f2">2</td>
          <td class="f f3" colspan="2">3</td>
      </tr>
      <tr>
          <td class="f f5">6</td>
          <td class="f f6">7</td>
          <td class="f f7">8</td>
      </tr>
   </table>

   <div class="i"></div><br>

   <div class=j>
   <ul type="circle" class="j1">
       <li> <a href="http://www.baidu.com">百度一下</a><br><br></li>
       <li><a href="mailto:1984275315@qq.com">发送邮箱</a><br><br></li>
       <li><a href="javascript:('点击')">点击script</a><br><br></li>
   </ul>

       <div class="j2">
       <ul type="disc" >
           <li> 2<sub>x</sub><br></li><br>
           <li>2<sup>x</sup><br></li><br>
           <li>23</li><br>
       </ul>
       </div>

       <ul type="square" class="j3" >
           <li> 1<br>
              <ol type="1">
              <li>11</li>
              <li>12</li>
              </ol>
           </li><br>
           <li>2<br>
              <ol type="a">
              <li>21</li>
              <li>22</li>
              </ol>
           </li><br>
           <li>3
               <ol type="A">
                  <li>31</li>
                  <li>32</li>
               </ol>
           </li><br>
       </ul>

   </div>
</body>

效果图如下：

第二个作业：

css样式：

body代码部分：

<body>

<div class="a">
<img src="images/1.jpg"><br>
   创建您的雅虎账号,使用雅虎的免费邮箱及其其他网络服务。<br><br>
   <hr>
   <table class="A">
       <tr>
           <td>姓名<input type="text">  <input type="text"><br><br></td>
           </tr>
       <tr>
          <td>性别<select><option>-请选择其中一项-</option></select><br><br></td>
       </tr>
       <tr>
          <td>生日<input type="text"><select>
          <option>-请选择月份-</option>
          <option>一月</option>
<option>二月</option>
<option>三月</option>
<option>四月</option>
<option>五月</option>
<option>六月</option>
<option>七月</option>
<option>八月</option>
<option>九月</option>
<option>十月</option>
<option>十一月</option>
<option>十二月</option>

          </select><input type="text"><br><br></td>
       </tr>
           <tr>
           <td>
                   国家 <select class="j1">
               <option>中国</option>
               <option>日本</option>
               <option>韩国</option>
               </select><br><br>
           </td>
       </tr>
       <tr>
           <td> 邮政编码<input type="text"></td>
       </tr>
   </table>
</div>
<hr>
<div class="b">
    <h6 class="i">选择您的账号和密码</h6>
   <table class="B">
       <tr><td> 雅虎账号和雅虎邮箱地址<input type="text">@<select><option>yahoo.cn</option></</select><input type="button" value="检测">
           <br><br></td>
           </tr>
       <tr>
<td>密码 <input type="password" >
</td>
<td class="s1">
<h6>密码强度</h6>
   <div class="s"> </div>
<div class="s"> </div>
<div class="s"> </div>
<div class="s"> </div></td>
</tr>
<tr>
       <tr><td> 再次输入密码<input type="text">
          <br><br></td>
       </tr>
   </table>

</div>
<hr>
<div class="c">
    <h6 class="i">设置账号及密码保护信息（在您忘记账号或密码使用）</h6>
    <table class="C">
      <tr>
      <td> 备用邮箱（选填）<input type="text"><br><br></td>
      </tr>
    <tr>
      <td> 密码保护问题一<select><option>-请选择其中一项-</option></select><br><br></td>
      </tr>
    <tr>
      <td> 您的答案<input type="text"><br><br></td>
      </tr>
      <tr>
      <td> 密码保护问题二<select><option>-请选择其中一项-</option></select><br><br></td>
      </tr>
      <tr>
      <td> 您的答案<input type="text"><br><br></td>
      </tr>
    </table>
    <hr>

    <table class="last">
<tr>
<td></td>
<td><p>
如果您按下[创建我的账号]按钮，就表示已经阅读并同意接受 <a href="#">雅虎<br>服务条款</a>，<a href="#">雅虎隐私政策</a>
和 <a href="#">Mail服务条款</a>,并同意从中国雅虎接受与您的账户相关的邮件通知。您对账户<br>的使用及中国雅虎对账户信息的批露将接受中国雅虎服务条款的约束并遵守中华人民<br>共和国法律。
</p></td>
</tr>
<tr>
<td></td>
<td><button>创建我的账号</button></td>
</tr>
</table>
</div>
</body>