随笔分类 -  CSS

摘要:页面重构时的注意事项1. 重构页面时,什么样的代码才算是好的代码?2. 重构时如何告诉设计师,他设计的东西太丑?1. 重构页面时,什么样的代码才算是好的代码?这个我感觉要从三方面来做答,基础的就不说了,那些语义化,结构化,兼容性等等方面的问题。说说中级部分的:页面的健壮性: 这个怎么说呢,按我的理解... 阅读全文
posted @ 2015-09-28 10:31 豪情 阅读(3411) 评论(2) 推荐(0) 编辑
摘要:前言一.开发工具 - 前端四大利器1. WebStorm1). 岂今为止,业界公认的前端开发利器。优点:2). 缺点3). 相关资源4). 后续展望2. Photoshop1).基本信息:2). 提高切图效率思路之扩展:3). 切图的几个办法:3. Firefox4. Chrome二.文件目录三.H... 阅读全文
posted @ 2015-01-29 11:46 豪情 阅读(6579) 评论(7) 推荐(12) 编辑
摘要:目录:一. 新浪的布局特点二. 内容细节的特点三. 其中相关的一些基础技术点1. 常见布局方法2. 布局要点3. Debugger误区4.列表5.字体颜色6.CSS选择符7.CSS图片10. CSS半透明文章背景:这是一次内部交流会的PPT,通过文字的方式记录下来,分享给更多的同学,同时也由于个人能... 阅读全文
posted @ 2015-01-22 10:14 豪情 阅读(8032) 评论(21) 推荐(40) 编辑
摘要:以下是常用的代码收集,没有任何技术含量,只是填坑的积累。转载请注明出处,谢谢。因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/master/css.md一. css 2.x code1. 文字换行/*强制不换行*/white-space... 阅读全文
posted @ 2015-01-19 09:16 豪情 阅读(10376) 评论(29) 推荐(51) 编辑
摘要:文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1结果,一扯就根本停不下来。索性,一捅为快,反正是周末。拿到效果图时,有这么几步,就我了解的情况做一下分享,不一定全部都是科学,但可以部分借鉴。我先说一下,熟练后拿到效果图时这样的... 阅读全文
posted @ 2014-10-19 10:30 豪情 阅读(23828) 评论(17) 推荐(18) 编辑
摘要:这是一款用于http://jing-ui.com网站后台管理界面,也可以用于管理系统或其它通用后台界面。有时候我也在思考,一般的用户或者大部分用户他们是否需要像ext,easyui这样成型的界面解决方案,或许他们只是需要一款简洁,方便的一个界面模板,而这款的宗旨是,页面基本没有过多的交互效果,简洁粗暴的同时带来的是界面加载速度的提升或操作便捷性的增加。2个css文件不超过20k,图标采用的是字体图标,图标素材都来自于icomoon网站,没有任何图片。页面整体采用扁平化处理,布局更趋向于暴露内容的本质,页面块之间的留白更多,字体更大,配色更单一,在form表单处参照了bootstrap的流... 阅读全文
posted @ 2014-03-28 18:47 豪情 阅读(10674) 评论(38) 推荐(31) 编辑
摘要:由于游戏类官网在页面背景和装饰人物的设计上追求画丽且与游戏风格想匹配,这就给前端页面制作人员带来了很多的麻烦,一个页面的制作主要时间和精力花费在兼容ie6上,而ie6因为不兼容png-24的图片一直被开发人员所鄙视。由于市场决定了页面的存在的价值,所以ie6还是必须要兼容。下面介绍几种常用的解决办法:dd_belatedpng.js法引入js文件<!--[ifIE6]><scripttype="text/javascript"src="js/dd_belatedpng.js"></script><script&g 阅读全文
posted @ 2013-03-13 10:46 豪情 阅读(1586) 评论(0) 推荐(0) 编辑
摘要:没有过多的文字,直接看效果。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; 阅读全文
posted @ 2012-08-31 19:41 豪情 阅读(8000) 评论(0) 推荐(3) 编辑
摘要:实现的难点在于:first-child,last-child 两个选择器,以后margin-left:-1px;的应用,33%,34%宽度的技巧处理。另外一个难点是:box-shadow:1px 0 0 #F1F1F1 inset;的实现。最后是:background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#b6b4b4));background:-moz-linear-gradient(top, #f9f9f9, #b6b4b4);background:-o-linear-gradient(top, 阅读全文
posted @ 2012-08-31 19:28 豪情 阅读(2233) 评论(0) 推荐(0) 编辑
摘要:原文来自于这:http://www.qianduan.net/webkitu002639s-css-know-how-for.html只是把图片还原了一下:<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>用于WebKit的CSS诀窍</title><style type="text/css">*{ margin:0; padding:0;}body{font:12px/2 arial; backgroun 阅读全文
posted @ 2012-08-15 10:34 豪情 阅读(951) 评论(0) 推荐(0) 编辑
摘要:li在ie与firefox的高度是不一样的,解决办法是li font-size:0;然后在将其子元素复为12px <style type="text/css">.tu_freeline_list li{text-indent:10px;font-size:0;height:30px;line-height:30px;overflow:hidden;zoom:1;}.tu_freeline_list li span{float:left;height:30px;overflow:hidden;width:155px;font-size:12px;}.tu_free 阅读全文
posted @ 2011-11-13 20:37 豪情 阅读(1278) 评论(0) 推荐(0) 编辑
摘要:原来回复51js上面一个兄弟的问题,害怕在茫茫的信息之海中会被淹没,暂时转到这儿来,以示学习总结之意。在回答别人问题时,对自己真是一个考验提高,在总结,摸清原有模糊概念的基础上要讲,全,简,易。真是不容易。佩服那些写教程福利芸芸众生的先行者们~!! 下面简单谈谈css的权重:权重简单的也可以理解为JavaScript中的作用域,回头仔细想想,其实所有的IT抽象世界的东东都是通的。内嵌样式 内部样式表 外联样式表如:[代码]main.css中:[代码]这三个里边:内嵌样式: [代码]内部样式表:[代码]外联样式表:main.css中内容。这是大体上的css权重量级别,一般常用外联。然后我 阅读全文
posted @ 2010-12-02 10:06 豪情 阅读(3921) 评论(9) 推荐(1) 编辑
摘要:今天一小伙在群外问一小问题,问曰:[代码]http://yearise.8800.org:8080/打开一看原来是一客服在ie6里边掉下边去了。刚开始我还怀疑是js的原因。结果在最下边鼠标放上去,交互效果是有的。这时候我就怀疑是css的原因。在ff里边打开看后发现,css路径是对的。但是在ff里边查看源文件的时候里边的文字是乱码的,这时候我就想到是不是以前碰到的一个旧问题:可能是dw cs3,或 ... 阅读全文
posted @ 2010-10-25 14:54 豪情 阅读(680) 评论(0) 推荐(0) 编辑
摘要:如何布局登录页面混迹学习网N长时间了,学习网也陪我度过不少青涩的岁月。一直想给学习网奉献点什么,但苦于忙碌奔波于尘世琐事之中无暇抽身。今天终于驱除杂念,一心向佛,痛定思痛,分享点自己的心得。另外写教程是辛苦的,诸位转载请注明“豪情”字样。所谓login就是一般的登录页面,应用系统或网站后台都会用到这个login页面,因为通过这个页面的用户名密码信息的验证才能登进系统做必要的... 阅读全文
posted @ 2010-07-17 22:57 豪情 阅读(3267) 评论(0) 推荐(0) 编辑
摘要:你在写css时样式表加上浏览器标识符就行了,各浏览器区别如下: IE都能识别*,标准浏览器(如FF)不能识别*;IE6能识别*,但不能识别 !important;IE7能识别*,也能识别 !important;IE8能识别\0,不能识别*,+,_,*加!important;FF不能识别*,但能识别 !important;例如style=”*width:10px!important;... 阅读全文
posted @ 2010-06-21 14:04 豪情 阅读(626) 评论(0) 推荐(1) 编辑
摘要:译自:你需要知道的CSS3 动画技术译自:What You Need To Know About Behavioral CSS请尊重版权,转载须注明本站链接!译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容。如有不足之处,欢迎指正补充。随着网络的发展,浏览器具有更强的渲染更高级代码的能力,我们正逐步实现跨越所有... 阅读全文
posted @ 2010-06-21 13:24 豪情 阅读(2793) 评论(0) 推荐(1) 编辑
摘要:http://www.see-design.com.tw/i/css_position.html 阅读全文
posted @ 2010-06-17 11:36 豪情 阅读(844) 评论(0) 推荐(1) 编辑
摘要:CSS学习网 - 5群 87951377 群主实现的圆角 <style type="text/css">body,p,div {margin:0;padding:0;}.Box {margin:10px auto;width:500px;}/*淘宝的圆角方法*/.R-1-T,.R-1-B {height:6px;position:relative;background-image:ur... 阅读全文
posted @ 2010-05-20 21:31 豪情 阅读(716) 评论(0) 推荐(0) 编辑
摘要:源自于:http://bbs.blueidea.com/thread-2860424-1-1.html这个主要用来,写测试例子时搭配色。 阅读全文
posted @ 2010-05-14 09:17 豪情 阅读(743) 评论(1) 推荐(1) 编辑
摘要:来自于:http://bbs.blueidea.com/thread-2860424-1-1.html收集与整理:Hmily http://mysheji.com/blog 阅读全文
posted @ 2010-05-14 09:16 豪情 阅读(952) 评论(1) 推荐(0) 编辑