位置: 编程技术 - 正文

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

编辑:rootadmin
实例效果图: 整体观察思考:

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

再看此图

很经典的三行两列结构,分为四块,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;}

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

二、细节制作:(1) TOP制作

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

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

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

注意:当关闭按钮要右浮动的时候,关闭按钮放在文字前面。<h1><a href="#"><img src="images/dot.gif" alt=""/></a>选择图片</h1>应用WEB标准实例:列表页面的制作(应用web标准实例是什么)

相对应的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;}/*图片居右*/

(2) RIGHT制作

看一下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;}

(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: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;}

(4) BOTTOM制作

这里我把按钮写成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需刷新才能执行]

标签: 应用web标准实例是什么

本文链接地址:https://www.jiuchutong.com/biancheng/372026.html 转载请保留说明!

上一篇:CSS属性 - white-space 空白属性使用说明(Css属性中表示字体的是)

下一篇:用CSS构建iframe效果代码(html中iframe怎么用)

  • 文化服务费内容是什么
  • 转入公账怎么做账
  • 以件数为印花税计税依据的有哪些
  • 个税上个月没报下个月累计会怎么样
  • 往来账项询证函一定要回复吗
  • 所得税的利润总额怎么计算
  • 工业企业总产值的计算是以什么为主体
  • 分公司分开银行账户付款的好处
  • 民非组织捐赠收入免税
  • 公司支付保险公司保费怎么做账
  • 二手车增值税发票怎么开
  • 承租人转租是否要交税
  • 增值税税率调整时间17变16
  • 保证金存款余额
  • 接受股权转让要交什么税
  • 简易计税项目可以差额征税吗
  • 固定资产评估增值递延所得税
  • 税控盘清盘怎么做
  • 领购发票实名认证流程
  • 个人能在税务局交社保吗
  • 加油发票税号错误怎么补救
  • 土地增值税计税依据
  • 两个公司领工资会不会合并纳税
  • 社保不报的情况下保险报销吗
  • 制造费用包括劳动保护费吗
  • 资产计税基础是怎么填
  • 什么情况下个税税率是10%
  • 投资收益亏损
  • 银行存款利息的计算方法
  • 用盈余公积弥补亏损会影响所有者权益总额吗
  • 临时工工资怎么处理
  • itunes无法链接
  • 已收到发票未认证已付款怎么做分录
  • deskrun.exe是什么东西
  • php
  • php current
  • php add
  • 雪山上的老鼠
  • php使用crypt()函数进行加密
  • 汇算清缴期结束后,税务机关发现企业
  • 公司收到投资款怎么写收据?
  • 库存股属于什么会计科目
  • php判断https
  • 出售还在摊销的产品
  • org.springframework.web.server
  • vue split函数
  • python里面的类
  • word element
  • 给股东分配股利
  • SQLite教程(十三):C语言编程实例代码(1)
  • 工会经费绩效
  • 公司开普票和专票税率一样吗
  • Mysql以utf8存储gbk输出的实现方法提供
  • 个体户能不能变更地址
  • 资产处置收益的核算内容
  • 固定资产处置需要交税吗?
  • 原材料用于在建工程
  • 实务操作中如何快速记忆
  • 金税盘开完发票可以直接拔掉吗?
  • 电子钥匙在线服务
  • 如何清理注册表文件
  • macbookairfacetime
  • winxp怎么改壁纸
  • win8触摸板失灵怎么办
  • centos 编译安装
  • unity跨脚本调用函数
  • unity 3d书籍
  • 基于JAVASCRIPT实现的可视化工具是
  • react 系列
  • js中key
  • javascript例题
  • jquery 使用
  • js如何定义类
  • jquery.validator
  • 企业季度申报怎么报
  • 煤炭资源税税率是多少啊
  • 建行代理贵金属签约
  • 什么是金融企业的固定推销人员
  • 开票时间超时怎么办
  • 小规模纳税人收什么税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设