随笔- 95  文章- 401  评论- 65  阅读- 156万 

文章分类 -  CSS技巧

css3 各种纸张贴纸效果
摘要：请使用支持CSS3的浏览器查看效果：Box1Box2Box3Box4Box5Box6Box7Box8Box9Box10Box11Box12Box13Box14Box15源代码如下： Box1 Box2 Box3 Box4 Box5 Box6 Box7 Box8 Box9 Box10 Box11 Box12 Box13 Box14 Box15 阅读全文
posted @ 2014-02-22 11:51 纳米程序员 阅读(531) 评论(0) 推荐(0) 编辑
网站变灰色代码方法大集合（站点哀悼代码之用）
摘要：网站变灰色代码变素色和黑白方法大集合（站点哀悼代码之用）举国都在哀悼此次地震的遇难者，很多门户网站纷纷变成灰色色调来缅怀那些逝者。身为站长的你是否也应该做些什么，那还等什么……而如何将网站变成灰色调呢，网站变灰色方法是什么？有哪些？为了方便大家查看，特整理下出个网站变灰色/黑白色代码方法的大集合以供大家参考与使用。详细方法大集合如下：方法一：在你的网站页面上之间加上下面这段代码：方法二：在你的网站页面上之间加上下面这段代码：方法三：找到你的网站CSS文件，把下面的代码放到网站的css文件头部中body{ filter:gray;}方法四：找到你的网站CSS文件，把下面的代码放到网站的css文件 阅读全文
posted @ 2013-07-10 09:25 纳米程序员 阅读(610) 评论(0) 推荐(0) 编辑
如何将页脚固定在页面底部
摘要：作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的 阅读全文
posted @ 2013-06-08 13:42 纳米程序员 阅读(281) 评论(0) 推荐(0) 编辑
DIV+CSS左右等高布局
摘要：<!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; charset=utf- 阅读全文
posted @ 2013-05-04 11:00 纳米程序员 阅读(941) 评论(0) 推荐(0) 编辑
气泡提示浮出层的两种纯CSS写法(浏览器全兼容)
摘要：气泡提示能给用户良好的浏览体验，相信大部分前端人都做过吧？(什么？你没做过，那信息提示层总做过吧？！)最近在网上看到了一种写气泡提示的纯CSS代码，其代码简练，兼容性之强，是非常少见的，效果如下图。首先，是第一种，利用字符“◆”实现。请看代码，HTML部分：1234<div class="poptip"> <span class="poptip-arrow poptip-arrow-bottom"><em>◆</em><i>◆</i></span> 这是气泡提示，纯CSS 阅读全文
posted @ 2013-02-20 16:35 纳米程序员 阅读(3650) 评论(0) 推荐(0) 编辑
table显示边框问题，隐藏行线，列线
摘要：只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void> <table rules=cols cellspacing=0 align=left> ... 阅读全文
posted @ 2012-08-01 11:48 纳米程序员 阅读(12081) 评论(0) 推荐(0) 编辑
CSS 上下居中3种方案
摘要：在CSS里不好使了,在CSS里 解决上下居中问题又能支持both IE和Firefox的有3种方案:第一种,上下居中文字:方法是使用line-height,因为line-height就是用来定义文字行与行之间的距离,所以定义文字框的line-height等于框的高度可以让文字上下居中.h1 { font-size: 3em; height: 100px; line-height: 100px; } 需要注意的是:如果中间的文字不只一行,并且使用分行显示的时候，这个就不好用了.第二种,非文字的上下居中:使用absolute positioning，需要注意的是这个方法只... 阅读全文
posted @ 2012-07-18 15:31 纳米程序员 阅读(595) 评论(0) 推荐(0) 编辑
分享简单而实用的网页菜单导航【提供源码】
摘要：菜单导航对于一个网站来说非常重要，对于浏览者来说，导航设计的好坏将直接影响用户的体验。这里，我们为网页开发者提供了一系列简单但是实用的导航菜单例子及其源码，仅供参考和学习。CSS3相关的导航1、CSS3水平导航和垂直导航这是一款灰色风格的导航，具有水平和垂直的形式，这个导航是由CSS3实现的，所以需要用支持CSS3的浏览器来查看。你可以通过自己修改CSS代码轻松实现漂亮的水平导航和垂直导航。2、银白色的CSS3导航菜单这是一款纯CSS3制作的导航菜单，这个银白色的菜单在朦胧夜空的衬托下显得格外亮丽。当鼠标滑过导航时，每个菜单项又会呈现不同的效果，整体上，这款CSS3导航菜单非常简单而又具有立体 阅读全文
posted @ 2012-06-14 09:51 纳米程序员 阅读(414) 评论(0) 推荐(0) 编辑
浏览器打印强制换页
摘要：加上强制分页代码即可 style="page-break-after:always;" 阅读全文
posted @ 2012-03-31 14:22 纳米程序员 阅读(461) 评论(0) 推荐(0) 编辑
去掉CheckBox的边框
摘要：打印时候去掉边框：html:<input type="checkbox" style="width: 28px; height: 28px;position: absolute; clip: rect(6px 22px 22px 6px)" />解释：根据自己需要的大小调 width height，如果 width height 动的话，rect后面的参数要相应改变。这个是我感觉调试出来的最佳的大小，要想放大缩小，自己调整即可！注意：CheckBox 外面的td的样式要 竖着 向上对齐，横着居中，width大小比CheckBox 大1px即可 阅读全文
posted @ 2012-03-21 16:38 纳米程序员 阅读(7357) 评论(1) 推荐(0) 编辑
表格边框探秘
摘要：一、表格中单元格之间分隔线的隐藏方法第一行第二行第三行这个表格去掉了单元格之间的纵向分隔线第第第一二三列列列这个表格去掉了单元格之间的横向分隔线横线竖线都没了这个表格去掉了单元格之间的纵向分隔线和横向分隔线 其实上面的三个表格都有三行三列，隐藏分隔线的诀窍在于rules，察看这三个表格的源代码，我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none)，当rules=cols时，表格会隐藏纵向的分隔线，这样我们就只能看到表格的行；当rules=rows时，则 隐藏了横向的分隔线，这样我们只能看到表格的列；而当rules=none时，纵向分隔线和横 阅读全文
posted @ 2012-03-15 15:03 纳米程序员 阅读(191) 评论(0) 推荐(0) 编辑
8个css3代码产生工具
摘要：1、CSS3 Menu Generator这是个简单的软件，用于产生各种css3菜单，内置了非常丰富的css3菜单效果。2、CSS3 Rounded Corner Generator用于产生css3的圆角效果，值得一提的是该站点还提供其他的css工具，比如css3示例、css验证等。3、CSS3 Maker明河极力推荐，非常全面的css3在线工具，可以产生圆角、文字阴影、css3动画等。4、Bor... 阅读全文
posted @ 2010-09-07 10:51 纳米程序员 阅读(235) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示