华恩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
