随笔分类 - CSS技巧
包括元素居中，文本对齐，清除浮动等等
摘要：先来看看静态效果图： 要做的效果是鼠标移到图片上时，图片旋转360度并放大1.2倍 鼠标移动到下方框时，四周有四条线分别沿着四条框进入，同时箭头向左移动 主要使用的CSS3属性是transition，transform transition用于定义过渡动画，比如：transition:all 1s;
阅读全文
摘要：参数是scroll时候，必会出现滚动条。 参数是auto时候，子元素内容大于父元素时出现滚动条。参数是visible时候，溢出的内容出现在父元素之外。参数是hidden时候，溢出隐藏。
阅读全文
摘要：主流浏览器内核私有属性css前缀： mozilla内核 (firefox,flock等) -moz webkit内核(safari,chrome等) -webkit opera内核(opera浏览器) -o trident内核(ie浏览器) -ms
阅读全文
摘要：这种做法是为了清除浏览器中默认的body的内外边距 1. 每种浏览器都有一套默认的样式表，在网页制作过程，没有指定相应的样式时，就会按照浏览器内置的样式表来渲染。 2. 举例说，IE6、IE7的body标签，默认的样式应该是：display:block;margin:15px 10px;zoom:1
阅读全文
摘要：一般来说，在页面中需要进行水平居中的元素，大致分为两种，一种是块级元素，即display:block，一种是行内元素display:inline-block; 块级元素包括div，ul，p,以及所有的h类标签。行内元素又叫内联元素，a，img，input是最常见的。这些行内元素，可以通过displa
阅读全文
摘要：background-attachment的作用是设置背景图片是随滚动轴如何滚动的css属性 background-attachment有四个可选值：fixed，scroll，local，inherit（就是单纯地继承父元素的属性） 其中scroll和local属性的作用相类似，当设置backgro
阅读全文
摘要：要给列表项标记修改样式的话，list-style-image以及list-style-type是很好选择，前者可以使用自己定义的图像，后者可以选择圆形，矩形之类的矢量图形。但是由于不同浏览器的实现不同，这些样式可能会出现一些小的偏差，比如说，可能火狐浏览器和谷歌浏览器之间，这个标记的位置就会差那么一
阅读全文
摘要：一、圣杯设计思路： DOM结构： <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> 思路： 1.将div.co
阅读全文
摘要：何为滚动视差 视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。但是使用background-atta
阅读全文
摘要：text-stroke属性用于给文字进行描边，它其实和background属性等复合属性类似，有多个属性合并成的写法，只不过text-stroke只有两个属性合并：text-stroke-width和text-stroke-color.就是描边的颜色和宽度，在text-stroke中，颜色是默认为文
阅读全文
摘要：伪类与伪元素的出现是为了描述一些现有CSS无法描述的东西，比如“段落的第一行”、“文章首字母” 伪类：用于操作一些已经在文档树中存在的元素 伪元素：用于创建一些不在文档树中的元素 常见的伪类： （1）表示状态： :link 选择未访问的链接, :visited 选择已访问的链接, :hover 选择
阅读全文
摘要：属性选择器使我们根据属性或属性的值来选择元素 如果要把包含某个属性(如title)的元素全部选择： eg：*[title]{} 如果要选择包含某个属性的特定元素： eg：a[href]{} 可以同时选中多个属性： eg：a[title][href]{} 根据具体属性值来进行选择： eg:a[href
阅读全文
摘要：伪类选择器有七个： 针对链接样式的伪类——锚伪类： a:link{}//未访问的链接 a:visited{}//已访问的链接 a:hover{}//被覆盖的链接 a:actived{}//被激活的链接 注意的是：上述的书写顺序必须是有要求的，除了上面的link和visited之间的位置可以互换外，h
阅读全文
摘要：text-align：规定行内内容如何相对它的块父元素对齐。而且它并不控制块元素自己的对齐，只控制它的行内内容的对齐。要控制文本两端对齐直接写text-align：justify就可以 了，但是对于多行文本，除了最后一行之外都可以实现两端对齐，最后一行依旧左对齐，这是因为text-align不会对文
阅读全文
摘要：以上代码让div元素垂直移动 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 语法：@keyframes animationname {keyframes-selector {css-styl
阅读全文
摘要：在利用css进行排版时，免不了要对文字的字体进行设置，但是字体的类型使用是否成功往往取决于用户电脑中是否有安装相对应的文字，如果没有，就只能使用浏览器默认的字体，这样就和我们想要达到的效果相悖。又或者，字体类型名称过长，我们也会有想要为他自定义名称的想法，这时候@font-face就派上了大用场：
阅读全文
posted @ 2017-05-17 15:58
某个润滑君
摘要：在css中，常常会需要利用省略号来表示文本的溢出，这时候单行省略和多行省略的代码又有所不同： 单行省略： 多行省略：
阅读全文
posted @ 2017-05-16 22:03
某个润滑君
摘要：关于复选框的样式，有一点是比较坑爹的，就是系统默认该样式无法被修改，我们能做的就是把原有的复选框给隐藏掉,再进行修改label样式，因为label能够关联我们的复选框，同时把我们想要的效果呈现出来。 Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以
阅读全文
posted @ 2017-03-15 20:13
某个润滑君
摘要：在网页中，我们经常看到各种图形效果。一般在这种情况下我们都会通过图片来实现，但是每一次都是使用图片的话，将会导致数据传输量过大，并且一张图片会引发一次HTTP请求，这两个方面都会影响页面加载速度。如果利用css样式来实现图片效果，就能极大地减少网页加载时间。 一、三角形： 当我们为每一条边框定义不同
阅读全文
posted @ 2017-02-23 20:56
某个润滑君
摘要：我们在使用表格的时候，会看到表格中的单元格一般具有怎么样的特点呢？文字的垂直居中对齐，关联伸缩等等，这些都是表格单元格具有的特点。而display:table-cell可以让元素具有这些特点！ 这个属性可以使得我们在布局时候实现下面三个功能： （1）图片垂直居中于元素（在其他随笔中有记录，略） （2
阅读全文
浙公网安备 33010602011771号