编程笔记

编程笔记

纯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>&nbsp;</tr>
    <tr>
    <ul align="right">
        <img src="images/cart.gif">
        <a href="#">购物中心</a>&nbsp;<span>|</span>
        <a href="#">帮助中心</a><span>&nbsp;|</span>
        <a href="#">我的账户</a><span>&nbsp;|&nbsp;</span>
        <a href="#">新用户注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </ul>
    </tr>
    <tr>&nbsp;</tr>
</table>

使用span或者其他标签的效果都没有ul好——上传的时候发现直接粘贴代码会影响网页的显示,所以要上传到代码块,有点好笑。

<ul align="center">
    <a href="#"><font color="white" size="2px">文学&nbsp;</font></a>
    <a href="#"><font color="white" size="2px">生活&nbsp;</font></a>
</ul>

通过换行br/实现向上补白的功能
但是hr/显示不了水平分割线
原因如下:

补充一点,水平在div之间设置时会离得更远。

不说了直接上代码:

<!DOCTYPE html>
<html>
<head>
	<title>纯h5页面</title>

<style type="text/css">
	/*重置浏览器的默认样式 */
* {
    margin:0;