DIV+CSS实现商城首页

来源：互联网发布：淘宝上李宁官方网店编辑：程序博客网时间：2024/05/01 00:58

用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" onsubmit="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>

阅读全文

0 0