预览模式: 普通 | 列表

商信学堂第二期---拉尔法滴习作




分类:设计学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 50

JS模拟CSS 3多栏文字

昨天看中国丫头的帖子, CSS能将一段文字排成两列吗?如果按照CSS 3的方法来,就简单了很多,但按照当前环境来说,不实际。

突然想到用JS模拟,大致原理:

1:给段落标签的父容器设置高度,高度为:行数*行高,并设置属性:overflow:hidden;来隐藏余下文字。
2:clone段落标签(即要分栏的那个标签),clone的次数是由实际文字量决定。
3:将clone好的节点依次向右纵向排列,并递增top负边距。


如下图示例:



注意:
示例代码中,每行文字的高度由行高决定,前提是font-size数值小于line-height数值,否则以font-size为准。
 

 为减少代码,下方示例未考虑特殊情况,可根据这个思路进行扩展

 XML/HTML代码

查看更多...

分类:前端学院 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 41

设计一个HTML5表单


    网页表单的运用,想必很多网页设计师和前端开发都非常熟悉。大家都已经使用文本框、按钮、列表/下拉菜单......甚至一些交互性相对比较复杂的表单用到隐藏域来传递数据。
     但是,一些复杂的数据类型比如:电话号码、电子邮件都需要通过javascript来验证检查 (或者通过服务器端语言进行数据验证)。现在一些主流的浏览器都在不断的支持HTML5一些新的元素、属性(比如Opera 、chrome和safari等)。大家先不用太兴奋,因为ie6、ie7、ie8都不支持最新的HTML5表单元素 ......

查看更多...

Tags: 表单 html5

分类:前端学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 121

蔡潞滴习作



分类:设计学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 54

兜兜转转哈滴习作


分类:设计学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 54

商信学堂第二期---夏祁mm滴习作

分类:设计学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 57

商信学堂第二期---营子滴习作

分类:设计学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 58

商信学堂第二期---佳妮mm滴习作

分类:设计学院 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 62