闪酷跑路网

一行行枯燥的代码,却描绘出人生的点点滴滴

推荐文章

Flexible 弹性匣子模型之CSS align-items 属性

    Flexible 弹性盒子模型之CSS align-items 属性 实例 居中对齐弹性盒的各项 <div> 元素: div { display: flex; align-items:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。 属性           align-items 21.0 11.0 20.0 9.07.0 -webkit- 12.1 定义和用法 align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 提示:使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。 默认值: stretch

    阅读全文>>

作者:coody分类:【_Flex浏览(1298

2018-12-19

Flexbox格局

    Flexbox布局Flexbox布局 刚开始接触flex布局的时候,只知道它可以用来使子元素水平垂直居中,代码最为简洁好用。 .container { display: flex; justify-content: center; align-items: center; } 当然不仅仅是居中问题,flexbox能做的事情大多,能够简单快速解决我们布局所遇到的问题,例如: 可以轻松实现两列、多列布局自适应屏幕的大小,而无需设置块浮动 如果元素容器没有足够的空间,无需重新计算每个子元素的宽度,就可以设置它们在同一行 可以快速让子元素布局在一列,如小屏幕的时候 可以让在子元素相对容器居上、下、左、右、中布局 可以通过属性order随时改变元素出现的顺序,无需改变HTM结构,以便适应屏幕大小不同和设备差异 如果元素容器设置百分比sui视窗大小改变,不用提心未指定

    阅读全文>>

作者:coody分类:【_Flex浏览(1059

2018-12-19

Flex格局的学习经验

    Flex布局的学习经验做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点。 好进入正题吧,首先借用阮一峰大神的一副图片:   再来说说flex的几个属性吧: 一、容器属性 1.flex-direction : row | row-reverse | column | column-reverse;   这个属性是定义元素在主轴上的排列顺序的,也就是上面的(main axis)   row:元素在主轴上以水平的方向排列的,起点在左端(同时,这个也是默认值)   row-reverse:元素在主轴上以水平的方向排列的,起点在右端   column:元素在主轴上以垂直的方向排列的,起点在上方   column-reverse:元素在主轴上以

    阅读全文>>

作者:coody分类:【_Flex浏览(2300

2018-12-19

深入了解CSS3 Flexbox

    深入理解CSS3 Flexbox文章来源:http://www.zhufengpeixun.cn/article/173 一、前言 Flexbox 是一个 CSS3 的盒子模型 ( box model ),顾名思义它就是一个灵活的盒子 ( Flexible Box ),为什麽最近这个属性才红起来呢?最主要也是因为 CSS3 的规范终于普及 ( 或 IE 终于败亡 ),加上行动装置的发展促成了响应式布局兴起,自适应长宽弹性相当大的 Flexbox 就趁势而起了。 第一步要来看 Flexbox 的盒子模型,根据 W3C 文章所描述,flex 的盒子模型如下图所呈现,与一般的盒子模型不同的地方,在于 Flexbox 的盒子模型具有水平的起点与终点 ( main start、main end ),垂直的起点与终点 ( cross start、cross end ),水平轴与垂直轴 ( main a

    阅读全文>>

作者:coody分类:【_Flex浏览(1849

2018-12-19

崭新 FlexGrid 功能演示 Demo 正式上线

    全新 FlexGrid 功能演示 Demo 正式上线 FlexGrid是一款易用、灵活的高性能表格控件,为最终用户提供了一种多功能、高性能业务数据展示和管理能力。它提供了完备的表格控件数据处理能力,无论是绑定数据源、非绑定模式还是树形业务数据模式,可以高性能加载数据,加载100万行×10列数据仅需0.27秒; 日前,全新FlexGrid功能演示Demo正式上线。新Demo包含了FlexGrid几个常用的功能:分组、滚动、冻结、自定义单元格类型、搜索面板、表格过滤器、树形结构、合并单元等。Demo中也展示了其它常用的控件,如C1Ribbon、C1Navbar、C1CommadDock、C1DockTab等。 一、FlexGrid目前常用的应用示例 新发布的FlexGridDemo使用程序员非常熟悉的VS IDE布局,充分展示了ComponentOne Studio的布局功能强大,

    阅读全文>>

作者:coody分类:【_Flex浏览(799

2018-12-18

Zabbix根本配置及监控主机

    Zabbix基本配置及监控主机  监控主机一版需要在被监控的主机上安装Zabbix Agent 监控主机 安装zabbix-agent 首先需要在被监控的主机上安装agent,可以下载预编译好的RPM进行安装,下载地址:http://www.zabbix.com/download 也可以源码安装,类似server的安装,只是一个地方有区别,就是配置的参数只有一个: $./configure –prefix=/home/zabbix --enable-agent 配置agent 以RPM安装为例,安装后的agent配置文件位置:/etc/zabbix/zabbix_agentd.conf,主要需要修改下列2项: Server=192.168.0.41 ServerActive=192.168.0.41:10051 修改完成后,重启zabbix-agent 服务。 在za

    阅读全文>>

作者:coody分类:【_Flex浏览(1667

2018-12-18

flex 格局 初次接触这个好使又不是特别好用的布局方法

    flex 布局 初次接触这个好使又不是特别好用的布局方法  刚开始学前端的童鞋们应该也是一样先学习的table然后再学习了盒子模型,感觉终于学会了简单的网页布局,使用各种display,float,position绞尽脑汁给页面布局成自己想要的页面样式,然而,当自己把页面放缩时。。。。画风就莫名其妙的变了,没错 ,就是变了,变得很乱很丑,再把网页放到手机上:卧槽这是哪个战斗力五颗渣的家伙写的啊,整个页面一坨一坨的堆积在一起。   然后就钻研js响应式布局,写着写着,哎呀我去,这是哪一个的宽啊,这是哪一个元素的高啊,这个比例等下设置为多少,跟上一个需不需要一样,会不会再放缩这个比例又会排乱,一些列计算之后,终于,写出了一个满意的响应式布局,再看看自己的代码,写了好多有木有。   这时CSS3里的flex布局方法就显得简单易用,大手一敲,啪啪啪,一行代码,自适应问题就解决了,不用float,不

    阅读全文>>

作者:coody分类:【_Flex浏览(585

2018-12-18

Flex中使用CSS控制页面式样

    Flex中使用CSS控制页面样式Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css   在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也可以新建一个CSS文件,在这个文件中写样式,后者更便于管理。   先来看看直接在mxml文件中写样式: 方法一:直接在想要控制的控件中直接写CSS元素,如left,right,top等; 方法二:还可以将CSS样式写在<fx:Style><fx:Style/>标签中,示例代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 3

    阅读全文>>

作者:coody分类:【_Flex浏览(1685

2018-12-19

jq跑马灯成效

    jq跑马灯效果  这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其他一些手机正常,但一到安卓广告屏上就跑不动了;后来领导找了个jQuery插件,经测试,完美运行。   <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动文字jquery插件</title> /** * author ormin * http://www.cnblogs.com/kangaoxiaoshi/p/5431870.html * htt

    阅读全文>>

作者:coody分类:【_Flex浏览(1939

2018-12-18

信息系统实践手记6-JS调用Flex的性能有关问题一例

    信息系统实践手记6-JS调用Flex的性能问题一例  说明:信息系统实践手记系列是系笔者在平时研发中先后遇到的大小的问题,也许朴实和细微,但往往却是经常遇到的问题。笔者对其中比较典型的加以收集,描述,归纳和分享。 摘要:此文描述了笔者接触过的部分信息系统或平台之间的对接构型和情况,挂一漏万的总结分享之。 正文 系列随笔目录:信息系统实践手记 (http://www.cnblogs.com/taichu/p/5305603.html) 作者:太初 转载说明:请指明原作者,连接,及出处。   正文   在笔者实践中,越到有些情况下(比如开发GIS地图应用),客户端的JS代码往往要调用GIS地图引擎的API。 有些API提供JS接口(版本),那是最方便的,有些提供诸如FLEX编程接口的API,让你在JS中调用,也是可以,但遇到如下情况,分享之。  

    阅读全文>>

作者:coody分类:【_Flex浏览(1978

2018-12-19

flex兼容性有关问题

    flex兼容性问题flex在众多手机浏览器上的兼容方案(亲测华为手机自带浏览器) 如果项目使用构建工具,可加autoprefixer来处理,[autoprefixer使用指南] 纯手写css兼容代码,需给每个使用的属性加上属性前缀 /*display: flex;写法*/ span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /*justify-content: center*/ span { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /*align-items: center*/ span {

    阅读全文>>

作者:coody分类:【_Flex浏览(1619

2018-12-18

懂得Flexbox弹性盒子

    理解Flexbox弹性盒子http://www.w3cplus.com/css3/understanding-flexbox-everything-you-need-to-know.html参考文档 1:要开始使用Flexbox,必须先让父元素变成一个Flex容器。 你可以在父元素中显式的设置display:flex或者display:inline-flex。就这么的简单,这样你就可以开始使用Flexbox模块。   2.Flex容器属性 flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content flex-direction: row || column || row-reverse || column-reverse;   flex

    阅读全文>>

作者:coody分类:【_Flex浏览(911

2018-12-18

flex 碰到white-space:nowrap

    flex 遇到white-space:nowrap背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响 解决办法,父div设置min-width:0即可 <div style="width:100%;display:flex;height:80px"><div style="width:50px"><img src="~/Content/Img/2.png" style="height:50px;" /></div><div style="flex:1;min-width:0"> <div style="width:100%;height:4

    阅读全文>>

作者:coody分类:【_Flex浏览(1993

2018-12-19
上一页 1/163页 下一页