基础 - 九宫格

结构


<div class="box">    <ul>        <li><a href="#"><i></i><span>手机</span></a></li>        <li><a href="#"><i></i><span>飞机</span></a></li>        <li><a href="#"><i></i><span>电影</span></a></li>        <li><a href="#"><i></i><span>游戏</span></a></li>        <li><a href="#"><i></i><span>彩票</span></a></li>        <li><a href="#"><i></i><span>加油站</span></a></li>        <li><a href="#"><i></i><span>医院</span></a></li>        <li><a href="#"><i></i><span>火车站</span></a></li>    </ul></div>

样式

.box {    width: 300px;}ul {    list-style-type: none;    overflow: hidden;    margin: 0;    padding: 0;

}.box li {    position: relative;    float: left;    width: 90px;    line-height: 100px;    padding: 5px;    text-align: center;}.box li a {    text-decoration: none;}.box li i {    position: absolute;    top: 20px;    left: 37px;    width: 26px;    height: 26px;    background: url(http://img12.360buyimg.com/uba/jfs/t2860/228/2348548716/20317/f0a9fa2b/57620a6fN77b2b8af.png) no-repeat 0 0;}

行为

window.onload = function () {    var aBox = document.getElementsByClassName("box");    var aI = aBox[0].getElementsByTagName("i");    for(var i= 0,l=aI.length; i<l; i++) {

        aI[i].style.backgroundPosition = "0 "+i*(-25)+"px";    }}
时间: 2024-10-07 02:08:32

基础 - 九宫格的相关文章

iOS开发基础-九宫格坐标(4)

对iOS开发基础-九宫格坐标(3)的代码进行进一步优化. 新建一个 UIView 的子类,并命名为 WJQAppView ,将 appxib.xib 中的 UIView 对象与新建的视图类进行关联.  WJQAppView 类中声明3个 IBOutlet 属性,与 appxib.xib 中的视图对象包含的 UIImageView . UILabel 和 UIButton 建立连接. WJQAppView 头文件代码如下所示: 1 //WJQAppView.h 2 @interface WJQAp

iOS开发基础-九宫格坐标(6)

继续对iOS开发基础-九宫格坐标(5)中的代码进行优化. 优化思路:把字典转模型部分的数据处理操作也拿到模型类中去实现,即将 ViewController 类实现中 apps 方法搬到 WJQAppInfo 类实现. 实例代码 在 WJQAppInfo.h 中添加一个向外公开的接口,其返回处理好的模型数组,方法定义如下: + (NSArray *)appInfoArray; 实现代码如下: 1 //WJQAppInfo.m.将数据处理部分搬到模型类中进行处理 2 + (NSArray *)app

iOS开发UI基础—九宫格坐标计算

iOS开发UI基础-九宫格坐标计算 一.要求 完成下面的布局 二.分析 寻找左边的规律,每一个uiview的x坐标和y坐标. 三.实现思路 (1)明确每一块用得是什么view (2)明确每个view之间的父子关系,每个视图都只有一个父视图,拥有很多的子视图. (3)可以先尝试逐个的添加格子,最后考虑使用for循环,完成所有uiview的创建 (4)加载app数据,根据数据长度创建对应个数的格子 (5)添加格子内部的子控件 (6)给内部的子控件装配数据 四.代码示例 1 // 2 // YYVie

UI基础九宫格

一:九宫格图片展示公式    子view的横向间距 = (父view的宽度- 3 * 子view的宽度) / 4 子view的纵向间距 = 20 当前子view的行号 = 当前遍历到得索引值 / 总列数 当前子view的列号 = 当前遍历到得索引值 % 总列数 当前子view的列号 = 当前遍历到得索引值 % 总列数 子view横坐标的公式 = 子view的横向间距 + 列号 * (子view的横向间距+ 子view的宽度) 子view纵坐标的公式 = 50 + 行号 * (子view的纵向间距

iOS UI基础 九宫格算法

案例分析: 分析: 代码案例实现: // //  ViewController.m //  01-九宫格算法 // //  Created by FlyLee on 14-9-12. //  Copyright (c) 2014年 FLYLEE.CN. All rights reserved. // #import "ViewController.h" @interface ViewController () /* 数据容器 */ @property (nonatomic,strong

java web 开发三剑客 -------电子书

Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知Internet的目的是让各个net交互.所以,Internet实质上是将世界上各个国家.各个网络运营商的多个网络相互连接构成的一个全球范围内的统一网,使各个网络之间能够相互到达.各个国家和运营商构建网络采用的底层技术和实现可能各不相同,但只要采用统一的上层协议(TCP/IP)就可以通过Internet

IOS 开发学习笔记-基础 UI(10)九宫格布局,块动画,字典转模型,Xib使用

大概如下图示:九个应用图标的样子 功能分析 (1)以九宫格的形式展示应用信息 (2)点击下载按钮后,做出相应的操作 步骤分析 (1)加载应用信息 (2)根据应用的个数创建对应的view (3)监听下载按钮点击 思路整理 要在支持文件夹里,放入 plist 文件,且拖拽素材到 supporting files,注意勾选的项目的区别: 大多数情况,往项目中拖拽素材时,通常选择 Destination, Folders:选择第一项:创建组,这样 xcode 导航显式的是黄色文件夹,要知道,Xcode中

ios基础控件 九宫格view

知识准备: 1 使用xib封装一个自定义view的步骤 1> 新建一个继承UIView的自定义view,假设类名叫做(KAppView)2> 新建一个KAppView.xib文件来描述KAppView内部的结构3> 修改UIView的类型为KAppView真实类型4> 将内部的子控件跟KAppView进行属性连线5> KAppView提供一个模型属性6> 重写模型属性的set方法,因为在set方法中可以拿到外界传递的模型数据7> 把模型数据拆开,分别设置数据到对应

ios开发-UI基础-超级猜图

[注意]转载时请注明出处博客园-吃唐僧肉的小悟空http://www.cnblogs.com/hukezhu/ 本篇文章介绍一个比较综合的小应用----超级猜图. 功能分析: 根据显示的图片,在下面的待选项按钮中选中正确答案按钮,选中的按钮会显示在正确答案按钮中 答案错误,答案颜色变为红色,分数减小 答案正确,答案颜色变为蓝色,两秒自动跳入下一题,分数增加 点击"下一题"可以进入下一个题目 点击"大图",可以放大显示图片,再次点击图片或者背景,图片缩小至原来大小 点