应用WEB标准实例：列表页面的制作(应用web标准实例是什么)

在开始制作页面前，我们首先要观察图的结构，考虑怎样布局，布局对一个网站来说非常重要，他是整个体系的骨骼。

再看此图

很经典的三行两列结构，分为四块，TOP、RIGHT、LEFT、BOTTOM。如下图

以上我们思考过整体的结构,接下来我们要考虑如何把思考出来的结构变化成"骨骼"

如下图(盒模型来分析)

主体制作 --> 细节制作

推荐整理分享应用WEB标准实例：列表页面的制作(应用web标准实例是什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:web1.0典型应用,web应用设计,应用web标准实例有哪些,web应用模板,应用web标准实例是什么,应用web标准实例有哪些,应用web标准实例分析,应用web标准实例是什么,内容如对您有帮助，希望把文章链接给更多的朋友！

xhtml：

<div class="editorChoose"> <h1></h1>

<div class="edRight"> </div> <div class="edLeft"> </div> <div class="edBottom"></div></div>

css：

@import url(" solid #aaa;background:#fff;}/*TOP内容*/.editorChoose h1{height:px;line-height:px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#;background:#efefef;}/*LEFT内容*/.edLeft{float:left;width:px;height:px;border-right:1px solid #aaa;overflow:auto;}/*RIGHT内容*/.edRight{float:right;width:px;height:px;overflow:auto;}/*BOTTOM内容*/.edBottom{clear:both;padding-top:px;height:px;border-top:1px solid #aaa;text-align:center;background:#efefef;}

骨骼出来了,接下来我们该在骨骼上添加"血"遇"肉",这样才算完整的.

先来看一下TOP容器中的细节部分。

看上去这里很简洁，文字居中，关闭按钮居右并且距上8px、距右px的距离。

考虑TOP的结构，关闭按钮在右边，那么我们就要给关闭按钮一个右浮动(float:right;)。

相对应的css

.editorChoose h1{height:px;line-height:px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#;background:#efefef;}/*文字居中*/.editorChoose h1 img{float:right;margin:8px px 0px 0px;}/*图片居右*/

看一下RIGHT容器中的细节部分。

红块区域为重复区域,所以只做一块,然后copy就可以.

<div><input name="checkbox" type="checkbox" value="" /> <img src="images/pic.jpg" alt=""/></div>

相对应的css

.edRight div{width:px;padding:px 0px px px;float:left;}.edBottom{clear:both;padding-top:px;height:px;border-top:1px solid #aaa;text-align:center;background:#efefef;}

看一下RIGHT容器中的细节部分。

这是一个列表性质的图，首先就要考虑ul li。

h2 标签写相册“相册列表”位置

ul 写下面的列表，并用overflow:auto;来控制滚动条，

xhtml：

css：

.edLeft h2{padding:1px 1px 0px 1px;height:px;border-bottom:1px solid #aaa;}.edLeft h2 span{text-align:center;height:px;background:#BFBDBD;color:#;text-align:center;font-weight:bold;line-height:px;display:block;}.edLeft{float:left;width:px;height:px;border-right:1px solid #aaa;}.edLeft ul{height:px;overflow:auto;}.edLeft li{height:px;line-height:px;border-bottom:1px solid #aaa;padding-left:px;}.edLeft li a{color:#;}.edLeft li a:link,.edLeft dd a:visited{text-decoration:none;}.edLeft li a:hover{text-decoration:underline;}.edLeft li.background{background:#ECEBEB;}

这里我把按钮写成input的形式

<input type="button" name="button" value="确 定"/>　　　　<input name="button" type="button" value="取 消"/>

相对应的css

.edBottom input{width:px;height:px;color:#;border:1px solid #;background:#aaa;} 选择图片 相册列表 我的一家幸福生活 包身工是怎么死的？ 杨文你真是个混蛋！ 小白被抛弃 我的一家幸福生活 栀子花开 我的野蛮女友 蓝色生死恋 这该死的爱 湖南大学 新一佳 新一佳 新一佳 新一佳 新一佳 　　　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

用CSS构建iframe效果代码 iframe应用很普遍，通常的需求有两种：1，获取iframe效果，就是带一个滚动条，可以省不少版面。2，要嵌一个页面，实现框架链接。如果不方便使用iframe

用CSS给图片打标的方法 !DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

用css动态生成闪字的代码 需要的一张图片：aa我是中国人请输入:gimoo.net[Ctrl+A全选注:如需引入外部Js需刷新才能执行]