华恩JAVA班第44天

华恩JAVA班第44天

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>表单</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
 .textBorder{
  border-width:1px;
  border-style:solid;
 }
  </style>
 </HEAD>

 <BODY>
 注册账户:
 <form action=""method="post">
  <table border="0">
   <tr>
    <td>用户名:</td>
    <td><input
     type="text"id="username"name="userName"
     size="30"maxlength="10"class="textBorder"/></td>
   </tr>
   <tr>
    <td>密码:</td>
    <td><input type="password"name="password"size="20"class="textBorder"class="textBorder"/></td>
   </tr>
   <tr>
    <td>性别:</td>
    <td><input
     type="radio"name="sex"value="男"checked="checked"/>男<input
     type="radio"name="sex"value="女">女</td>
   </tr>
   <tr>
    <td>邮件:</td>
    <td><input id="ueamil"type="email"name="uemail" size="20"/>
    </td>
   </tr>
   <tr>
    <td>年龄:</td>
    <td><input id="age"type="number"name="age" size="3">岁
    </td>
   </tr>
   <tr>
    <td>生日:</td>
    <td><input id="birthday"type="date"name="birthday" size="5">-<select name="selectBirthday">
     <option value="" selected="selected">选择月份</option>    
     <option value="1">一月</option>
     <option value="2">二月</option>
     <option value="3">三月</option>
     <option value="4">四月</option>
     <option value="5">五月</option>
     <option value="6">六月</option>      
     <option value="7">七月</option>
     <option value="8">八月</option>
     <option value="9">九月</option>
     <option value="10">十月</option>
     <option value="11">十一月</option>
     <option value="12">十二月</option>
    </select>-<input id="birthday"type="date"name="birthday" size="3">
    </td>
   </tr>
   <tr>
   <td>上传头像:</td>
   <td><input type="file" name="uploadPhoto" /><br/>
   <input type="button" name="upload" value="上传头像"/></td>
   </tr>
   <tr>
    <td><input type="submit" value="注册"/></td>
    <td><input type="reset" value="重置" /></td>
   </tr>
  </table>
 </form>
 </BODY>
</HTML>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Ginzeon Ziu</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
 li{

 }
 .blue{
  color:blue; 
 }
 #temp{
  color:yellow;
 }
 #menu{
  width:200px;background:#ccc;
  font:bold 14px 宋体;
 }
 #menu1{
  color:yellow;
  width:200px;background:#ccc;
  font:bold 12px 隶书;
 }
  </style>
 </HEAD>

 <BODY style="background:url(E:。相册。20130112171225_ET5ms.jpeg)">
 <ul>
  <li>填写信息</li>
  <li id="temp">收发邮件</li>
  <li class="blue">注册成功</li>
 </ul>
 <div id="menu">
  <ol>
   <li>填写信息</li>
   <li>收发邮件</li>
  <li>注册成功</li>
  </ol>
 </div><br/>
 <div id="menu">
  <ul>
  <li>家用电器</li>
   <div id="menu1">
    <ul>
     <li>大家电</li>
     <li>洗衣机</li>
     <li>电冰箱</li>
     <li>平板电视</li>
    </ul>
   </div>
  <li>各类书籍</li>
  <li>日用百货</li>
   <div id="menu1">
    <ul>
     <li>肥皂</li>
     <li>洗衣粉</li>
     <li>纸巾</li>
     <li>洗发水</li>
    </ul>
   </div>
  <li>日用百货</li>
  </ul>
 </div>
 </BODY>
</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Ginzeon Ziu</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
 a:link{
 color:#999;
 }
 a:visited{
 color:#333;
 }
 a:hover{
 color:#ff7300;
 }
 a:active{
 color:#999;
 }
  </style>
 </HEAD>

 <BODY>
 <a href="#"target="_blank">跳转到本页</a>
 </BODY>
</HTML>

 

笔记

1.标签选择器
<head>
 <style type="text/css">
  li{
   
  }
 </style>
</head>

color:颜色
font-size:字大小
font-family:字体

2.class(类)选择器
.name{

}
<li class="name">
</li>

id选择器
#name{

}
<li id="name">


例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Ginzeon Ziu</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
 li{
  color:red;
  font-size:30px;
  font-family:隶书;
 }
 .blue{
  color:blue; 
 }
 #temp{
  color:yellow;
 }
 #menu{
  width:200px;background:#ccc;
  font:bold 14px 宋体;
 }
  </style>
 </HEAD>

 <BODY>
 <h1>标题1</h1>
 <hr/>
 <h2>标题2</h2>
 <p>段落1</p>
 <p>段落2</p>
 <p>注册步骤:</p>
 <ul>
  <li>填写信息</li>
  <li id="temp">收发邮件</li>
  <li class="blue">注册成功</li>
 </ul>
 <div id="menu">
  <ol>
   <li>填写信息</li>
   <li>收发邮件</li>
  <li>注册成功</li>
  </ol>
 </div>
 </BODY>
</HTML>

背景图片添加:
<BODY style="background:url(E:。相册。20130112171225_ET5ms.jpeg)">

导航菜单 横向的
<style>
 li{
  width:110px;
  list-style:none;
  float:left;
 }
</style>

 

外部样式:<link real="stylesheet"href="css外部文件"type="text/css">

 

更多信息可以参见同学富晓磊的博客:http://blog.sina.com.cn/u/1798827371

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值