纯Html5实现网上书城界面
2025-01-29
老师不让使用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;