随笔分类 -  CSS3

摘要:Web App简而言之就是为移动平台而优化的网页,它可以表现得和原生应用一样,并且克服了原生应用一些固有的缺点。一般而言Web App最大的入口是浏览器,但现在微信公众平台作为新兴的平台,结合其内置浏览器可以和Web App很好的结合,虽然现在还不够成熟,但有可能取代浏览器成为Web App第一大入口。(微信Web App示例)Web App的入口说白了就是一个链接,但是链接不符合移动端的输入方式,链接的分发成为难题,而微信公众平台有很多种方式可以发送链接。一、微信公众账号发送链接的方法1)给用户回复的文字消息微信文字消息支持简单的HTML代码,如标签:baiduzhidao哈哈不过群发消息中 阅读全文
posted @ 2014-02-10 09:53 piuba 阅读(748) 评论(0) 推荐(0) 编辑
摘要:自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-Web App(意为基于WEB形式的应用程序)。业界关于Web App与Native App的争论已有一段时间,而Hybrid混合App则受到推荐,随着时间的推移,我们相信Web App也会有一定的市场,那么它到底有什么奥秘呢?让我们来看看。WebApp与NativeApp有何区别呢?NativeApp:1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包,且需要用户手动更新(有些应用程序即使不需要 阅读全文
posted @ 2014-01-14 18:05 piuba 阅读(327) 评论(0) 推荐(0) 编辑
摘要:我的App与微信搞上了 小麦积分墙摘自网络 最近有很多开发者关心的一个问题是如何提升app的下载量,透过现象开本质,app下载量的终极目标还是为多少客户提供了服务,抛开下载量KPI,app真心关心的问题其实是使用产品or服务的人次。 要提升被服务人群数量,关键是要从微信上导出流量,而要导出更多的流量,必然需要更多人的关注,即如何推广运营的问题。微信现在导流的方式基本以webapp方式进行,直接从微信基本无法实现到客户端的跳转,这是app们要考虑的问题,要在微信这个流量聚集地上提供服务,App要么与微信打通技术接口,像艺龙那样,能直接订房订机票;要么将app html5化,让用户顺畅的从... 阅读全文
posted @ 2014-01-13 17:48 piuba 阅读(1271) 评论(0) 推荐(0) 编辑
摘要:对于Web开发人员来说,当他们需要创建一个非常时尚和新潮的CSS3和HTML5网站时需要非常专业的水准。html5和css3的结合能够做出非同寻常的网站效果。。所以,今天,我推荐给大家45个免费的时尚模板,您可以下载。1. Interio(演示 |下载 )2. Art School Template(演示 |下载 )3. Folder(演示 |下载 )4. Template for Business Project(演示 |下载 )5. Nova(演示 |下载 )6. CSS3 Seascape Two(演示 |下载 )7. Kroft(演示 |下载 )8. Thom Sander(演示 |下 阅读全文
posted @ 2014-01-10 17:48 piuba 阅读(391) 评论(0) 推荐(0) 编辑
摘要:转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html 现在屏幕分辨率的范围很大,从320px (iPhone) 到 2560px (大型显示器),甚至更大。用户也不只是使用台式电脑访问web站点了,他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值,已经不能满足需要了。web设计需要适应这种新要求,页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍,如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。 demo预览地址:http:.. 阅读全文
posted @ 2014-01-10 15:08 piuba 阅读(276) 评论(0) 推荐(0) 编辑
摘要:HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野。HTML5本身就是一个很大很宽泛的词,在严格的意义上,HTML5代表最新版本的HTML语义标准,而完全放开来 看,HTML5代表了Open Web所包含的所有技术,HTML全新的语义,CSS3样式单和JavaScript脚本所组合而成的开放的Web世界。任何事情都有两面性,HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是 HTML5在涉及到Web某个应用领域的 阅读全文
posted @ 2014-01-10 14:26 piuba 阅读(275) 评论(0) 推荐(0) 编辑
摘要:一、 规范目的:为提高工作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,在网站建设中,使结构更加清晰,代码简明有序,有一个更好的前端架构,有利于SEO优化。二、 规范基本准则:符合web标准,使用具有语义的标签,使结构、表现、行为分离,兼容性优良,页面性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。三、 文件规范:html、css、js、images文件均归档至约定的目录中。1. html(1)编码:所有编码均采用xhtml,标签必须闭合,属性值用双引号包括,编码统一为utf-8。(2)语义化:语义化html,正确使用标签,充分利用... 阅读全文
posted @ 2013-11-15 16:14 piuba 阅读(578) 评论(0) 推荐(0) 编辑
摘要:CSS按照层级不同,分为公用级>产品级>页面级三部分,三者之间为继承关系,公用级 定义了重置样式、布局结构、和一些常用的组件等,一般是在各个页面统一加载的; 产品级为不同产品线自有的样式,定义了不同产品线各自的风格,一般在各个app统一加载; 页面级为各产品中重用度不高的内容,单独作为样式文件加载。1.书写规范1.页面统一utf-8编码。可用 @charset "utf-8"; 指定页面编码。2.用而不用@import导入外部样式文件,因为@import在ie6下初始瞬间会无法加载,导致页面变形,并且不能并行加载,不利于优化。3.不要用个性化字体,导致用户不能正 阅读全文
posted @ 2013-07-12 14:58 piuba 阅读(236) 评论(0) 推荐(0) 编辑
摘要:页面编码规范和标签规范1.页面统一utf-8编码,如果中文不能正常显示,请用editplus打开,另存,编码选utf-8。友情提示:模板代码当中很多莫名其妙的换行都可能跟编码有关!2.DTD统一加3.页面中引入样式或js时,不需要加类型声明:(html5 规范)4.所有编码均遵循 xhtml 标准,包括标签、属性、属性名全部小写,属性值用 "" (双引号)引起来,标签要闭合,非单标签要加对应的结束标记,单标签以" />"结束。提醒:IE下的页面变形很多都与标签未闭合有关系。5.标签要按顺序合理嵌套。如:须修改为:6.里可以包含,但是里不允许包含。类 阅读全文
posted @ 2013-07-12 14:57 piuba 阅读(268) 评论(0) 推荐(0) 编辑
摘要:margin 叠加是什么?就是当垂直外边距相遇时,它们将叠加,叠加的高度取较大的。下面按各种情况及附图来说明。当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,如图:元素的顶边界与前面元素的底边界发生叠加。当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,如图:元素的顶边界与父元素的顶边界发生叠加。尽管初看上去有点儿奇怪,但是边界甚至可以与本身发生叠加。假设有一个空元素,它有边界,但是没有边框或填充。在这种情况下,顶边界与底边界就碰到了一起,它们会发生叠加,如图:元素的顶边界与底边界发生叠加。如果这个边界碰到另一个 阅读全文
posted @ 2012-12-12 17:29 piuba 阅读(627) 评论(0) 推荐(0) 编辑
摘要:问题:现在网站上,大家都开始用CSS+DIV来设计样式,但是不同浏览器却存在很大的不同。网上也有很多关于 css兼容不同浏览器的文章,也看了一些,还真是麻烦。今天遇到一个问题,写好的CSS在IE6和火狐上显示都正常的,但是到IE8上,显示就是不正常, 本来要加一个滚动条的,我把overflow设置为auto了,在IE8上,她就是只显示一部分内容,其他内容其他卡掉。 解决方法:在网上看到一篇文章,ie8不兼容,网页显示不正常,css如何兼容ie8IE8是有两种解析模式的,一种是IE8 Standard Modes :默认的最标准的模式,严格按照W3C相关规定,一种是IE7 Standards M 阅读全文
posted @ 2012-11-27 11:42 piuba 阅读(452) 评论(0) 推荐(0) 编辑
摘要:隐藏和显示的效果 主要是用到了div的两个属性 那就是display和visible 估计大家在被面试的时候会被问到 它们主要都是用来控制div的显示与隐藏 但是一般都比较喜欢问的问题是它们两者有什么区别visible是显示 不管有没有看出来 它都是存在的 都会占用空间 而display虽然也是用来控制显示 但它不会像visible那样 站着茅坑不拉屎 它要是没有显示的话 不会占用面积 但是它要是显示的话 则会和visible一样 都会占用面积详解:一、web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意 1、如果在样式文件或页面文件代码中直接用displ 阅读全文
posted @ 2012-11-27 10:05 piuba 阅读(2343) 评论(0) 推荐(0) 编辑
摘要:带三角箭头的提示框,就是下面所示:这是一个提示框通常我们都用图片来实现上面那个小三角,因为这样方便快速,但是如果图片处理得不好,会看起来有杂边,从而影响视觉,所以换一种思路来解决。首先来研究一下CSS是如何实现三角形的。假定有一个盒子(div),给定宽高分别为100像素,再给定边框50像素,那么它看起来会是下面这个样子(为了更直观,给了边框四种不同的颜色):接下来,把盒子的高度设为0:再把宽度也设为0:这样雏形就已经出来了,由于IE6的bug(高度为0的div会有一定默认的高度,我的电脑上测量结果为19像素),需要做一些小调整,给div加一个overflow:hidden,IE6就能正确解析了 阅读全文
posted @ 2012-09-27 18:22 piuba 阅读(1383) 评论(0) 推荐(0) 编辑
摘要:强制不换行 div{white-space:nowrap;}自动换行div{ word-wrap: break-word; word-break: normal; }强制英文单词断行div{word-break:break-all;}CSS设置不转行:overflow:hidden 隐藏white-space:normal 默认 pre 换行和其他空白字符都将受到保护nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象设置强行换行:word-break: normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行break-all : 该行为与亚洲语言的nor. 阅读全文
posted @ 2012-08-03 09:42 piuba 阅读(193) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示