随笔分类 -  css

【转】为什么我的DIV块前总有空隙？
摘要：在做网站项目时，博主爱吾所爱（爱生活=爱技术）很偶然地碰到一个奇怪的事情。我的DIV嵌套在另一个DIV里，总是出现这样一行空隙：Firebug查看内外两层DIV的margin, padding, line-height所有可能的东西，也都是0。右键查看源代码，并没有什么异常。狐狸的尾巴总会露出来。再... 阅读全文

posted @ 2014-09-01 18:52 pinocchioatbeijing 阅读(371) 评论(0) 推荐(0)

CSS：before和after实现宽度自适应的圆角边框效果
摘要：1. 目标一个登录后的个人信息显示条，最终要实现的效果如下图所示：2. 分析这个显示条的特点是：用户的用户名和积分可能会占据不同的宽度，这样会导致整个边框的宽度不同。边框的颜色是用的渐变色，上深下淡，所以现阶段还只能用切图的方法来做。这要怎么实现呢？办法很多。综合考虑，觉得将边框的左侧、右侧、中间平铺部分各切出4px，形成一个4*75的PNG图片，用CSS来调整background-position的办法比较靠谱，既能实现自动平铺，又可满足左右圆角的要求。切图如下：3. HTML结构由于是几个超链接的并排显示，所以选择用ul li的组合，li里面当然用a标签了。4. CSS实现由于对befor 阅读全文

posted @ 2012-08-01 12:00 pinocchioatbeijing 阅读(4704) 评论(0) 推荐(0)

HTML+CSS+jQuery实现的一个数值增减组件NumericUpDown
摘要：在做一个项目的过程中，需要自己实现这样一个组件，效果图如下：0. 功能分析：当鼠标点击向下与向下按钮的时候，左边的数值要随之增减。当然这样的组件在网上比比皆是，我还是决心自己做一个试试。1. 首先是切图。切成下面这样的图，左边为正常显示的背景，右边为鼠标经过的背景。2. 决定html结构。如下： <div id="addsubtract1" class="addsubtract"> <div class="addsubtract-left"></div> <div class="ad 阅读全文

posted @ 2012-07-23 18:12 pinocchioatbeijing 阅读(1923) 评论(0) 推荐(0)

试一个仿豆瓣FM效果的CSS设计
摘要：想依照豆瓣FM的效果做一个自己的界面应用，但是只完成了在FF下的工作，IE下的兼容性真难啊~~既要fixed，又要左右与垂直居中，真的有那么难吗？！！<html><head><title>Test for DIV CSS</title><style><!--body { background-color: #333; margin: 0; padding: 0; height: 100%; overflow: auto;}div.fd { width: 500px; height: 190px; position: fixed; 阅读全文

posted @ 2012-07-08 21:28 pinocchioatbeijing 阅读(438) 评论(0) 推荐(0)

网页中的数学公式
摘要：无意中发现一个在网页中显示数学公式的解决方案,MathJax，太崇拜这些人了！他们才是真正地IT人，哪像国内我们这些民工？代码如下：<!DOCTYPE html><html><head><title>MathJax AsciiMath Test Page</title><script type="text/javascript" src="http://cdn.mathjax.org/mathjax/2.0-latest//MathJax.js?config=AM_HTMLorMML-full&qu 阅读全文

posted @ 2012-04-08 14:37 pinocchioatbeijing 阅读(728) 评论(0) 推荐(0)

导航