为您找到搜索结果：1786个
CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性，这个属性一般不为人知，甚至有些CSS手册中都查询不到。但经常会在一些css样式中看到它出现。Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。zoom版本：IE5.5+专有属性 继承性：无语法：zoom: normal | number 参数：normal: 使用对象的实际尺寸number: 百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值说明：CSS中zoom:1的作用兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决，有如下作用：触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题。比如，使用DIV做一行两列显示，HTML代码：<divclass="h_mainbox"><h2>推荐文章</h2>&l...
css伪类nth-child()怎么用
在CSS3中nth-child()伪类对于在HTML中创建格式化的Excel样式表非常有用。也用于生成网格布局而不必求助于表格。 首先我们来了解一下nth-child()伪类的相关知识。 nth-child()伪类的基本规则： 我们使用的语法是：nth-child（an+b）其中a是频率，b是初始偏移量。这生成了一个从n=0开始的无限级数，但只包含正值。 一些例子可能会使这更清楚： 2n，2n+0 2,4,6,8,10,12...... 2n+1或奇数 1,3,5,7,9,11...... 2n+2 2,4,6,8,10,12...... 2n+3 3,5,7,9,11,12...... 2n+4 4,6,8,10,12,14...... 3n，3n+0或3n+3 3,6,9,12,15,18...... 3n+1 1,4,7,10,13,16...... 因此，你可以看到系列从b开始，然后为每个值增加a。跳过任何零或负的结果意味着我们不能在DOM树中向后看。 nth-child()伪类的示例： 接下来我们通过示例来看看nth-child()...
css中有什么伪类
css伪类有：“:link”、“:visited”、“:hover”、“:active”、“:focus”、“:lang()”、“not()”、“:root”、“:first-child”、“:last-child”、“:empty”等等。CSS伪类是用来添加一些选择器的特殊效果，是用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":...
纯css实现光标打字效果，纯CSS打字动效
效果如下：创建html页面，在body中添加以下html代码：<pclass="load-text">loading...</p>css代码：/*光标动画*/@keyframescaret{50%{border-color:transparent;}}/*文本动画：从宽度为0开始*/@keyframestext{from{width:0;}}.load-text{width:11ch;margin:0auto;overflow:hidden;word-break:keep-all;color:#b1f1f3;border-right:3pxsolid#000000;font:bold400%monospace;animation:caret0.5sstep-endinfinite,text5sinfinitesteps(11);}：css代码中width:11ch和steps(11)中的11根据字符长度设定。...
css中border-radius
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><styletype="text/css">*{margin:0;padding:0;}.one{width:200px;height:100px;border:1pxsolid#000;margin:100pxauto;border-top-left-radius:300px200px;/*/*可以通过border-xxx-xx-radius的方式单独设置某一个角的值border-xxx-xx-radius接收两个参数,第一个表示水平方向,第二个表示垂直方向border-xxx-xx-radius如果只传递了一个参数,那么出自方向和水平方向的值一样*//*水平垂直*/*/}.two{width:400p...
CSS rotate3d()实例讲解
rotation3d()函数是一个内置函数，用于在3D空间中围绕固定轴旋转元素。用法:rotate3d(x,y,z,angle)参数：该函数接受上述和以下所述的四个参数： x:它包含一个表示x坐标的数字。取值范围是0〜1。y:它包含一个表示y坐标的数字。取值范围是0〜1。z:它包含一个表示z坐标的数字。取值范围是0〜1。angle:它保持旋转角度。正角表示顺时针旋转，负角表示逆时针旋转。以下示例说明了CSS中的rotation3d()函数：范例1：<!DOCTYPEhtml><html><head><title>CSSrotate3d()function</title><style>body{text-align:center;}h1{color:green;}.rotate3d_image{transform:rotate3d(1,1,0,60deg);}</style></head><body><h1>GeeksforGeeks</h1>&l...
CSS3 transition过渡属性
<ahref="http://www.51dev.com">www.51dev.com</a><!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background:yellow;transition-property:width1slinear2s;/*Firefox4*/-moz-transition:width1slinear2s;/*SafariandChrome*/-webkit-transition:width1slinear2s;/*Opera*/-o-transition:width1slinear2s;}div:hover{width:200px;}</style></head><body><div></div><p>请把鼠标指针放到黄色的div元素上，来查看过渡效果。</p><p><b>注释：</b>本例...
css list style type属性怎么用
csslist-style-type属性用于设置列表项标记的类型，可以通过不同的属性值设置不同的列表项标记。所有浏览器都支持list-style-type属性。 csslist-style-type属性怎么用？list-style-type属性设置列表项标记的类型。可设置的属性值：● none：无标记。● disc：默认。标记是实心圆。● circle：标记是空心圆。● square：标记是实心方块。● decimal：标记是数字。● decimal-leading-zero：0开头的数字标记。(01,02,03,等。)● lower-roman：小写罗马数字(i,ii,iii,iv,v,等。)● upper-roman：大写罗马数字(I,II,III,IV,V,等。)● lower-alpha：小写英文字母Themarkerislower-alpha(a,b,c,d,e,等。)● upper-alpha：大写英文字母Themarkerisupper-alpha(A,B,C,D,E,等。)● lower-greek：小写希腊字母(alpha,beta,gamma,...
css标准导航代码
1<!--例子解析：-->-->23<!--list-style-type:none-移除列表前小标志。一个导航栏并不需要列表标记-->4<!--移除浏览器的默认设置将边距和填充设置为0-->5<!--上面的例子中的代码是垂直和水平导航栏使用的标准代码。-->6<!DOCTYPEhtml>7<htmllang="en">8<head>9<metacharset="UTF-8">10<title>Document</title>11<style>12ul{13list-style-type:none;14margin:0;15padding:0;16}17</style>18</head>19<body>20<ul>21<li><ahref="D:/aaa">123</a></li>22<li><ahref="D:/aaa">456&...
CSS盒子模型（CSS Box Model）
CSSBoxModel，即CSS盒子模型，是一个比较基础的CSS概念。所谓盒子（Div、Span等等都是盒子），其实就是容器的意思，用来填装别的东西。Content：Thecontentofthebox,wheretextandimagesappear.内容：盒子里填装的东西，比如文本、图片、表单。内容就是内容，不能再填装别的东西了。Padding：Theareaaroundthecontent.填充/内边距：两边贴着内容和边框，是内容和边框的间隔，通常都是空白。Border：Theborderthatgoesaroundthepadding.边框：可粗可细，包裹着内边距和内容。Margin：Theareaaroundtheborder.外边距：边框和更外一层之间的间隔，通常都是空白。盒子的属性有5个：width和height：内容的宽度、高度（注意不是盒子的宽度、高度）。padding：填充。border：边框。margin：外边距。例如： div{width:10px;height:10px;border:10pxsolidyellow;padding:10px;marg...
css怎样设置div边框的属性
border-color:#000设置4边边框颜色为黑色；border-color:+颜色值，即可设置对象边框颜色；border-left-color:#000设置左边框颜色为黑色；border-right-color:#000设置右边框颜色为黑色；border-top-color:#000设置上边框颜色为黑色；border-bottom-color:#000设置下边框颜色为黑色；条件：必须设置对象边框存在，设置边框宽度必须大于或等于1px，边框颜色才会显示并有存在意义。.cssborder{border-style:solid;border-width:1px;border-color:#000} ...
css实现div边框阴影
<styletype="text/css">.div_shadow{width:600px;height:450px;border:#9090901pxsolid;background:#fff;color:#333;-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000')";/*ForIE8*/filter:progid:DXImageTransform.Microsoft.Shadow(Strength=4,Direction=135,Color='#000000');/*ForIE5.5-7*/-moz-box-shadow:2px2px10px#909090;/*forfirefox*/-webkit-box-shadow:2px2px10px#909090;/*forsafariorchrome*/box-shadow:2px2px10px#909090;/*foroperaorie9*/}</style> ...
一段css代码让弹窗在页面中居中
一段css代码让弹窗在页面中居中,在CSS文件中加入就可以了。position:fixed;top:50%;left:50%;transform:translateX(-50%)translateY(-50%);-ms-transform::translateX(-50%)translateY(-50%);-moz-transform::translateX(-50%)translateY(-50%);-webkit-transform::translateX(-50%)translateY(-50%);-o-transform::translateX(-50%)translateY(-50%); ...