表格
代码示例
<!doctype html>
<html>
<head>
<meta charse="utf-8">
<title>笔记本</title>
</head>
<body>
<table border="1">
<caption>本周畅销笔记本排名TOP3</caption>
<thead>
<tr>
<th>排名</th>
<th>品牌</th>
<th>型号</th>
<th>图片</th>
<th>价格</th>
<th>销售量</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>联想</td>
<td>拯救者</td>
<td><img src="lenovo_r720.jpg"width="150px"height="150px"/>
</td>
<td>￥5799</td>
<td>356</td>
</tr>
<tr>
<td>2</td>
<td>苹果</td>
<td>MacBook Air</td>
<td><img src="Apple_Air.jpg"width="150px"height="150px"/></td>
<td>￥5868</td>
<td>203</td>
</tr>
<tr>
<td>3</td>
<td>小米</td>
<td>小米Pro</td>
<td><img src="MI_Pro.jpg"width="150px"height="150px"/>
<td>￥5599</td>
<td>178</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5=align="right">总销售量:</td>
<td>737</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鱼塘</title>
<style type="text/css">
#zhen {
width: 200;
height: 200;
font-size: 12px;
background-color: #66ccff;
}
a {
text-decoration: none;
}
a:hover {
color: green;
}
.title1 {
font-family: 隶书;
color: red;
font-size: 20px;
}
</style>
</head>
<body bgcolor="whitesmoke">
<table id="zhen" align="center">
<form>
<tr>
<td>
<font class="title1">用户名：</font><input type="text" required="required" onvalid="setcustomvalidity" oninput="setcustomcalidity(必须输入)" /></td>
</tr>
<tr>
<td>
<font class="title1">密码：</font><input type="password" required="required" /></td>
</tr>
<tr>
<td> 性别：
<input type="radio" name="女" value="女" />女
<input type="radio" name="女" value="男" />男
</td>
</tr>
<tr>
<td> 爱好：
<input type="checkbox" name="chang" value="唱" />哈哈哈
<input type="checkbox" name="tiao" value="跳跳" />跳跳
<input type="checkbox" name="rap" value="rap" />rap
<input type="checkbox" name="namqiu" value="买买买" />买买买
</td>
</tr>
<tr>
<tr>
<td align="center"><a href="#">买买买！</a></td>
</tr>
<td>出生年月：
<select>
<option selected="selected">1999年</option>
<option >2000年</option>
<option >2001年</option>
<option >2002年</option>
<option >2003年</option>
<option >2004年</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="提交" />
<input type="reset" value="重置" /></td>
</tr>
</form>
</table>
</body>
</html>
注册页面
代码
<!doctype html>
<html>
<head>
<title>注册页面</title>
</head>
<body>
<p>
<img src="../images/wotaoreg.PNG">
</p>
<table width="950" border="1" align="center" cellpadding="0" cellpadding="0" bordercolor="#99ccff">
<form name="userfrm" method="post" action="register_success.htm" οnsubmit="return validateform"()>
<tr class="register_table_line">
<td width="160" align="right" bgcolor="#e7fbff">姓名:</td>
<td width="507" align="left" bordercolor="#e7e3e7"><input name="fname" type="text"
class="register_textbroader"id="fname" size="24"></td>
</tr>
<td width="160" align="right" bgcolor="#e7fbff">姓氏:</td>
<td align="left" bordercolor="#e7e3e7"><input name="fname" type="text"
class="register_textbroader"id="lname" size="24"></td>
</tr>
<tr class="register_table_line">
<td width="160" align="right"bgcolor="#e7fbff">登录名:</td>
<td align="left"bordercolor="#e7e3e7"><input name="lname" type="text"
class="register_textbroader" id="sname"size="24">(可包含a-z、0-9和下划线)
</td>
</tr>
<tr class="register_table_line">
<td width="160" align="right"bgcolor="#e7fbff">密码:</td>
<td width="left"bordercolor="#e7e3e7"><input name="pass" type="password"
class="register_textbroader" id="pass"size="26">(可包含6个字符)
</td>
</tr>
<tr class="register_table_line">
<td width="160" height="0" align="right"bgcolor="#e7fbff">再次输入密码:</td>
<td height="0"align="right"bgcolor="#e7e3e7"><input name="rpass" type="password"
class="register_textbroader" id="rpass"size="26"></td>
</tr>
<tr class="register_table_line">
<td width="160"height="0"align="right"bgcolor="#e7fbff">电子邮箱:</td>
<td width="o"align="left"bordercolor="#e7e3e7"><input name="email" type="text"
class="register_textbroader" id="pass"size="24">（必须包含@字符）</td>
</tr>
<tr class="register_table_line">
<td width="160"height="0"align="right"bgcolor="#e7fbff">性别:</td>
<td align="left" bordercolor="#e7e3e7">
<input name="left" bordercolor="#e7e3e7" value="男"checked>
<img src="../images/male.gif" width="23" height="21">男
<input nmae="gen" type="radio" value="女" class="input">
<img src="../images/female.gif" width="23"height="21">女
</td>
</tr>
<tr class="register_table_line">
<td width="160" align="right" bgcolor="#e7bff">爱好:</td>
<td align="left" bordercolor="#e7e3e7">
<label>
<input type="checkbox" name="checkbox" value="checkbox">
</label>
运动
<label>
<input type="checkbox" name="checkbox2" value="checkbox">
</label>
聊天
<label>
<input type="checkbox" name="checkbox22" value="checkbox">
</label>
玩游戏
</td>
</tr>
<tr class="register_table_line">
<td width="160" align="right" bgcolor="#e7bff">出生日期:</td>
<td align="left" bordercolor="#e7e3e7">
<input name="byear" class="register_textbroader" id="byear"
οnfοcus="this.value=''"value="yyyy" size=4 maxlength=4>
年
<select name="bmon">
<option value=""selected>[选择月份]
<option value=0>一月
<option value=1>二月
<option value=2>三月
<option value=3>四月
<option value=4>五月
<option value=5>六月
<option value=6>七月
<option value=7>八月
<option value=8>九月
<option value=9>十月
<option value=10>十一月
<option value=11>十二月
</select> 月
<input nmae="body" class="register_textbroader" id="bday" onfous="this.value=''"
value="dd" size=2 maxlength=2>日
</td>
</tr>
<tr class="register_table_line">
<td width="160" height="35"align="right" bgcolor="#e7bff">
<input type="reset" name="reset" value="重填"></td>
<td hight="35" align="left" bordercolor="#e7e3e7">
<input type="submit" name="button" value="同意以下服务条款，提交注册信息">
</td>
</tr>
<tr>
<td colspan="2"><table width="760" border="o">
</tr>
<td height="36">
<h4><img src="../images/read.gif" width="35" height="26">阅读我淘网服务协议</h4>
</td>
</tr>
<tr>
<td height="120">
<textarea name="textarea" cols="80" rows="6">
欢迎阅读服务条款协议，本协议阐述条款和条件适用于wotao.com网站的各种工具和服务。
本服务协议双方为淘与淘网用户，本协议具有合同效力。
我淘的权利和义务
1、维持网上交易平台的运行
2、回复注册有关问题
3、删除相关信息、终止服务不当行为
4、没有义务对所有用户的注册资料进行审查
</textarea>
</td>
</tr>
</table></td>
</tr>
</form>
</table>
</body>
</html>
页面布局与规划
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<style type="text/css">
/*内嵌样式*/
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.left {
float: left;
}
.right {
float: right;
}
.ovf {
overflow: hidden;
}
.mg-b-10 {
margin-bottom: 10px;
}
.mg-t-10 {
margin-top: 10px;
}
.blue {
background-color: blue;
}
.gray {
background-color: #ccc;
}
.lh-30 {
line-height: 30px;
}
.head {
height: 30px;
}
.container {
width: 1000px;
margin: auto;
}
.nav ul li {
float: left;
width: 111px;
text-align: center;
}
.nav ul li:hover {
cursor: pointer;
color: white;
background-color: green;
}
.cnt .left {
width: 200px;
background-color: lightblue;
height: 820px;
}
.cnt .right {
width: 790px;
height: 820px;
}
.cnt .ovf .left {
width: 390px;
height: 200px;
background-color: pink;
}
.cnt .ovf .right {
width: 390px;
height: 200px;
background-color: orange;
}
.cnt_right_middle {
height: 300px;
background-color: yellow;
}
.cnt_right_bottom {
height: 300px;
background-color: purple;
}
.foot {
height: 200px;
background-color: black;
}
</style>
</head>
<body>
<!--头部-->
<div class="head blue lh-30">头部</div>
<!--内容-->
<div class="container">
<!--导航栏-->
<div class="nav lh-30 ovf gray mg-b-10 mg-t-10">
<ul>
<li>首页</li>
<li>新闻</li>
<li>热点</li>
<li>动态</li>
<li>直播</li>
<li>社区</li>
<li>地图</li>
<li>服务</li>
<li>关于我们</li>
</ul>
</div>
<!--内容-->
<div class="cnt ovf">
<div class="left">左边</div>
<div class="right">
<!--右边内容-->
<div class="cnt_right_top ovf">
<div class="left">右左</div>
<div class="right">右右</div>
</div>
<div class="cnt_right_middle mg-t-10"></div>
<div class="cnt_right_bottom mg-t-10"></div>
</div>
</div>
<!--底部-->
<div class="foot mg-t-10"></div>
</div>
</body>
</html>
扫一扫
1862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
