CSS - 随笔分类 - 雨为我停

摘要：效果如下： html代码下载的字体：字体文件下载阅读全文

posted @ 2017-09-24 20:50 雨为我停

摘要：CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left righ... 阅读全文

posted @ 2015-07-20 14:22 雨为我停阅读(685) 评论(0) 推荐(0)

多行文本溢出显示省略号(…)全攻略

摘要：http://www.css88.com/archives/5206大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。overflow: hidden;text-overflow: ellipsis;whi... 阅读全文

posted @ 2015-05-19 15:20 雨为我停阅读(758) 评论(0) 推荐(0)

巧用CSS文件愚人节恶搞(转)

摘要：明天就是4月1日愚人节了，也就是那个可适度开玩笑、整蛊的日子了。如果你想和那些要上网的朋友或同事开个极客式玩笑，那就来试试这个国外网友Wes Bos分享的 CSS 文件吧。一、打开浏览器的 Custom.css 文件本文以 Chrome 为例（CSS 修改后立即生效），进入同事或朋友的电脑，... 阅读全文

posted @ 2015-02-04 17:53 雨为我停阅读(285) 评论(0) 推荐(0)

css页面重构面试题

摘要：偶然间又看到博客园中这两道页面重构面试题。题一:分别用2个DIV,3个DIV,5个DIV实现水平垂直均居中显示一个宽50px,高200px的正十字架.思路:水平垂直均居中的实现,当然非absolute加外边距负值结合莫属.闲话略去,看代码及演示吧.2个DIV实现的核心CSS代码:点此查看DEMO.d... 阅读全文

posted @ 2014-12-25 17:54 雨为我停阅读(814) 评论(0) 推荐(0)

用纯css写出三角形

摘要：1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。2、把它的宽高设置为height:0px; width:0px;3、设置边框border属性，用来实现三角形。首先要了解border具体是怎么样的，我写了一个这样的样式：border:50px ... 阅读全文

posted @ 2014-11-17 11:01 雨为我停阅读(382) 评论(0) 推荐(0)

css滑动门制作圆角按钮

摘要：之前做项目的时候，基本都是将圆角背景图切成三块，故而每次用的标签都超级多，a标签中总是包含三个span，然后里面还得放按钮，导航冗余标签极多。事实上是之前理解的滑动门的精髓不够到位。现在有两种方式。效果展示：http://runjs.cn/detail/evk8nkc8 先上传... 阅读全文

posted @ 2014-09-24 13:33 雨为我停阅读(858) 评论(0) 推荐(0)

CSS sprite 圆角——源代码

摘要：所需图片： corners-type1 corners-type2 corners-type3 corners-type4 corners-type5 roundedbox-type5-bgPrevie of... 阅读全文

posted @ 2014-08-08 16:20 雨为我停阅读(268) 评论(0) 推荐(0)

比较大气的网页元素

摘要：看这么久网页，总看不到什么大气的网页元素，所以以后发扬收藏的好传统，这样也比较好用。1.提示框效果图如下：所需图片：效果查看阅读全文

posted @ 2014-08-08 16:16 雨为我停阅读(187) 评论(0) 推荐(0)

彩色网页变黑白色CSS代码变黑白色调！

摘要：将代码放入前即可让对应网页变黑灰色！阅读全文

posted @ 2014-08-08 15:29 雨为我停阅读(1126) 评论(0) 推荐(0)

兼容性极好的圆角边框

摘要：一、层级组建圆角这是在网上看到比较好的兼容性的圆角边框，详见"圆角边框"。现在要弄圆角边框，一般都是直接用border_radius，但是我们都很清楚这是CSS3的属性，兼容性不是那么完善，在ie8以及ie8以下的浏览器都是无效的，呈现出来的都是直角。所以很多时候如果要做到兼容，很多时候... 阅读全文

posted @ 2014-08-01 17:17 雨为我停阅读(561) 评论(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 雨为我停阅读(384) 评论(0) 推荐(0)

CSS z-index 属性的使用方法和层级树的概念

摘要：CSS中的z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index ... 阅读全文

posted @ 2014-07-17 15:01 雨为我停阅读(380) 评论(0) 推荐(0)

图片水平垂直居中

摘要：效果仅见：http://runjs.cn/detail/tkid13aj无标题文档1111122222 阅读全文

posted @ 2014-06-25 15:27 雨为我停阅读(194) 评论(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 雨为我停阅读(370) 评论(0) 推荐(0)

table点击一行显示下一行的特效

摘要：效果体验：http://sandbox.runjs.cn/show/rw4vq8zo无标题文档 02 19-38 三十一部设计师行行新嘻嘻 ... 阅读全文

posted @ 2014-06-25 13:50 雨为我停阅读(371) 评论(0) 推荐(0)

colspan在浏览器中失效的问题

摘要：def ghi abc def ghi当tr的display：block时，colspan会失效，所以一般遇到table需要设置tr为block时，改为“table-row”即可。运用在这个案例中. 阅读全文

posted @ 2014-06-25 13:44 雨为我停阅读(1593) 评论(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 雨为我停阅读(1933) 评论(0) 推荐(0)

CSS布局中——导航是非常常见的

摘要：导航绝对是页面布局中最常见的，为了不用每次去写，稍微贴个简单的导航模版出来，方便以后使用。 CSS菜单首页文章参考 Blog 论坛联系阅读全文

posted @ 2014-06-23 11:24 雨为我停阅读(353) 评论(0) 推荐(0)

css的框架——global.css

摘要：global.css，一般这个css文件是用于装全站主要框架css样式代码。“global”翻译为全局、全部。从翻译中大家也能理解global.css用于做什么。大站常常用于装全站公共的CSS样式选择器。全站能重复调用的CSS样式都放入此CSS文件内，可以节约样式代码、规范、有利于调用辨别。同时日后... 阅读全文

posted @ 2014-06-18 17:04 雨为我停阅读(4460) 评论(0) 推荐(0)

随笔分类 - CSS