Flex布局学习笔记

目录 Web

阮大的教程实战篇

Flex布局的开源库

 

CSS传统布局基于盒子模型,依靠display + position + float属性进行定位,在一些特殊布局显得不灵活

Flex布局,容器内的元素自动成为flex item,容器基于XY轴进行布局

其容器属性有

  • flex-direction X主轴排列方向
  • flex-wrap 元素换行
  • flex-flow 上面2个的简写
  • justify-content 主轴对齐方式
  • align-items Y轴对齐方式
  • align-content 多轴线对齐方式

item属性有

  • order 排列顺序
  • flex-grow 剩余空间膨胀值
  • flex-shrink 空间不足缩小值
  • flex-basis 预分配大小值
  • flex 以上3个的简写
  • align-self 对齐方式

[……]

Read more

给Z-Blog加上代码高亮显示

目录 Web

用的是dp.SyntaxHighlighter ,JS+CSS实现的,很不错的东东

版本信息 dp.SyntaxHighlighter 1.4.1 Z-Blog 1.7 Laputa Build 70216

  1. 下载dp.SyntaxHighlighter.rar,解压到Z-Blog根目录,每种语言都有单独JS文件,把需要用到的传到WEB空间即可
  2. 打开z-Blog模板文件\TEMPLATE\single.html,在<head>标签里加 <link type="text/css" rel="stylesheet" href="<#ZC_BLOG_HOST#>css/SyntaxHighlighter.css"></link> 如果首页等其它页面也要实现语法高亮显示,在相应模板重复2、3步骤
  3. 在</body>前面加下面代码,根据自己需要选择性的加
  4. ……

……

[……]

Read more

网站重构,又见《网站重构》

目录 Web

网站重构》应该是div+css方面流入国内的首批书吧,虽然之前已有《CSS权威指南》《HTML与XHTML权威指南》等O’Reilly的坚果系列,但关注似乎并不多,而《网站重构》且好在Web2.0的热潮来临之际,书的作者和译者是业界出名人物,加上各大专业设计网站极力推荐,使书成了XHTML方面必读刊物。

我是在04年看完这书的,没有太大收获,谈不上技术刊物,也谈不上理论刊物,只是很罗嗦的介绍一些基础。发现很多书看起来都觉得罗嗦,就像之前的《交互设计之路》,也一样觉得罗嗦,语言太不简洁了,我以前公司有个技术主管,开会总喜欢用深奥的术语来解释简单问题,当时那些应届生都觉得主管很牛,我倒觉得那说明主管认识比较肤浅,嘿扯远了。

前几天在清理邮件,发现第二书店的书友会发来封评论邮件,是位叫Aryang的同志发的,标题为《很好的web设计消遣读物》,引用如下。

这本书我要说的是:太会包装了,从名字到设计。原书的标题是:Designing with Web Standards,内容就是于web设计相关的一些启蒙或故事,我个人感觉就是本“科普”类的书。但出版商很厉害,知道“重构”这个词最近很热,很吸引人,把这个当成了主标题,原书名成了副标题。我把这本书看了2/3,可以很负责的说,这个书和我们之前见到的“重构”没有任何关系。

另外这本书包装印刷精美,封面封底前言n多溢美之词,装帧设计也很有国外影音版的风格。但我只能说,金玉其表…

如果你想找本关于web设计的消遣读物,本书很适合你。

跟我意见有些相似,看完之后确实有点无所收获的感觉,很多疑问并没得到解决,但是又实在不想看第二遍了。

最近突然又想翻翻XHTML了,在豆瓣找到《无懈可击的Web设计》,看评论似乎不错,作者Dan Cederholm是一位屡获殊荣的Web设计师,而译者常可则是有丰富经验的程序员,看好了,是程序员哦,我甚是欢喜,因为每次做页面封装,美工丢过来的静态页面,基本充斥着无效、混乱的标签,连CSS也是一再而再的重复,我就经常把CSS从4百多行精简到40多行。熟练的程序员会从美工角度设计Web框架,更会从程序员角度考虑各种循环套用的标签,目前当当售价为34.9元,有机会要买来看看。

前几天在verycd下了2本div+css方面的书,方别是《精通CSS》和《别具光芒DIV+CSS》,是扫描件的,已经传到相册,有兴趣可以上去在线阅读


[……]

Read more

XUL+CSS做弹出菜单

目录 XML

很多软件都用这种效果,右边是效果图,使用的时候很简单,给<popup>标签加上css定义就可以了,如红色部分所示

菜单我挑了一个代码少的,效果一样哈

<popup id=”emailAddressPopup” popupanchor=”bottomleft” onpopupshowing=”goUpdateCommand(‘cmd_createFilterFromPopup’);” class=”popMunu”>
    <menuitem label=”&SendMailTo.label;” accesskey=”&SendMailTo.accesskey;” oncommand=”SendMailToNode(document.popupNode)”/>
    <menuitem label=”&CreateFilterFrom.label;” accesskey=”&CreateFilterFrom.accesskey;” command=”cmd_createFilterFromPopup”/>
    <menuitem label=”&AddToAddressBook.label;” accesskey=”&AddToAddressBook.accesskey;” oncommand=”AddNodeToAddressBook(document.popupNode)”/>
    <menuitem label=”&CopyEmailAddress.label;” accesskey=”&CopyEmailAddress.accesskey;” oncommand=”CopyEmailAddress(document.popupNode)”/>
</popup>

 下面是CSS文件部分,其中popmune_left.png是蓝色的渐变图

.popMunu{
    border: 1px solid #A0A0A0;
    background-color: #FAFAFA;
    padding: 0 2px 0 26px;;
    margin: 0;
    color: Black;
    line-height: 1.5em;
    background-image: url(images/popmune_left.png);
    background-repeat: repeat-y;
}
.popMunu menuitem{
    margin:1px 0;
    padding: 2px 0;
}
.popMunu menuitem:hover{
    background-color: #D5DFF1;
    color: Black;
}

[……]

Read more

CSS迷宫,CSS也可以玩的这么炫!

目录 Web

CSS也可以玩花样,真佩服作者,可以把样式表玩成这样,那是多么高的境界啊!

玩法很简单,从顶部的橙色入口进入“金字塔”,控制鼠标移动,注意不要移出方格,否则就得重新开始,找到每一层之间的“通道”,直到最后到达底部的橙色出口。作者提示: 注意八块砖的那层。

原地址:a frustrating puzzle | 出处:the CSS playground

[……]

Read more

学习XHTML的进展很慢

目录 Web

搞了一整晚,只弄个大概的样子,懵懵懂懂知道了一点,但很多还是搞不懂,经典论坛讨论的人好像不多,想写点笔记之类可学得很慢,似乎没什么好写的。

我是金子……

几本CSS/XHTML的书
CSS : The Definitive Guide 2nd Edition
OReilly CSS Cookbook Aug 2004
New Riders More Eric Meyer on CSS
XHTML Guidelines v1.2中文版
网页设计师(w3cn.org文章集)
xform的文章
前天还在蓝色人下载了一本叫《Creating Cool Web Sites with HTML, XHTML,and CSS》,刚刚试了居然不能下了
[……]

Read more