应用WEB标准实例:列表页面的制作

实例效果图:

整体观察思考:


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

再看此图

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

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

如下图(盒模型来分析)

制作流程:


主体制作 --> 细节制作

一、制作主体:

xhtml:

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

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

css:

@import url("http://www.07art.com/public/public.css");
.editorChoose{width:591px;height:400px;border:1px solid #aaa;background:#fff;}
/*TOP内容*/
.editorChoose h1{height:30px;line-height:30px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#000;background:#efefef;}
/*LEFT内容*/
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;overflow:auto;}
/*RIGHT内容*/
.edRight{float:right;width:448px;height:317px;overflow:auto;}
/*BOTTOM内容*/
.edBottom{clear:both;padding-top:15px;height:35px;border-top:1px solid #aaa;text-align:center;background:#efefef;}

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

二、细节制作:


(1) TOP制作


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

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

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

注意:当关闭按钮要右浮动的时候,关闭按钮放在文字前面。

<h1><a href="#"><img src="images/dot30.gif" alt=""/></a>选择图片</h1>

相对应的css

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

(2) RIGHT制作


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

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

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

相对应的css

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

(3) LEFT制作


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

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

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

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

xhtml:

<h2><span>相册列表</span></h2>
<ul>
<li><a href="#">我的一家幸福生活</a></li>
<li><a href="#">包身工是怎么死的?</a></li>
<li><a href="#">杨文你真是个混蛋!</a></li>
<li class="background"><a href="#">小白被抛弃</a></li>
<li><a href="#">我的一家幸福生活</a></li>
<li><a href="#">栀子花开</a></li>
<li><a href="#">我的野蛮女友</a></li>
<li><a href="#">蓝色生死恋</a></li>
<li><a href="#">这该死的爱</a></li>
<li><a href="#">湖南大学</a></li>
<li><a href="#">新一佳</a></li>
<li><a href="#">新一佳</a></li>
<li><a href="#">新一佳</a></li>
<li><a href="#">新一佳</a></li>
<li><a href="#">新一佳</a></li>
</ul>

css:

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

(4) BOTTOM制作


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

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

相对应的css

.edBottom input{width:37px;height:22px;color:#000;border:1px solid #555;background:#aaa;}

11111111111

@import url("http://www.07art.com/public/public.css");
.editorChoose{width:591px;height:400px;border:1px solid #aaa;background:#fff;}
/*TOP内容*/
.editorChoose h1{height:30px;line-height:30px;border-bottom:1px solid #aaa;text-align:center;font-weight:bold;color:#000;background:#efefef;}
.editorChoose h1 img{float:right;margin:8px 10px 0px 0px;}
/*LEFT内容*/
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;}
.edLeft h2{padding:1px 1px 0px 1px;height:26px;border-bottom:1px solid #aaa;}
.edLeft h2 span{text-align:center;height:25px;background:#BFBDBD;color:#000;text-align:center;font-weight:bold;line-height:25px;display:block;}
.edLeft{float:left;width:142px;height:317px;border-right:1px solid #aaa;}
.edLeft ul{height:290px;overflow:auto;}
.edLeft li{height:27px;line-height:27px;border-bottom:1px solid #aaa;padding-left:10px;}
.edLeft li a{color:#000;}
.edLeft li a:link,.edLeft dd a:visited{text-decoration:none;}
.edLeft li a:hover{text-decoration:underline;}
.edLeft li.background{background:#ECEBEB;}
/*RIGHT内容*/
.edRight{float:right;width:448px;height:317px;overflow:auto;}
.edRight div{width:95px;padding:18px 0px 12px 10px;float:left;}
.edBottom{clear:both;padding-top:15px;height:35px;border-top:1px solid #aaa;text-align:center;background:#efefef;}
/*BOTTOM内容*/
.edBottom input{width:37px;height:22px;color:#000;border:1px solid #555;background:#aaa;}

选择图片

相册列表

  • 我的一家幸福生活
  • 包身工是怎么死的?
  • 杨文你真是个混蛋!
  • 小白被抛弃
  • 我的一家幸福生活
  • 栀子花开
  • 我的野蛮女友
  • 蓝色生死恋
  • 这该死的爱
  • 湖南大学
  • 新一佳
  • 新一佳
  • 新一佳
  • 新一佳
  • 新一佳

    

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • 应用WEB标准实例:列表页面的制作

    实例效果图: 整体观察思考: 在开始制作页面前,我们首先要观察图的结构,考虑怎样布局,布局对一个网站来说非常重要,他是整个体系的骨骼. 再看此图 很经典的三行两列结构,分为四块,TOP.RIGHT.LEFT.BOTTOM.如下图 以上我们思考过整体的结构,接下来我们要考虑如何把思考出来的结构变化成"骨骼" 如下图(盒模型来分析) 制作流程: 主体制作 --> 细节制作 一.制作主体: xhtml: <div class="editorChoose">

  • 我的一些关于web标准的思考笔记(一)

    我是从去年初开始学习web标准的,两年下来也有些心得.最近跳槽了正好闲在家里,写一些出来和大家交流一下. 1 对于web标准和W3C XHTML规范的理解 按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论"^_^).但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性.web标准简而言之就是将页面的结构.表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言"div+css".但W3C XHTML的任何一个版本都

  • web标准布局实例教程,用定位轻松解决CSS复杂布局

    我相信来经典论坛学习标准的朋友,99%都不是为了进W3C,不是为了成为专业的研究人员,那么大家来的目的是什么呢?很简单,其实都是想通过标准的学习让自己多增加一项技能而已,让自己在找工作的时候不会在被"需要熟练掌握web标准"而难倒,在下面的实例中xhtml并没有什么语意,文章的目的只是让然大家能更好的掌握CSS中相对.绝对定位的用法(新手问此问题的确实很多),及如何有效的结合背景,实现比较复杂的布局.不足之处还望前辈们能指点一二,感谢! ------------------------

  • 初学web标准的几个误区

    非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页.但从网友们的问题和制作中发现几个问题,在这里特别提醒一下: 1.不是为了通过校验才标准化.web标准的本意是实现内容(结构)和表现分离,就是将样式剥离出来放在单独的css文件中.这样做的好处是可以分别处理内容和表现,也方便搜索和内容的再利用. W3C校验仅仅是帮助你检查XHTML代码的书写是否规范,CSS的属性是否都在CCS2的规范内.代码的标准化仅仅是第一步,不是说通过的校验,我的网页就标准化了.我们不是为了虚名,或者向别人炫耀:"

  • 比较简单的一个符合web标准的JS调用flash方法

    微软XP升级出现的bug,就是对于使用传统网页制作模式插入页面的flash无法正常浏览,页面打开的时候flash周围是一个虚线框,需要点击一下才能正常浏览,以下的办法就是解决这一缺点,并且让flash能符合WEB标准,此外最重要的是,整个网站的所有flash都可以调用这一段代码,让你的代码更加简洁! 1.先建立一个flash.js的JS文件,并写入 复制代码 代码如下: function flash(ur,w,h){  document.write('<object classid="cl

  • 基于Spring + Spring MVC + Mybatis 高性能web构建实例详解

    一直想写这篇文章,前段时间痴迷于JavaScript.NodeJs.AngularJS,做了大量的研究,对前后端交互有了更深层次的认识. 今天抽个时间写这篇文章,我有预感,这将是一篇很详细的文章,详细的配置,详细的注释,看起来应该很容易懂. 用最合适的技术去实现,并不断追求最佳实践.这就是架构之道. 希望这篇文章能给你们带来一些帮助,同时希望你们可以为这个项目贡献你的想法. 源码地址:https://github.com/Eliteams/quick4j 点击打开 源码地址:https://gi

  • 网站程序员如何应对web标准第1/2页

    作者:jxdawei jxdawei的blog:http://www.iwcn.net/ 本文讨论的是在web标准普及的形势下,网站程序员的定位以及如何与设计师配合开发符合web标准的网站项目.本文适合的读者是传统TABLE布局下分工不是非常明晰的程序员. 1:学习web标准,让你的工作变得更加简单. web标准是大势所趋,所以作为网站程序员.你必须洗脑,必须去学习web标准.去重新认识html标签,去了解如何让程序输出页面需要的代码. 比如: 上边是美工出来的效果图,下边是符合标准的程序代码:

  • asp.net开发与web标准的冲突问题的一些常见解决方法

    论坛中也经常有从事.net开发的新手朋友问一些asp.net开发过程中与web标准之间的冲突问题,其实说到底就是客户端代码生成的问题.更高深的开发层面的东西我也说不出来,从页面前端的角度和大家分享一下建议: 少用asp.net中的服务器端控件 在Visual Studio中,有一系列强大的控件,让我们的刚开始学习.net开发人员爱不释手.但vs中的这些控件,大多都是基于winForm的那种模式搬来的,在网页开发上,有些控件还是少用为佳,比如: 不要什么也没都统统加form runat="serv

  • web标准知识——从p开始,循序渐进

    很多朋友现在还在用Dreamweaver(下称DW),不可否认这是个非常优秀的软件,他基本上实现了所见即所得.当然也正是因为这样让很多网页制作人员对于(x)HTML标签变得一无所知.然而要学习WEB标准就必需要与标签打交道,你必需要了解他们的特点.就算你不打算自己打代码,继续使用DW来完成自己的工作也必需要知道DW生存的代码的作用.如果你希望减少冗余代码,提升网页的品质,那么你就更需要认知(x)HTML标签. 那么学习自然要循序渐进,当然要从最常用.最简单的入手.如果问在所有HTML标签中谁是最

  • web标准常见问题集合3

    10.web标准中定义id与class有什么区别吗 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 一. web标准中是不容许重复ID的,比如 div id="aa"  不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二. 属性的优先级问题 ID 的优先级要高于class,看上面的例子 三. 方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那

随机推荐