Fork me on GitHub
随笔 - 317  文章 - 1  评论 - 11  阅读 - 27万

随笔分类 -  CSS

1 2 下一页
css实现半颗星评分效果
摘要:效果如下: html代码 下载的字体:字体文件下载 阅读全文
posted @ 2017-09-24 20:50 雨为我停 编辑
CSS的class、id、css文件名的常用命名规则
摘要:CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left righ... 阅读全文
posted @ 2015-07-20 14:22 雨为我停 阅读(657) 评论(0) 推荐(0) 编辑
多行文本溢出显示省略号(…)全攻略
摘要:http://www.css88.com/archives/5206大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。overflow: hidden;text-overflow: ellipsis;whi... 阅读全文
posted @ 2015-05-19 15:20 雨为我停 阅读(738) 评论(0) 推荐(0) 编辑
巧用CSS文件愚人节恶搞(转)
摘要:明天就是4月1日愚人节了,也就是那个可适度开玩笑、整蛊的日子了。如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这个国外网友Wes Bos分享的 CSS 文件吧。 一、打开浏览器的 Custom.css 文件 本文以 Chrome 为例(CSS 修改后立即生效),进入同事或朋友的电脑,... 阅读全文
posted @ 2015-02-04 17:53 雨为我停 阅读(250) 评论(0) 推荐(0) 编辑
css页面重构面试题
摘要:偶然间又看到博客园中这两道页面重构面试题。题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架.思路:水平垂直均居中的实现,当然非absolute加外边距负值结合莫属.闲话略去,看代码及演示吧.2个DIV实现的核心CSS代码:点此查看DEMO.d... 阅读全文
posted @ 2014-12-25 17:54 雨为我停 阅读(794) 评论(0) 推荐(0) 编辑
用纯css写出三角形
摘要:1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。2、把它的宽高设置为height:0px; width:0px;3、设置边框border属性,用来实现三角形。首先要了解border具体是怎么样的,我写了一个这样的样式:border:50px ... 阅读全文
posted @ 2014-11-17 11:01 雨为我停 阅读(367) 评论(0) 推荐(0) 编辑
css滑动门制作圆角按钮
摘要:之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多。 事实上是之前理解的滑动门的精髓不够到位。 现在有两种方式。 效果展示:http://runjs.cn/detail/evk8nkc8 先上传... 阅读全文
posted @ 2014-09-24 13:33 雨为我停 阅读(834) 评论(0) 推荐(0) 编辑
CSS sprite 圆角——源代码
摘要:所需图片: corners-type1 corners-type2 corners-type3 corners-type4 corners-type5 roundedbox-type5-bgPrevie of... 阅读全文
posted @ 2014-08-08 16:20 雨为我停 阅读(245) 评论(0) 推荐(0) 编辑
比较大气的网页元素
摘要:看这么久网页,总看不到什么大气的网页元素,所以以后发扬收藏的好传统,这样也比较好用。1.提示框效果图如下: 所需图片: 效果查看 阅读全文
posted @ 2014-08-08 16:16 雨为我停 阅读(177) 评论(0) 推荐(0) 编辑
彩色网页变黑白色CSS代码变黑白色调!
摘要:将代码放入前即可让对应网页变黑灰色! 阅读全文
posted @ 2014-08-08 15:29 雨为我停 阅读(1090) 评论(0) 推荐(0) 编辑
兼容性极好的圆角边框
摘要:一、层级组建圆角 这是在网上看到比较好的兼容性的圆角边框,详见"圆角边框"。 现在要弄圆角边框,一般都是直接用border_radius,但是我们都很清楚这是CSS3的属性,兼容性不是那么完善,在ie8以及ie8以下的浏览器都是无效的,呈现出来的都是直角。 所以很多时候如果要做到兼容,很多时候... 阅读全文
posted @ 2014-08-01 17:17 雨为我停 阅读(493) 评论(0) 推荐(0) 编辑
自适应的CSS代码片段(常用)
摘要:/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */... 阅读全文
posted @ 2014-07-30 16:07 雨为我停 阅读(361) 评论(0) 推荐(0) 编辑
CSS z-index 属性的使用方法和层级树的概念
摘要:CSS中的z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index ... 阅读全文
posted @ 2014-07-17 15:01 雨为我停 阅读(326) 评论(0) 推荐(0) 编辑
图片水平垂直居中
摘要:效果仅见:http://runjs.cn/detail/tkid13aj无标题文档1111122222 阅读全文
posted @ 2014-06-25 15:27 雨为我停 阅读(178) 评论(0) 推荐(0) 编辑
CSS3实现jquery的特效
摘要:实现“慕课网”的图片滑过缩放的效果技术点:css3—— -webkit-transform:scale(1.2);.course-list-img .img_1:hover{ -webkit-transform:scale(0.8,1.2); //宽度缩小80%,高度放大120% ... 阅读全文
posted @ 2014-06-25 15:12 雨为我停 阅读(356) 评论(0) 推荐(0) 编辑
table点击一行显示下一行的特效
摘要:效果体验:http://sandbox.runjs.cn/show/rw4vq8zo无标题文档 02 19-38 三十一部 设计师 行行新嘻嘻 ... 阅读全文
posted @ 2014-06-25 13:50 雨为我停 阅读(356) 评论(0) 推荐(0) 编辑
colspan在浏览器中失效的问题
摘要:def ghi abc def ghi当tr的display:block时,colspan会失效,所以一般遇到table需要设置tr为block时,改为“table-row”即可。运用在这个案例中. 阅读全文
posted @ 2014-06-25 13:44 雨为我停 阅读(1556) 评论(0) 推荐(0) 编辑
css的框架——common.css
摘要:@charset "utf-8";/* 字体 */.n{ font-weight:normal; font-style:normal;}.b{font-weight:bold;} .i{font-style:italic;}.fa{font-family:Arial;} .fs{fon... 阅读全文
posted @ 2014-06-25 11:14 雨为我停 阅读(1902) 评论(0) 推荐(0) 编辑
CSS布局中——导航是非常常见的
摘要:导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用。 CSS菜单 首页 文章 参考 Blog 论坛 联系 阅读全文
posted @ 2014-06-23 11:24 雨为我停 阅读(331) 评论(0) 推荐(0) 编辑
css的框架——global.css
摘要:global.css,一般这个css文件是用于装全站主要框架css样式代码。“global”翻译为全局、全部。从翻译中大家也能理解global.css用于做什么。大站常常用于装全站公共的CSS样式选择器。全站能重复调用的CSS样式都放入此CSS文件内,可以节约样式代码、规范、有利于调用辨别。同时日后... 阅读全文
posted @ 2014-06-18 17:04 雨为我停 阅读(4304) 评论(0) 推荐(0) 编辑

1 2 下一页
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

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