- 博客(82)
- 收藏
- 关注
RSS订阅原创 纯css实现照片墙3D效果
家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片，除了用画框装饰照片挂在墙上外，照片墙还可以演变为手绘照片墙。也可以改动改动其中的属性多玩玩，自己测试的时候建议用美女的照片，绝对"乐在其中"。/*本身图片的z-index是1，鼠标经过时候设置成2，那么这张图片就会"上来"*/css代码的这些注释也是热乎的，大家可以自己看看，可以改动其中的一些属性多玩玩。--美女的照片自己准备，小样的照片百度有 :)-->/*宽度可以根据自己选择的照片内容而定*//*给照片加一个相框的效果*//*渐出动画效果*/
2025-05-20 16:26:52
772
原创 Amazing！！CSS 也能实现烟雾效果？
本文继续此系列，本文主要想探讨一下，使用 CSS 能否比较好的实现一些。像是这样：首先看模糊效果，想到模糊，大部分同学首先都会想到使用。当然没错，不过在 CSS 中，除了滤镜，我们还能使用一类其他手段去模拟的效果。
2025-05-20 12:43:57
381
原创 【总结】高效整洁CSS代码原则
所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...}我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。压缩您的代码，可以采用一些工具，
2025-05-20 12:36:05
624
原创 《使用css3仿造window7的开始菜单》
前一阵在园子里看到一篇文章《使用css3仿造window7的开始菜单》，文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果，很久以来一直被WPF/Silverlight 山上的风景所吸引，未成想其他的山也同样引人入胜。于是心血来潮也尝试着做了一个Windows 7 桌面效果，先来看几张截图吧。
2025-05-20 09:16:09
652
原创 纯CSS做3D旋转魔方
-包裹所有元素的容器-->143 <!--前面图片 -->147 <!--后面图片 -->151 <!--左面图片 -->155 <!--右面图片 -->159 <!--上面图片 -->163 <!--下面图片 -->168 <!--小正方体 -->-- 外层最大容器 -->千行代码，Bug何处藏。
2025-05-20 09:12:00
928
原创 CSS的inherit与auto
在块级元素的可度量的属性中（如width，height），如果不设置值，其默认值是auto，但它很容易会被父级元素的值覆盖，也就是隐式地成为了inhert了。在内联元素中，由于不具备盒子模型，如果不设置，就算是火狐也原本奉还它，这对于精确计算元素的宽度与高度是非常不利的。在CSS中，许多属性都是可以继承的，如某个段落的字体设置为白色，其元素的字体不用设置或设置为inhert，它就是白色。，它会从父元素获取对应属性的经过计算与转换的值，如果父元素和它的情形一样，它就继续往上找，最后没有就使用浏览器的默认值。
2025-05-20 09:04:49
791
原创 CSS遮罩效果和毛玻璃效果
前端入门容易精通难，说的是前端，更指javascript</div><div class="inner">前端入门容易精通难，说的是前端，更指javascript
2025-05-20 08:57:33
1045
原创 JS/CSS缓存杀手——VS插件
前些天去考科目二，感觉经历了一场不是高考却胜似高考的考试（10年前的5分之差， 还是难以释怀）！一行八人，就我学的时间最少（4天，8人一辆车），教练都觉得我肯定还得再来一次！靠着运气和信念，惊险的通过了侧方停车和倒车入库，终于还是抚慰了一下10年前那颗年轻的心！——————————感慨完毕，回归主题——————————终于修改完了客户提交的bugs，发布、更新、测试、邮件通知，悠哉悠哉的浏览博客园...然后客户来了...
2025-05-20 08:55:05
842
原创 用CSS实现一个抽奖转盘
animation-play-state 动画执行状态，默认为running，可以设置为pause，动画将在当前状态停止，再改为running时，会接着上一次停止的位置继续执行动画。
2025-05-18 11:36:21
904
原创 博客园页面定制CSS代码
*原始 16px；88 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;/*原始 1.6em*//*原始 15px */4 min-width: 980px;/*页面顶部的宽度*/首先，皮肤选择darkgreentrip。千行代码，Bug何处藏。80 /*文章附加信息*/
2025-05-18 10:18:10
799
原创 CSS 的优先级机制[总结]
● 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。当在连接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本创建），IE 浏览器就表现出它的另类了。D 继承的CSS 样式不如后来指定的CSS 样式；
2025-05-18 10:11:20
815
原创 深入理解CSS网页布局-理论篇
- 这是一个清除浮动的空标签 --></div>效果图：图p14分析：原理很简单，空div设置了clear属性，所以它不受前面1,2,3的影响，所以它就会排在1,2,3的后面，造成了空div与顶部之间有了一定的距离，这个距离就拉大了父元素的尺寸，所以从表现上看，就像是清除了浮动，达到我们想要的效果。此方法的弊端就是添加了额外的无意义的标签。
2025-05-18 09:47:14
888
原创 巧用 CSS 实现动态线条 Loading 动画
有群友问我，使用 CSS 如何实现如下 Loading 效果：这是一个非常有意思的问题。动画如下：所以，这里的的难点也就转变为了，如何动态的实现弧形线段的长短变化？解决了这个问题，也就基本上解决了上述的线条变换 Loading 动画。
2025-05-18 09:40:35
1273
原创 CSS裁剪clip
一个绝对定位或固定定位元素通过使用属性clip可以改变剪裁区域的形状，但并不改变元素本身的宽高属性clip值: rect(top,right,bottom,left) | auto | inherit初始值: auto应用于: 绝对定位或固定定位元素继承性: 无[注意]默认值auto表示元素的内容不应剪裁。
2025-05-18 09:32:05
662
原创 纯HTML+CSS实现阿童木头像
在里面主要用的了CSS中的几个属性：position—定位；animation —动画，技术点不是很多，主要是细心和耐心。由于考虑浏览器的CSS兼容性，代码比较多。1963年，他登上荧幕，在日本创下了未曾有过的高收视率……他叫阿童木，一个纯真、善良、勇 敢的机器娃娃。你的童年记忆中，有这个发型尖尖的少年吗。正好最近学习CSS3，就准备练练手，画一个阿童木的头像。实用性不是很大，主要为练习HTML+CSS，也是为了打发时间和磨练耐心。第一次写博客，写的不是很好，以后不断努力！千行代码，Bug何处藏。
2025-05-18 09:21:36
263
原创 理解CSS视觉格式化
CSS视觉格式化这个词可能比较陌生，但说起盒模型可能就恍然大悟了。实际上，盒模型只是CSS视觉格式化的一部分。视觉格式化分为块级和行内两种处理方式。理解视觉格式化，可以确定得到的效果是应该显示的正确效果，还是浏览器兼容性的bug。下面将详细介绍CSS视觉格式化。
2025-05-18 09:12:56
1076
原创 深入理解css中vertical-align属性
div{.align{*/<div></div><div class="align">为什么？</div>
2025-05-18 09:07:05
2298
原创 纯CSS相册3
left类能让页面元素位于行的最左端，如果此行已有一个拥有这类的元素，它就会跳到下一行，成为下一行的最左端的元素。我们在第五个LI元素应用left类，它会成为当前行（即第二行）的最左端的元素，由于它本来就是这个位置，于是保持不变。接着流程基本一致，第七个LI元素应用left类，第八个LI元素应用right类，交错进行，直到我们在火狐下看到中间被挖空为止。这时，IE6又出问题，最后两个元素赖在内部不走，但我们又不能给它应用left类或right类，这样会出现不合要求的第五行。千行代码，Bug何处藏。
2025-05-18 08:38:56
265
原创 深入理解CSS浮动
float 浮动浮动元素脱离普通流，然后按照指定方向，向左或者向右移动，碰到父级边界或者另外一个浮动元素停止值: left | right | none | inherit初始值: none应用于: 所有元素继承性: 无。
2025-05-18 08:29:21
372
原创 css知多少（12）——目录
css知多少》的读者建议是了解css基础知识（或者刚刚入门），但是没有系统学习、归纳、总结过的人，还有那些整天忙于coding、bug、加班当饭吃的，而没有时间去看书学习的码工们。《css知多少》里虽然内容不多，但是都是我觉得应该讲的基础，那些不需要讲的基础我就没有讲。如果你喜欢《水浒》，千万不要只读原著当故事看，一定要读一读各代名家的批注和点评，看他们是如何理解的。因为后者就是中国一个80后写的，我通过他对C#的了解，作为桥梁和阶梯，再去窥探比较高达上的书籍和知识。我的经历告诉我：学习有捷径。
2025-05-18 08:23:18
213
原创 css知多少（10）——display
网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中，都会问道哪些元素是“块”哪些元素是“流”。其实，这部分知识都囊括在display这个样式设置中。在网上查找出display所有的属性，你会发现它有很多，但是不是每个都常用，甚至大部分你都没有用过。
2025-05-18 08:20:55
1039
原创 前端基础之CSS
CSS（CascadingStyleSheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
2025-05-18 08:17:28
874
原创 CSS的选择器
最近在研究jQuery的选择器，大家知道jQuery的选择器和css的选择器非常相似，所以整理一下css选择器；css1-css3提供非常丰富的选择器，但是由于某些选择器被各个浏览器支持的情况不一样，所以很多选择器在实际css开发中很少用到。
2025-05-17 15:56:59
853
原创 常用CSS书写技巧
不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。/*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/书写顺序，一般是将识别能力强的浏览器的CSS写在后面。
2025-05-17 15:54:10
888
原创 CSS垂直居中总结
将center元素display设置为inline-block，vertical-align设置为middle，为包含框设置after伪元素，将伪元素display设置为inline-block,vercial-align设置为middle，同时设置height为100%，撑开容器。将center元素的包含框display设置为table，center元素的display设置为table-cell，vertical-align设置为middle。本文讨论的垂直居中仅支持IE8+
2025-05-17 15:51:32
778
原创 理解CSS边框border
但是，在表格中，若只设置border-style，而不设置border,则边框颜色为黑色，而不与文本颜色相同。若指定该值，则边框图片宽度由该值确定，否则由盒子的边框宽度来确定。4、图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内。三道杠可以使用边框来实现，上面两道杠使用上边框的double样式，下面一道杠使用下边框的solid样式。边框是一条以空格分隔的集合样式，包括边框粗细(边框宽度)、边框颜色和边框样式，且先后顺序无关。
2025-05-17 15:48:03
909
原创 css 盒子模型理解
图中最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。那么，元素框的总宽度 = 元素（element）的width + padding的左边距和右边距的值 + margin的左边距和右边距的值 + border的左右宽度；元素框的总高度 = 元素（element）的height + padding的上下边距的值 + margin的上下边距的值 ＋ border的上下宽度。
2025-05-17 13:16:51
789
原创 CSS行高——line-height
span</style>">">中文English</span>">English中文</span></div></div>
2025-05-17 13:07:49
1175
原创 CSS变形transform(2d)
CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉及的属性主要有transform变形函数和transform-origin变形原点。本文将详细介绍变形transform2d的相关知识。为了更清楚地说明变形的整个过程，本文的DEMO中大量使用了CSS过渡transition。
2025-05-17 12:57:24
705
原创 CSS奇思妙想 -- 使用 CSS 创造艺术
小小总结一下，想要生成不同的图案，其实只需要找到能够生成不同线条，或者造型图案图形，将它们按照不同的大小，不同的旋转角度，不同颜色及透明度叠加在一起即可。只利用单向的 border 会是怎么样的呢？出现的 border 都是solid，如果换成是虚线dashed呢？或许可以再加上也支持一些各式的下划线，我们也可以利用它们试试OK，将上述想法付诸实践，我们就可以得到利用各式线条绘制出来的各式图形。它们可能是这样：Clip-path本文到此结束，希望对你有帮助 :)
2025-05-17 12:52:09
943
原创 CSS 样式书写规范
可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。也希望可以有更多的建议，共同的完善。本规范也可以在我的上看到，欢迎留言或者提 PR。
2025-05-17 12:42:47
977
原创 【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。接下来的行文内容大概会按照这个顺序进行，内容十分基础，可选择性跳到相应内容处阅读。
2025-05-17 12:05:43
1042
原创 【css】我的 css 框架——base.css
* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 *//* 来自yahoo，让标题都自定义，适应多个系统应用 *//* 去掉 table cell 的边距并让其边重合 *//* 内外边距通常让各个浏览器样式的表现位置不同 *//* 对齐是排版最重要的因素，别让什么都居中 *//* 设置显示和隐藏，通常用来与 js 配合 *//* 设置浮动，减少浮动带来的 bug *//* 去掉列表前的标识，li 会继承 *//* 默认不显示下划线，保持页面简洁 *//* 一致的 del 样式 */
2025-05-17 11:59:32
687
原创 引入CSS
关于CSS的优先级先后问题，与外部、内部、行间这三种引入CSS的方式关系不大，主要与重要性、特殊性和出现顺序有关。在重要性相等的情况下，行间样式的优先级最高，外部样式和内部样式无可比性。[注意]<style>标签和<link>标签可以写在<body>标签里面学习1网-专注于高等教育科普综合平台千行代码，Bug何处藏。朝令改，夕断肠。
2025-05-17 11:55:27
889
原创 CSS布局
overflow:visible这个限制只对所谓的块盒（既包含块级盒、自己又是块级盒）存在，有些盒内部也能包含块级元素，但是它本身又不是块级元素（比如display为table-cell、inline-block、或者盒本身是flex item等），因为外面不是BFC，所以它们不论如何一定会给包含的块级盒创建一个新的BFC出来。文本的排布是个很复杂的事情，在dom树中，我们存储的是字符和字符串，而在render tree中，我们要使用一个新的概念：字型（glyph）。重排的时候，行盒会躲开浮动元素。
2025-05-17 11:48:49
991
原创 CSS hack
由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。
2025-05-17 11:42:43
1000
原创 windows server2012下配置hyper-v的网络步骤
今天分享一个绝对可用的hyper-v虚拟机的网络配置方法，亲测可用。千行代码，Bug何处藏。纵使上线又怎样，朝令改，夕断肠。第一步：在hyper-v上配置网络，设置虚拟交换机仅内部。第三步在虚拟网卡上配置，选择ipv4配置。第二步：在主网卡上设置共享网络。
2025-05-16 11:20:19
342
原创 利用宝塔面板进行自动检测针对iis8.5应用池停止启动bat
使用宝塔的计划任务，做了一个自动检测针对ii8.5对于高流量会假死状态，针对每分钟检测，碰到停止的应用池自动启动。千行代码，Bug何处藏。
2025-05-16 11:17:40
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人