纯Html5实现网上书城界面

老师不让使用css

后来发现纯html5页面也可以实现很多事情

效果图:
纯Html5实现网上书城界面_第1张图片
1.设置8个横向div作为模板
弄了一小时我发现,Notepad,subline_Text,Dreamware,这三个软件对组件的宽高背景色设计需要用到css.
——所以降低一定难度,对盒子的宽高进行css设置。
(为了让老师清除只对这几个参数进行了css设置,这里采用内联的写法)

我还是很奇怪这个div的宽高,背景色应该时自身属性——但是只有在css中设置才能起作用(问题不大,这些不是重点)

文字居中原本可以使用line-height:“40px”; text_align:”center”;
感觉这些也是css样式,那么使用table试一下,假设有3行,把它放在中间的那一行,应该就是居中了。

 ; ;

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


通过换行br/实现向上补白的功能
但是hr/显示不了水平分割线
原因如下:
在这里插入图片描述
补充一点,水平在div之间设置时会离得更远。

不说了直接上代码:




	纯h5页面





"width: 1024px; margin: 0 auto; background: #eee;">
"width: 1024px; height: 70px;"> "images/logo.png" align="left">  ; ;
"width: 1000px; margin: 0 auto; height:25px; background: #CC7;">
"form_search" align="right"> "3" color="#666">Search "text" name="text_search">  ; ; ; ; ;
"width: 1000px; margin: 0 auto; height:120px;">

"right">"2">首页 > 旅游 > 图书列表



"4">商品目录



"width: 1000px; margin: 0 auto; height:120px;">

"4">计算机类


"2">共xxx种商品



"width: 1000px; margin: 0 auto; height:60px; background: #CC7;border-radius:15px;">  ;

"4" color="#fff" text="center">  ; ; ;PRODUCT LIST

 ;
"width: 790px; margin: 0 auto; height:550px;">
"10px">
"images/bookcover/101.jpg">

"center">书名:xxx

"center">价格:xxx

"90px"> ; "images/bookcover/102.jpg">

"center">书名:xxx

"center">价格:xxx

"90px"> ; "images/bookcover/103.jpg">

"center">书名:xxx

"center">价格:xxx

"90px"> ; "images/bookcover/104.jpg" width="130px" height="197px">

"center">书名:xxx

"center">价格:xxx

"images/bookcover/105.jpg">

"center">书名:xxx

"center">价格:xxx

"90px"> ; "images/bookcover/106.jpg">

"center">书名:xxx

"center">价格:xxx

"90px"> ; "images/bookcover/107.jpg">

"center">书名:xxx

"center">价格:xxx

"90px"> ; "images/bookcover/108.jpg" width="130px" height="197px">

"center">书名:xxx

"center">价格:xxx

"width:1024px; margin: 0 auto; height:60px; background: #CCA;">
"341"> "images/logo.png" align="left">

CONTACT US

"center">copyright 2008 ©; BookStore All Rights RESSERVED

慢慢来才有更多收获——我只是想把截图都放上来
头部效果
纯Html5实现网上书城界面_第2张图片
补白效果
纯Html5实现网上书城界面_第3张图片
通过设施table的tr宽高实现书籍布局
纯Html5实现网上书城界面_第4张图片

实际效果图
纯Html5实现网上书城界面_第5张图片

你可能感兴趣的:(Html5)