
前端-Css
OkidoGreen
这个作者很懒,什么都没留下…
展开
-
纯css 实现 三角形、梯形等 效果
http://www.cnblogs.com/linsinan/p/6928734.htmlhttps://www.cnblogs.com/wcf52web/p/5608272.html 今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形、梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思路,...转载 2019-01-10 20:05:31 · 1621 阅读 · 0 评论 -
深入理解CSS3 Animation 帧动画 steps
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术。最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动画steps属性的理解我们知道CSS3的Animation有八个属性animation-nameanimation-durationanimation-delayanimatio转载 2016-11-18 10:58:56 · 2109 阅读 · 0 评论 -
clearfix清除浮动闭合容器之:after与:before
首先对伪类:before与:after做下注脚:before 伪元素在元素之前添加内容。:after 伪元素在元素之后添加内容。这2个伪元素允许创作人员在元素内容的 最前面/最后面 插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。该二伪类不被IE6/7所支持。好了,进入正题在平常我们coding时候经常会发生子元素浮转载 2014-07-14 12:31:11 · 4190 阅读 · 0 评论 -
外层DIV 包含内层DIV 样式问题
.clearfix {display: block;float: none;clear: both;overflow: hidden;width: auto;height: 0;margin: 0 auto;padding: 0;font-size: 0;line-height: 0; dasdsadsaddsadsa关键原创 2014-05-29 16:11:54 · 7579 阅读 · 0 评论 -
inline、block、inline-block的区别
我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象,block是声明块对象,那么inline-block是什么意思,即内联又成块?接下来做个测试,让我们了解一下三者的区别和作用吧:1234567891011转载 2014-04-17 14:47:11 · 1731 阅读 · 0 评论 -
关于CSS中的float和position
原文 http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更复杂的排版要求,可以考略使用其他方法,转载 2014-04-10 06:45:28 · 1358 阅读 · 0 评论 -
float 浮动 div 不随浏览器分辨率 大小而位置发生变化
dsadsadsa111111111111111111在浮动层外部 增加 父DIV 设定宽度jik原创 2014-04-10 06:41:09 · 10168 阅读 · 0 评论 -
css text-overflow 超过宽度显示省略号
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。通常的做法是这样的:1.overflow:hidden;2.text-overflow:ellipsis;3.-o-text-ove转载 2014-04-10 06:10:29 · 1667 阅读 · 0 评论 -
图片、多行文字的水平垂直居中
本文综述想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持im转载 2014-03-04 15:34:53 · 3349 阅读 · 0 评论 -
CSS 实现图片灰度效果 兼容各种浏览器
CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果。方式1. IE滤镜img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法img { filter:Gray; } //简写转载 2014-03-03 07:13:51 · 4708 阅读 · 0 评论 -
css line-height记录
使用line-height 后 文字就会从line-height中间像素开始显示。这样就可以用于文字垂直居中了。 例如 height:40px,line-height:40px,那么文件就会居中了;这里文字就会垂直从 20px开始显示转载 2014-02-13 17:38:46 · 1202 阅读 · 0 评论 -
如何给自己的网站添加小图标
网站小图标就像LOGO一样可以为你的网站增色不少!这个小图标是显示在浏览器地址栏以及收藏夹里,现在无论是从制作、上传到最后的显示都十分简单。但是,可能还有一些网友不知道这个究竟是怎么搞出来的!尤其对于wordpress网站,似乎通用的做法并不能让这个美丽的小图标“显身”!先来简单地了解一下这个小图标吧。其实,它就是我们常见的favicon.ico。favicon就是英文favourit转载 2014-02-13 09:54:26 · 12329 阅读 · 0 评论 -
CSS :after 伪元素
CSS :after 伪元素定义和用法:after 伪元素在元素之后添加内容。这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。实例此样式会在每个 h1 元素之后播放一段声音:h1:after { content:url(beep.wav); } h1:after {cont转载 2014-02-08 10:00:22 · 2593 阅读 · 0 评论 -
解决内部容器float浮动后不能撑开外部容器及CSS伪类:after的使用
解决内部容器float浮动后不能撑开外部容器,外部容器塌陷问题方法一:直接在内部添加一个空的容器可以撑开外部容器。方法二:.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}*html .转载 2014-02-08 09:56:26 · 2603 阅读 · 0 评论 -
CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动、清除margin的重叠等。 Zoom的使用方法: zoom : normal | number normal : 默认值。使用对象的实际尺寸 number : 百分数 | 无符号浮转载 2014-02-08 09:55:30 · 2146 阅读 · 0 评论 -
css div自适应高度height
DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决。第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度;第二种:没有最小高度,DIV完全自适应高度。以下为大家介绍这两种情况与解决方法一、一定最小高度,内容加多时自适应高度,而内容少时DIV有一定最小高度 - TOP有一DIV盒子,默认高度为200px,当DIV里内容多余并超出转载 2014-02-08 09:46:04 · 8701 阅读 · 0 评论 -
网页布局,关于外层div不能随内层div自动伸缩的问题
之前经常是这样布局的,用一个div(id=Main)包住左边div(id=DivLeft)和右边div(id=DivRight),Main随着DivLeft和DivRight内容的高度而自动伸缩,从而达到动态布局的效果。#Main{ width:980px height:auto; margin转载 2014-02-08 09:41:43 · 2551 阅读 · 0 评论 -
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上;转载 2013-11-17 08:42:08 · 1730 阅读 · 0 评论 -
设置img属性 图片显示灰度图
.highlightit img{filter:gray;-webkit-filter: grayscale(0.5);gray:1;}.highlightit img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 1;opacity:0.5;}HTML代码www.8651原创 2013-11-14 18:00:46 · 5446 阅读 · 0 评论 -
textarea显示问题 (保留换行空格等 格式) 解决方案
pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera原创 2013-08-23 16:22:22 · 12723 阅读 · 2 评论 -
用clearfix:after消除(DIV块因内部浮动而高度收缩的问题)
在写HTML代码的时候,创造在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:TEST DIVCSSBBSTEST DIVTEST DIVTEST DIV运行这段代码,大家可以看到,作为外部容器的边框为红色的DIV,没有被撑开。这是因转载 2013-02-05 20:07:15 · 4038 阅读 · 0 评论 -
js 去除字符串前后空格,及处理textarea存入数据库的转换
当通过插数据进数据的库,取出来后都变成一行变成,用这个标签能原样输入插入时的格式。 当时要对加一些CSS样式才行啦。以下为引用的内容: pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */原创 2013-01-10 09:49:55 · 4990 阅读 · 0 评论 -
IE7 中 div 背景透明的问题
111111111111111111111这种情况下是不透明的;但111111111111111111111或者111111111111111111111IE7 下就是透明的:按照结果来看,只要设置了宽度,IE7 下的 opacity就起作用了,不知道为什么,所以一些大型网站的透明效果还都是用 透明PNG 图片来实现吧。原创 2012-11-27 11:09:19 · 7576 阅读 · 0 评论 -
使用CSS border-collapse样式 合并表格边框
separate默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。collapse如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。inherit规定应该从父元素继承 border-collapse 属性的值。原创 2012-10-23 08:58:40 · 6295 阅读 · 0 评论 -
CSS中position属性的说明
relative相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。relative相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。child 1ch原创 2012-10-22 14:54:01 · 1227 阅读 · 0 评论 -
设置透明的CSS属性
兼容: 值为0-1 或者 0-100 值越大,透明效果越小。filter: alpha(opacity = 80);-moz-opacity: 0.80;opacity: 0.80;原创 2012-10-22 09:47:25 · 1373 阅读 · 0 评论 -
CSS中样式 display 属性 inline,block及inline-block
div 元素默认display属性为block 为块状元素,无论div中文字字数,总以块状显示,即占满浏览器宽度。测试测试sss而span元素默认display属性为inline,只占据span中所占字数的宽度。测试测试测试测试inline-blocksfffssfffsinli原创 2012-10-22 09:32:58 · 14928 阅读 · 0 评论