本文介绍了如何在不使用CSS的情况下，仅用HTML5实现网上书城的界面设计。通过设置div、table和内联样式，实现了页面布局和元素居中。虽然遇到了一些挑战，如水平分割线显示问题，但通过br标签实现了部分功能。最终展示了头部和书籍布局的实际效果。
老师不让使用css
后来发现纯html5页面也可以实现很多事情
效果图：
1.设置8个横向div作为模板
弄了一小时我发现，Notepad,subline_Text,Dreamware，这三个软件对组件的宽高背景色设计需要用到css.
——所以降低一定难度，对盒子的宽高进行css设置。
（为了让老师清除只对这几个参数进行了css设置，这里采用内联的写法）
我还是很奇怪这个div的宽高，背景色应该时自身属性——但是只有在css中设置才能起作用（问题不大，这些不是重点）
文字居中原本可以使用line-height:“40px”; text_align:”center”;
感觉这些也是css样式，那么使用table试一下，假设有3行，把它放在中间的那一行，应该就是居中了。
<table>
<tr> </tr>
<tr>
<ul align="right">
<img src="images/cart.gif">
<a href="#">购物中心</a> <span>|</span>
<a href="#">帮助中心</a><span> |</span>
<a href="#">我的账户</a><span> | </span>
<a href="#">新用户注册</a>
</ul>
</tr>
<tr> </tr>
</table>
使用span或者其他标签的效果都没有ul好——上传的时候发现直接粘贴代码会影响网页的显示，所以要上传到代码块，有点好笑。
<ul align="center">
<a href="#"><font color="white" size="2px">文学 </font></a>
<a href="#"><font color="white" size="2px">生活 </font></a>
</ul>
通过换行br/实现向上补白的功能
但是hr/显示不了水平分割线
原因如下：
补充一点，水平在div之间设置时会离得更远。
不说了直接上代码：
<!DOCTYPE html>
<html>
<head>
<title>纯h5页面</title>
<style type="text/css">
/*重置浏览器的默认样式 */
* { margin:0; padding:0; list-style:none;}
</style>
</head>
<body>
<div style="width: 1024px; margin: 0 auto; background: #eee;">
<!--header_begin-->
<header style="width: 1024px; height: 70px;">
<img src="images/logo.png" align="left">
<table>
<tr> </tr>
<tr>
<ul align="right">
<img src="images/cart.gif">
<a href="#">购物中心</a> <span>|</span>
<a href="#">帮助中心</a><span> |</span>
<a href="#">我的账户</a><span> | </span>
<a href="#">新用户注册</a>
</ul>
</tr>
<tr> </tr>
</table>
</header>
<!--header_end-->
<!--nav_begin-->
<nav style="width: 1000px; margin: 0 auto; height:25px; background: #000;">
<ul align="center">
<a href="#"><font color="white" size="2">文学 </font></a>
<a href="#"><font color="white" size="2">生活 </font></a>
<a href="#"><font color="white" size="2">计算机 </font></a>
<a href="#"><font color="white" size="2">外语 </font></a>
<a href="#"><font color="white" size="2">经营 </font></a>
<a href="#"><font color="white" size="2">荔枝 </font></a>
<a href="#"><font color="white" size="2">社科 </font></a>
<a href="#"><font color="white" size="2">学术 </font></a>
<a href="#"><font color="white" size="2">少儿 </font></a>
<a href="#"><font color="white" size="2">艺术 </font></a>
<a href="#"><font color="white" size="2">原版 </font></a>
<a href="#"><font color="white" size="2">科技 </font></a>
<a href="#"><font color="white" size="2">考试 </font></a>
<a href="#"><font color="white" size="2">生活百科 </font></a>
<a href="#"><font color="yellow" size="2">全部商品目录</font></a>
</ul>
</nav>
<!--nav_end-->
<!--div_search-->
<div style="width: 1000px; margin: 0 auto; height:25px; background: #CC7;">
<form name="form_search" align="right">
<font size="3" color="#666">Search</font>
<input type="text" name="text_search">
<button><font size="2" color="#666">按钮</font></button>
</form>
</div>
<!--div_search-->
<!--div_Catalog-->
<div style="width: 1000px; margin: 0 auto; height:120px;">
<br/>
<p align="right"><font size="2">首页 > 旅游 > 图书列表</font></p>
<br/>
<br/>
<p><font size="4"><strong>商品目录</strong></font></p>
<br/>
</div>
<!--div_Catalog-->
<hr/>
<!--div_computerClass-->
<div style="width: 1000px; margin: 0 auto; height:120px;">
<br/>
<p><font size="4"><strong>计算机类</strong></font></p>
<br/>
<p><font size="2">共xxx种商品</font></p>
<br/>
<hr/>
</div>
<!--div_computerClass-->
<!--div_PRODUCT_LIST-->
<div style="width: 1000px; margin: 0 auto; height:60px; background: #CC7;border-radius:15px;">
<table>
<tr> </tr>
<tr>
<p>
<font size="4" color="#fff" text="center">
<strong> PRODUCT LIST</strong>
</font>
</p>
</tr>
<tr> </tr>
</table>
</div>
<!--div_PRODUCT_LIST-->
<!--showBooks-->
<div style="width: 790px; margin: 0 auto; height:550px;">
<br/>
<table>
<tr>
<td>
<img src="images/bookcover/101.jpg">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
<td width="90px"> </td>
<td>
<img src="images/bookcover/102.jpg">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
<td width="90px"> </td>
<td>
<img src="images/bookcover/103.jpg">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
<td width="90px"> </td>
<td>
<img src="images/bookcover/104.jpg" width="130px" height="197px">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
</tr>
<tr height="10px"></tr>
<tr>
<td>
<img src="images/bookcover/105.jpg">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
<td width="90px"> </td>
<td>
<img src="images/bookcover/106.jpg">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
<td width="90px"> </td>
<td>
<img src="images/bookcover/107.jpg">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
<td width="90px"> </td>
<td>
<img src="images/bookcover/108.jpg" width="130px" height="197px">
<p align="center">书名：xxx</p><p align="center">价格：xxx</p>
</td>
</tr>
</table>
</div>
<!--showBooks-->
<!--footer_begin-->
<footer style="width:1024px; margin: 0 auto; height:60px; background: #CCA;">
<table>
<tr>
<td width="341">
<img src="images/logo.png" align="left">
</td>
<td>
<p>CONTACT US</p>
<p align="center">copyright 2008 © BookStore All Rights RESSERVED</p>
</td>
</tr>
</table>
</footer>
<!--footer_end-->
</div>
</body>
</html>
慢慢来才有更多收获——我只是想把截图都放上来
头部效果
补白效果
通过设施table的tr宽高实现书籍布局
实际效果图
扫一扫
986
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
