-
DIV点击折叠实例代码
所属栏目:[系统] 日期:2020-03-17 热度:51
副标题#e# 废话不多说了,关键代码如下所示: CSS Code复制内容到剪贴板 !doctypehtml html head metacharset=utf-8 metacontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0name=viewport title测试/title styletype=text/cs[详细]
-
CSS3 渐变(Gradients)之CSS3 线性渐变
所属栏目:[系统] 日期:2020-03-16 热度:51
副标题#e# CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因[详细]
-
CSS3 渐变(Gradients)之CSS3 径向渐变
所属栏目:[系统] 日期:2020-03-16 热度:149
副标题#e# 径向渐变由它的中心定义。为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大[详细]
-
CSS中的指定值、初始值和计算值学习教程
所属栏目:[系统] 日期:2020-03-16 热度:167
副标题#e# CSS 中的声明,由 CSS 的特性和值,中间以 : 隔开组成。 我们可以使用 CSS 选择器,为选中的元素设置需要的样式。 在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然[详细]
-
响应式Web之流式网格系统
所属栏目:[系统] 日期:2020-03-16 热度:104
副标题#e# 随着移动端用户的增加,我们希望设计出来的网页能同时使用PC和移动端设备,同一个网页增对不同的设备显示效果也不一样,这时需要用到响应式设计。这里我先介绍一下流式网格系统。如果了解过 Bootstrap和Foundation框架的读者就能发现这两个框架都[详细]
-
CSS3中Transform动画属性用法详解
所属栏目:[系统] 日期:2020-03-16 热度:73
副标题#e# css3在原来的基础上增加了变形和动画相关的属性,动画三兄弟:transform、transition和animation,通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性,各大浏览器支持方面还不是特别好,使用时要特别注意浏览器[详细]
-
CSS制作各种样式的彩虹效果
所属栏目:[系统] 日期:2020-03-16 热度:131
副标题#e# 今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。 自己之前还没怎么遇到过这个问题,正好来研究一下。 CSS Code复制内容到剪贴板 divclass=box1/div divclass=box2/div divclass=box3/div divclass=box4/div css样式一,使用marg[详细]
-
CSS画出一个可爱神奇的多啦A梦
所属栏目:[系统] 日期:2020-03-16 热度:173
副标题#e# 小叮当简单颜色单一,操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦,首先将其分为头部,和身体。然后,再根据身体各部分细节进行进一步的具体刻画。 由于最近一直在学习JavaWeb方面的东西,所以,我的这个小叮当就是用jsp页[详细]
-
CSS制作梦幻彩虹效果
所属栏目:[系统] 日期:2020-03-16 热度:197
副标题#e# 今天看到一篇文章,说到margin的塌陷的问题,并提供了好几个例子。 自己之前还没怎么遇到过这个问题,正好来研究一下。 XML/HTML Code复制内容到剪贴板 divclass=box1/div divclass=box2/div divclass=box3/div divclass=box4/div css样式一,使[详细]
-
CSS3弹性伸缩布局之box布局
所属栏目:[系统] 日期:2020-03-16 热度:131
副标题#e# CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便、完整、响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解了。但是这个布局方式还处于W3C的草案阶段,并[详细]
-
单元格内文本显示超过单元格宽度的快速解决办法
所属栏目:[系统] 日期:2020-03-16 热度:93
开发过程中,表格单元格里的显示数据经常超出单元格的宽度。遇到这种情况一般会这样处理。 1、超出部分显示省略号(...) 解决办法:在css中设置 text-overflow:ellipsis; text-overflow: 2、换行显示 解决办法: 在css中设置 white-space:normal; white-sp[详细]
-
CSS布局基础BFC
所属栏目:[系统] 日期:2020-03-16 热度:152
副标题#e# 第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使用手写罢了。但是它的重要性确是杠杠的,可以这么说,没有它就就没有[详细]
-
CSS特殊性、继承与层叠
所属栏目:[系统] 日期:2020-03-16 热度:129
选择器的特殊性由选择器本身的组件确定;特殊性由四个部分组成,其初始值为0,0,0,0。 1. 对于选择器中的每一个id,加0,1,0,0; 2. 对于选择器中的每一个类、伪类、属性选择,加0,0,1,0; 3. 对于选择器中的每一个元素、伪元素,加0,0,0,1; 4.[详细]
-
Web移动端布局那些事
所属栏目:[系统] 日期:2020-03-16 热度:124
最近做了一个针对微信移动端的项目,在开发中遇到了不少的坑,学到了也不少,发现有许多地方值得写一下,以供做web移动端同学参考参考。 一、单位 说到移动端,不得不提适配问题,大大小小的移动设备不但让做android和ios的难过,因为设备大小和浏览器的差[详细]
-
CSS margin全面了解
所属栏目:[系统] 日期:2020-03-16 热度:112
副标题#e# 一、margin可以为负值 在盒模型中,内容区的width/height、padding、border都不能为负值,但是margin例外,它可以为负值。 关于margin负值的使用技巧,了解不多,日后有机会再补充,此处先贴一个经典应用,margin-left负值结合浮动实现不改变DOM[详细]
-
使用CSS3代码绘制可爱的Hello Kitty猫
所属栏目:[系统] 日期:2020-03-16 热度:139
副标题#e# 感觉这个 Hello Kitty 画的还不错,心血来潮也用 CSS3 画了个 Hello Kitty,现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图: 结构分解 从上图可以看出,Hello Kitty 由脸蛋、耳朵、红色[详细]
-
关于排版中经常见的问题及解决方法(分享)
所属栏目:[系统] 日期:2020-03-16 热度:187
关于排版中经常见的问题及解决方法(分享) CSS Code复制内容到剪贴板 /*去除默认样式*/ -webkit-appearance:none; /*去掉手机上a、input和button点击时的蓝色外边框和灰色半透明背景 解决方案1:*/ a,button,input,optgroup,select,textarea,div{ -webkit-ta[详细]
-
浅谈CSS 权值 层叠 重要性(!important)
所属栏目:[系统] 日期:2020-03-15 热度:185
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: XML/HTML Code复制内容到剪贴板 p{color:red;} .first{color:green;} pclass=first三年级时,我还是一个span胆小如鼠/span的小女孩。/p p和.firs[详细]
-
CSS兼容问题之HACK技术
所属栏目:[系统] 日期:2020-03-15 热度:158
CSS Hack原理是通过不同浏览器自身所带有的特别标识符以及CSS中优先级的机制来实现不同浏览器里CSS样式兼容性的问题。 针对不同的浏览器写不同的CSS的过程,这就叫CSS hack,也叫写CSS hack,相信您会对一些比较不易解决的兼容问题有一定的兴趣。 注意点:[详细]
-
浅谈css之属性及剩余的选择符
所属栏目:[系统] 日期:2020-03-15 热度:179
副标题#e# 今天的课程加速了,比平时快了些,但觉得很不错。nice~ 属性选择符 E[att] 选择具有att属性的E元素。 XML/HTML Code复制内容到剪贴板 input[type]{color:#red;}inputtype=radio E[att=val] 选择具有att属性且属性值等于val的E元素。 XML/HTML Cod[详细]
-
必须掌握10个非常不错的CSS技巧
所属栏目:[系统] 日期:2020-03-15 热度:171
在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观。我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷。 设计模版和博客主题时,我经常不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性[详细]
-
10个非常实用的CSS hack技术
所属栏目:[系统] 日期:2020-03-15 热度:152
副标题#e# 好吧,既然你看了这篇文章,那么我猜你了解CSS并且知道它能为你做什么。但是一些很有用的技术对很多开发人员来说仍然比较隐秘,所以本文中,让我们看看10个肯定能提高你设计的CSS技术吧 1 跨浏览器的inline-block CSS Code复制内容到剪贴板 style[详细]
-
20个非常实用的CSS技巧
所属栏目:[系统] 日期:2020-03-15 热度:96
副标题#e# 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? CSS Code复制内容到剪贴板 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(1[详细]
-
CSS3解决移动页面上点击链接触发色块的问题
所属栏目:[系统] 日期:2020-03-15 热度:115
副标题#e# 前段时间做微信页面的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观。需求针对这种情况来问我,能否把这个一闪的颜色去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很[详细]
-
深入解读CSS3中transform变换模型的渲染
所属栏目:[系统] 日期:2020-03-15 热度:183
副标题#e# transform是通过一系列矩阵变换完成的,scale等transform-function都是对matrix的封装。 w3里的解释是,transform基于可视化格式模型(visual formatting model,这样翻译对不对啊)并为其绘制出一个坐标系,而且所有在这个坐标系内进行的操作,[详细]