webkit textarea强制不换行并显示滚动条

说起来真是火大, 写代码的时候想要创建一个强制不换行的textarea元素, 因为相关的内容不记得了, 就去找Google帮忙, 结果出来的中文结果都是重复的内容, 还一点用都没有. 后来换了英文关键字, 第一个结果就解决了我的问题. 只能说是中文在某些领域的专业术语不多, 描述内容不够精确, 再加上很多网友重复倒垃圾, 造成了这种现象. 前面写的都是废话, 下面的是干货, 这两段css的效果是让webkit核心浏览器里的textarea元素不产生断行显示而使得水平方向能够产生滚动条. white-space: nowrap; overflow: auto; 我是拿这种textarea做类似迅雷的”新建下载任务”窗口的输入框的, 从而让用户可以用行作为分隔符输入多条下载链接. »


多说评论框自定义圆形头像

多说评论框的头像修改为圆形的,一段CSS就够: #ds-reset .ds-avatar img{ border-radius:100%; } 在多说评论框的后台找到自定义CSS,添加上这段代码即可. 效果如图所示: »


为多说评论框添加响应式设计 Ver 2.0

在为多说评论框添加响应式设计中我们让多说评论框在较小的屏幕上得以正常显示,现在多说又添加了一些新功能,导致在小屏幕设备上显示的效果又变得不好了. 官方要是不推出自己的响应式版本,我们这些用户就要无限的对它进行CSS修改,这样太麻烦了,希望这是我最后一次修改了. 删掉排序功能 首先是”最新”,“最早”,”最热”这三个排序功能,它遮挡了查看”新浪微博”和”腾讯微博”的按钮. 为了使我们的CSS修改尽量小,不应该添加太多的代码让它能够兼容显示在小屏幕设备上,事实上排序功能的使用频率是相当低的,我的选择是删掉它. 将#ds-thread #ds-reset .ds-sort从文档流中去除, »


为多说评论框添加响应式设计

本博客的常客罗佳告诉我多说评论框在iPhone上的显示效果不理想,我用响应式工具和手机查看了一下,确实存在严重问题.既然官方没有解决,那我就只能自己动手了. 修改层级评论的显示位置 层级评论的显示位置会逐级向右偏移,在移动设备上显示的效果就是评论内容的文字都被挤在了一起,显示效果如图所示. 通过开发者工具可以发现#ds-thread #ds-reset ul.ds-children这类元素被加上了38px的左填充. 把这个填充去掉,查看效果: 得出修改层级评论的CSS代码: #ds-thread #ds-reset ul.ds-children{ margin-left:0; } 修改评论输入框 评论框的问题也比较明显,一是左边的头像占了太多的位置, »


响应式Web设计:维持高宽比的弹性图片

博客换上了Wordpress团队开发的Twenty Twelve主题,这个主题是响应式设计的,可以自适应任何设备屏幕尺寸. 但美中不足的是,Wordpress的编辑器会自动给图片加上width和height属性,导致弹性图片的高度保持一个定值,看起来的效果是这样的: 固定高度 好吧,谁能借我把锤子让我砸掉屏幕? 冷静!这个问题只要修改一处css就可以搞定. 找到主题的style.css文件中的这一处: .entry-content img, .comment-content img, .widget img { max-width: 100%; /* Fluid images for »


Modern UI Color

develop: .red{ background-color:#E51400; } .magenta{ background-color:#FF0097; } .pink{ background-color:#E671B8; } .green{ background-color:#339933; } .grassgreen{ background-color:#8CBF26; } .darkgreen{ background-color:#597823; } .lightgreen{ background-color:#6BBA0C; } .yello{ background-color:#FFCD0F; } .orange{ »



CSS文件命名规范

一.文件命名规范 全局样式:global.css; 框架布局:layout.css; 字体样式:font.css; 链接样式:link.css; 打印样式:print.css; 二.常用类/ID命名规范 页 眉:header 内 容:content »