用table可以实现一个布局,但是远没有div+css来的强大。基本上所有的网页开发时的布局都是用的div+css,div知识一个框架,没有css的配合也是不行的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#father{
border: 1px solid red;
width:1300px;
height: 2000px;
margin: auto;
}
#logo{
border: ipx solid black;
width: 1300px;
height: 50px;
}
.top{
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid red;
background-color: black;
}
ul li{
display: inline;
color: white;
}
#product{
border: 1px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 1px solid blue;
width: 100%;
height: 50px;
}
#product_bottom{
border: 1px solid green;
width: 100%;
height: 500px;
}
#product_left{
border: 1px solid red;
width: 200px;
height: 500px;
float: left;
}
#product_right{
border: 1px solid red;
width: 1094px;
height: 500px;
float: left;
}
#big{
border: 1px solid red;
width: 544px;
height: 248px;
float: left;
}
.small{
border: 1px solid blue;
width: 180px;
height: 248px;
float: left;
text-align: center;
}
#lianjie{
text-align: center;
}
</style>
</head>
<body>
<div id=father>
<!1--logo-->
<div id="logo">
<div class="top">
<img src="logo2.png" height="46px">
</div>
<div class="top">
<img src="header.png" height="46px">
</div>
<div class="top" id="top">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!2-->
<div id="menu">
<ul>
<li style="font-size: 20px;">首页</li>
<li>手机数码</li>
<li>家用电器</li>
<li>鞋靴箱包</li>
<li>孕婴保健</li>
</ul>
</div>
<!3-->
<div id="">
<img src="1.jpg" width="100%">
</div>
<!4-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
<img src="title2.jpg">
</div>
<div id="product_bottom">
<div id="product_left">
<img src="big01.jpg" width="100%" height="100%">
</div>
<div id="product_right">
<div id="big">
<a href="#"><img src="middle01.jpg" width="100%" height="100%"> </a>
</div>
<div class="small">
<a href="#"><img src="small03.jpg" > </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg" > </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
</div>
</div>
</div>
<!5-->
<div id="ad">
<img src="ad.jpg" width="100%">
</div>
<!6-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">热门商品</span>
<img src="title2.jpg">
</div>
<div id="product_bottom">
<div id="product_left">
<img src="big01.jpg" width="100%" height="100%">
</div>
<div id="product_right">
<div id="big">
<a href="#"><img src="middle01.jpg" width="100%" height="100%"> </a>
</div>
<div class="small">
<a href="#"><img src="small03.jpg" > </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg" > </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
<div class="small">
<a href="#"><img src="small03.jpg"> </a>
<a href="#"><p style="color: gray">电炖锅</p></a>
<p style="color: red">RMB:299</p>
</div>
</div>
</div>
</div>
<!7-->
<div id="">
<img src="footer.jpg" width="100%">
</div>
<!8-->
<div id="lianjie">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
CopyRight 2017-9999 刘氏商城 版权所有
</p>
</div>
</div>
</body>
</html>
注册表单的练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function checkForm()
{
// alert("aa");
var uvalue=document.getElementById("user").value;
alert("uvalue");
}
</script>
</head>
<body>
<table border="1px" align="center" cellpadding="0px" cellspacing="0px" width="1300px" >
<tr>
<td>
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="logo2.png" height="47px">
</td>
<td width="33.3%">
<img src="header.png" height="47px">
</td>
<td width="33.3%">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50px">
<td bgcolor="black">
<a href="#"><font size="5">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">家用电器</font></a>
</td>
</tr>
<tr>
<td height="600px" background="regist_bg.jpg">
<form action="#" method="get" name="fegForm" οnsubmit="return checkForm();">
<table border="1px" width="750px" height="400px" align="center" bgcolor="white">
<tr height="40px">
<td colspan="2"><font size="4">会员注册 USER REGISTER</font></td>
</tr>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" name="user" size="45px">
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" name="repassword">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<input type="text" name="Email" size="35px">
</td>
</tr>
<tr>
<td>
姓名:
</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>
出生日期:
</td>
<td>
<input type="text" name="birthday">
</td>
</tr>
<tr>
<td>
验证码:
</td>
<td>
<input type="text" name="yzm">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<img src="footer.jpg" width="100%">
</td>
</tr>
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
CopyRight 2017-9999 丢丢 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>