position | 易学教程

宣传页项目开发（三）

阅读更多关于宣传页项目开发（三）

网页交互效果的实现滚动条高度的获取以及设置：document.body.scrollTop || document.documentElement.scrollTop .split() 把字符串分割成数组 .join() 把数组转为字符串 .replace( /\s+/g, " ") 正则全局替换，把多个空格符替换为一个空格符综合效果 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="animate.css"> </head> <body>  <header> <div class="header-wrap"> <div class="header-logo">微课手机</div> <nav class="header-nav"> <a href=

CSS（03）背景

阅读更多关于 CSS（03）背景

CSS 背景属性用于定义HTML元素的背景。所有背景属性都不能继承。 background ：简写属性，作用是将背景属性设置在一个声明中。 background-color ：设置元素的背景颜色。 background-image ：把图像设置为背景。 background-repeat ：设置背景图像是否及如何重复。 background-attachment ：背景图像是否固定或者随着页面的其余部分滚动。 background-position ：设置背景图像的起始位置。一、背景颜色 background-color 属性定义了元素的背景颜色. CSS中，颜色值通常以以下方式定义: 十六进制 - 如："#ff0000" RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red" 页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} 尝试一下 » 如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距： p {background-color: gray; padding: 20px;} 如需查看本例的效果，可以亲自试一试！可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 background-color 默认值是 transparent

宣传页项目开发（二）

阅读更多关于宣传页项目开发（二）

之前已经完成了静态页面的开发，接下来是网页动态效果制作 css实现动画的两种方式： 1、transition: all 1s; 2、animation: move 1s infinite ease-in-out .5s; @keyframes move{ 0%{ transform: rotate(0deg); } 40%{ transform: rotate(45deg); } 100%{ transform: rotate(0deg); } } 两种遍历的方式，遍历对象 { } 遍历数组 [ ] for(k in obj){ do (k); } for(var i=0; i<obj.length; i++){ do( obj[i] ); } css动画测试首先新建一个animate.css专门用于存放动画效果 .screen-1-heading{ transition:all 1s; } .screen-1-heading-init{ opacity: 0;transform:translate(0,100%); } .screen-1-heading-done{ opacity: 1;transform:translate(0,0); } /*# sourceMappingURL=animate.css.map */ 新建一个动画测试脚本 test.js //

如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

阅读更多关于如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。在详细介绍之前，我们先简要的说明一下定位的4种方法： 1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。 2、绝对定位（absolute）：这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时，元素将保持它们各自的位置不变，随着页面一起滚动，就像粘在一起一样。 3、固定定位（fixed）：这种方法允许元素相对于实际的浏览器窗口放置。 4、相对定位（relative）：这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释，可喜的是这个方法使用的很少。静止定位static 定位的默认值static，不使用定位属性和使用这个值对页面没有什么效果的。绝对定位absolute 当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上。看看下面的例子： #sidebar{ position:absolute; top:100px; right:200px; width

宣传页项目实战

阅读更多关于宣传页项目实战

编辑器：sublime text3 标注工具：PxCook 切图工具：PS 开发前准备：设计图标注 PxCook 空格键可以上下拖动大致标注图纸：（可惜不能文字标注和拉参考线）开发前准备：PS切图在指定图层上新建一个图层，使用ctrl+e 合并图层，可以将任意图层转为普通图层（如果图层是下面图层的剪贴图层，可以把该图层移动到新建图层的上面再合并）（如果图层羽化较多，ctrl+enter无法选中，则直接ctrl+c） ctrl+enter 框选需要的图层内容 ctrl+c 复制图层 ctrl+n 新建画布 ctrl+v 黏贴，隐藏掉背景图层存储为web所用格式，jpg或者png24 开发前准备（雪碧图）我用的软件是：CssGaga 将phone1-phone4四张小图生成一张雪碧图提供图片以及css位置静态页面开发文字距离容器左边一定位置： padding-left 或者 text-indent padding-left 设置的宽度，需要在width 中减去；而text-indent 不用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale

Android Adapter 与 Listview

阅读更多关于 Android Adapter 与 Listview

一、Adapter，BaseAdapter BaseAdapter应用程序中经常用到的基础数据适配器，它的主要用途是将一组数据传到像ListView、Spinner、Gallery及GridView等UI显示组件，它是继承自接口类Adapter，Adapter有如下结构： Public Methods abstract int getCount () How many items are in the data set represented by this Adapter. abstract Object getItem (int position) Get the data item associated with the specified position in the data set. abstract long getItemId (int position) Get the row id associated with the specified position in the list. abstract int getItemViewType (int position) Get the type of View that will be created by getView(int, View, ViewGroup) for the specified

CSS Sprite雪碧图应用

阅读更多关于 CSS Sprite雪碧图应用

CSS Sprite CSS雪碧图为了减少http请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是CSS Sprite雪碧图。雪碧图使用场景： 1、静态图片，不随用户信息的变化而变化 2、小图片，图片容量比较小 3、加载数量比较大 4、一些大图不建议拼成雪碧图（减少HTTP请求数，加速内容显示）雪碧图实现原理：background-position 移动位置时，坐标都需要设置成负值雪碧图生成方式 1、PS手动拼图 2、大项目通常使用sprite工具自动生成一款sprite工具：CssGaga （生成雪碧图以及css代码）雪碧图代码实现首先是sidebar.png <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } .cat{ width:130px; border:1px solid #bbb; background-color:#eee; } ul{ list-style:none; }

习题1.8 二分查找 (20分) 数据结构

阅读更多关于习题1.8 二分查找 (20分) 数据结构

本题要求实现二分查找算法。函数接口定义： Position BinarySearch( List L, ElementType X ); 其中 List 结构定义如下： typedef int Position; typedef struct LNode *List; struct LNode { ElementType Data[MAXSIZE]; Position Last; /* 保存线性表中最后一个元素的位置 */ }; L 是用户传入的一个线性表，其中 ElementType 元素可以通过>、==、<进行比较，并且题目保证传入的数据是递增有序的。函数 BinarySearch 要查找 X 在 Data 中的位置，即数组下标（注意：元素从下标1开始存储）。找到则返回下标，否则返回一个特殊的失败标记 NotFound 。裁判测试程序样例： #include <stdio.h> #include <stdlib.h> #define MAXSIZE 10 #define NotFound 0 typedef int ElementType; typedef int Position; typedef struct LNode *List; struct LNode { ElementType Data[MAXSIZE]; Position Last; /*

jQuery/MooTools实现：页面滚动时层智能浮动定位

阅读更多关于 jQuery/MooTools实现：页面滚动时层智能浮动定位

一、应用展示关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了，现在似乎在国内一些商业网站上也屡见此效果，例如淘宝网的搜索结果页的排序水平条，在默认状态下，滚动条跟随页面滚动，如下：本文地址： http://www.cnblogs.com/atree/archive/2011/03/30/smart-float-by-JQuery-mootools.html 随着页面向下滚动，当此水平条接触浏览器的上边缘时，水平条独立出来，不跟随滚动条滚动了，如下图所示：类似的效果在新浪微博上也有：当页面滚动，新动态提示开始要淡出浏览器窗口的时候，其浮动于浏览器窗口的最上沿显示，如下图所示：此效果实现原理其实很简单，本文就将展示其实现。二、实现原理默认状态就是默认状态，什么事情也不用做，定位是absolute也好，static也好，都ok。关键是当浏览器滚动的时候，对象（要浮动的层）要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了。最好的position属性就是fixed了，可以在IE6+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，所以，后退一步，使用absolute属性代替，但是会有副作用——滚动不平滑。但，这也是没有办法的事情了。现在关键就是如何判断当前层与浏览器窗口的上边缘接触呢

布局：上下两个div高度固定，中间自适应

阅读更多关于布局：上下两个div高度固定，中间自适应

需求：经典布局 —— 头尾固定高度中间高度自适应布局头部固定高度，宽度100%自适应父容器；底部固定高度，宽度100%自适应父容器；中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；整个内容填满浏览器可视区域，并且不超出此区域！方法一：position:absolute定位，不设高，并改变"包含块"的尺寸渲染固定头尾，所以，至少头和尾要用到position定位。因为浏览器大小是可以调节的，而且不同尺寸，不同分辨率的浏览器可视区域的高度是不固定的，这就决定是中间主体部分的高度不固定。所以真正的问题核心也正在此。解决了这个问题，整个布局也就解决了一多半最重要的一段就是中间部分绝对定位，top为头的高度，bottom为尾的高度 <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>头尾固定中间高度自适应布局</title> <style> html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; background:#690; width:100%; position:absolute; z-index:5; top:0; } #dBody { background:#FC0; width

订阅 position