网上书店Html网页—— table实现

阅读：评论：0

这个是网上某Java web学习视频里的第一个项目，觉得效果还行，特别适合新手练手，就记录下来。

效果:

代码：

<html>
<head>
<meta charset=UTF-8">
<title>图书商城</title>
</head>
<body><!-- 整个页面 --><div id="page"><!-- top --><div id="top"><table width="100%"><tr><td width="70%"><img alt="logo" src="images/logo.png" /></td><td><img alt="cart" src="images/cart.gif"><a href="#">购物车</a>|<a href="#">帮助中心</a>|<a href="#">我的账户</a>|<a href="#">新用户注册</a></td></tr></table></div><!-- menu --><div id="menu"><table width="100%" bgcolor="#1C3F09"><tr align="center"><td><a href="#"><font color="#ffffff">文学</font></a>  <a href="#"><font color="#ffffff">生活</font></a>  <a href="#"><font color="#ffffff">计算机</font></a>  <a href="#"><font color="#ffffff">外语</font></a>  <a href="#"><font color="#ffffff">经管</font></a>  <a href="#"><font color="#ffffff">励志</font></a>  <a href="#"><font color="#ffffff">社科</font></a>  <a href="#"><font color="#ffffff">学术</font></a>  <a href="#"><font color="#ffffff">少儿</font></a>  <a href="#"><font color="#ffffff">艺术</font></a>  <a href="#"><font color="#ffffff">原版</font></a>  <a href="#"><font color="#ffffff">科技</font></a>  <a href="#"><font color="#ffffff">考试</font></a>  <a href="#"><font color="#ffffff">生活百科</font></a>  <a href="#"><font color="yellow">全部商品目录</font></a></td></tr></table></div><!-- search --><div id="search"><table width="100%" bgcolor="#B6B684"><tr align="right"><td>Search<input type="text"/><input type="button" value="搜索"/></td></tr></table></div><!-- content --><div id="content"><div align="right">首页 > 旅游 > 图书列表     </div><h1>商品目录</h1><hr/><h1>计算机类</h1><span>共xxx种商品</span><hr/><div><img alt="productlist" src="images/productlist.gif" width="100%"></div><div><table width="100%"><tr align="center"><td><div><img alt="book" src="bookcover/101.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td><td><div><img alt="book" src="bookcover/102.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td><td><div><img alt="book" src="bookcover/103.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td><td><div><img alt="book" src="bookcover/104.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td></tr><tr align="center"><td><div><img alt="book" src="bookcover/105.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td><td><div><img alt="book" src="bookcover/106.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td><td><div><img alt="book" src="bookcover/107.jpg"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td><td><div><img alt="book" src="bookcover/108.jpg" width="130" height="197"></div><div><span>书名:xxx</span><br/><span>售价:xxx</span></div></td></tr></table></div></div><!-- bottom --><div id="bottom"><table width="100%" bgcolor="#EFEEDC"><tr><td rowspan="2"><img alt="logo" src="images/logo.png"></td><td>CONTACT US</td></tr><tr><td>copyright 2008 &copy; BookStore All Rights RESERVED</td></tr></table></div></div></body>
</html>

代码里的图片资源见:

本文发布于:2024-02-02 02:12:44，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170681440440731.html

上一篇：岛上书店一本被高估的书

下一篇：DOM，getElement系列qureySelector系列，操作元素类型，innerHTML，innerText,value,事件绑定，操作css样式，操作属性：getArrtlibute等~

标签：书店网页网上 Html table

留言与评论（共有 0 条评论）