本文介绍了如何在不使用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; 
最低0.47元/天 解锁文章
扫一扫
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
