css的应用

最新推荐文章于 2024-09-20 11:38:47 发布

chuanghui4698

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量185

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3858557/blog/1813825

版权

作业一、

html 的代码:

<body>

</table>

</table>

</table><br>

<div class="d2">
<div class="d_left">
  <ul class="u1" type="circle">
   <li><a href="http://www.baidu.com">百度一下</a></li>
   <li><a class="a_center" href="mailto:1523071916@qq.com">快速发邮件</a></li>
   <li><a href="javascript:alert('你好')">点击（javascript）</a></li>
  </ul>
</div>
<div class="d_center">
    <ul class="u1">
     <li>2<sub>X</sub></li>
     <li>2<sup>X</sup></li>
     <li class="u1_3">23</li>
    </ul>
</div>
<div class="d_right">
    <ul class="u1" type="square">
     <li>1
      <ol type="1">
       <li>11</li>
       <li>12</li>
      </ol>
     </li>
     <li>2
      <ol type="a">
       <li>21</li>
       <li>22</li>
      </ol>
     </li>
     <li>3
      <ol type="A" start="2">
       <li>31</li>
       <li>32</li>
      </ol>
     </li>
    </ul>
</div>

</div>

</body>

引入外部css文件代码：

css代码

.t{
width:100px;
height:100px;
margin-left:5px;
float:left;
}

/*设置加粗与剧中*/
.t_bolder{
font-weight:bolder;
text-align:center;
}

/*设置小格子的颜色*/
.t_color{
background:#74c2ef;
}

.d1{
width:100%;
height:15px;
background:#74c2ef;
margin-top:100px;//设置div具上的距离;
}
.d2{
width:360px;
height:300px;
border:2px solid #ff0000;
background:#ffff00;
margin-top:10px;
}

.u1_3{
text-decoration: underline;
font-weight:bolder;
}

.d_left{
width:170px;
height:100%;
float:left;

}
.d_center{
width:60px;
height:299px;
border:1px solid #ff0000;
background:#98f565;
float:left;
}
.d_right{
width:120px;
height:100%;
float:right;
}

.a_center{
color:#ff0000;
}

效果图

作业二、

html代码

<div class="d_establish">
<p>创建您的雅虎账号，使用雅虎的免费邮箱及其他网络服务。</p>

<table class="t">

  <tr>
   <td colspan="2"><hr></td>


  </tr>
  <tr><td class="t1_td">姓名</td><td><input type="text" class="input_long_s"/> <input type="text"/></td></tr>
  <tr>
   <td class="t1_td">性别</td>
   <td>
    <select>
     <option>- 选择其中一项 -</option>
     <option>男</option>
     <option>女</option>
    </select>
   </td>
  </tr>
  <tr>
   <td class="t1_td">生日</td>
   <td>
    <input type="text" class="input_short"/>
    <select class="input_short">
     <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" class="input_short"/>

   </td>
  </tr>
  <tr>
   <td class="t1_td">国家</td>
   <td>
    <select class="input_long_quan">
     <option>中国</option>
     <option>美国</option>
     <option>日本</option>
     <option>韩国</option>
     <option>土耳其</option>
     <option>英国</option>
     <option>德国</option>
     <option>法国</option>
     <option>意大利</option>
     <option>巴西</option>
     <option>印度</option>
    </select>

   </td>
  </tr>
  <tr><td class="t1_td">邮政编码</td><td><input type="text"/></td></tr>

  <tr>
   <td colspan="2"><hr></td>
  </tr>


  <tr>
   <td colspan="2"><p class="p1">选择您的账号和密码</p></td>
  </tr>

  <tr>
   <td class="t1_td">雅虎账号和雅虎邮箱地址</td>
   <td>
    <input type="text"/>@
    <select>
     <option>yahoo.cn</option>
    </select>

    <input type="button" value="检测"/>

   </td>
  </tr>
  <tr>
   <td class="t1_td">密码</td>
   <td>
   <input type="text"/>
   <font class="p_password_strength">密码强度</font><br>
   <div class="zong_password_strength ">
    <div class="password_strength "></div>
    <div class="password_strength "></div>
    <div class="password_strength "></div>
    <div class="password_strength "></div>
   </div>
   </td>

  </tr>
  <tr><td class="t1_td">再次确认密码</td><td><input type="text"/></td></tr>

  <tr>
   <td colspan="2"><hr></td>
  </tr>

  <tr>
   <td colspan="2"><p class="p1">设置账号及密码保护信息（在您忘记账号或密码时使用）</p></td>
  </tr>

  <tr>
   <td class="t1_td">备用邮箱（选填）</td>
   <td>
    <input type="text" class="input_long_quan"/>
   </td>
  </tr>
  <tr>
   <td class="t1_td">密码保护问题1</td>
   <td>
    <select class="input_long_quan">
     <option>-选择其中一项-</option>
    </select>
   </td>

  </tr>
  <tr><td class="t1_td">您的答案</td><td><input type="text" class="input_long_quan"/></td></tr>
<tr>
   <td class="t1_td">密码保护问题2</td>
   <td>
    <select class="input_long_quan">
     <option>-选择其中一项-</option>
    </select>
   </td>

  </tr>
  <tr><td class="t1_td">您的答案</td><td><input type="text" class="input_long_quan"/></td></tr>



  <tr>
   <td colspan="2"><hr></td>
  </tr>

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

  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td>
    <div class="d_button">创建我的账号</div>
   </td>
  </tr>
</table>
</div>

</body>

外部的css的代码：<link href="css/formcss.css" rel="stylesheet">

css代码

.zong{
width:900px;
height:59px;
background-image: url(../images/0516_background.JPG);
background-repeat: repeat-x;
}
.t{
width:650px;
}
.logo_a{
color:#000000;
text-decoration: none;
margin-top:0px;
float:right;
}
.d_establish {
width:600px;
height:200px;

}
.t1_td{
text-align:right;
}

.p1{
color:#771e9f;
font-weight:bold;
}
.zong_password_strength{
width:100%;
height:100%;
margin-left:170px;

}
.password_strength {
width:15px;
height:5px;

border:1px solid #8e8e8e;
float:left;
margin-left:1px;
}

.p_password_strength{
margin-left:15px;
font-size:12px;
}
.hr_color{
color:#8e8e8e;
}
.input_short{
width:95px;
}

.input_long_quan{
width:300px;
}
.input_long_s{
width:140px;
}
.p_style{
width:450px;
}
.p_bottom{
font-size:12px;
font-weight:bold;
}
.a1{
text-decoration: none;
}