默认页面标题 - 菜鸟图库

最新发布

首行空格、首行缩进效果的实现

2022-01-31

首行空格、首行缩进效果的实现<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>首行空格_首行缩进</title> <style type="text/css"> P {text-indent: 2em;} </style> </head> <body> <p>加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。</p> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 4 次浏览

挺实用的伪类_CSS定义首行第一个字体突出效果

2022-01-31

挺实用的伪类_CSS定义首行第一个字体突出效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>伪类_CSS定义_首行字体比较大_第一个字体比较的</title> <style type="text/css"> body { font:1em/150% Verdana, Arial, Helvetica, sans-serif;} #wrapper { width:200px; padding:0.8em; border:#ccc solid 1px;} .letter:first-letter { font-size:1.5em; font-family:"华文行楷"; color:#fc0;} p.line:first-line { font-weight:bold; color:#ff0000;} </style> </head> <body> <div id="wrapper"> <p class="letter">此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。</p> <p class="line">此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。</p> <div class="letter">此外CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。</div> </div> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 3 次浏览

网页中实用的放大效果

2022-01-31

网页中实用的放大效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>a</title> <style type="text/css"> ul#hovershow2{ list-style-type: none; margin: 50px; width:200px; float: left; display: inline; clear: both; } ul#hovershow2 li{ float: left; display: inline; width:20px; height: 20px; margin: 2px; } ul#hovershow2 li a { text-decoration: none; display: block; width:20px; height:20px; border:1px red solid; background-color: White; line-height: 20px; font-size: 12px; text-align: center; } ul#hovershow2 li a:hover{ position: absolute; width:40px; height: 40px; line-height: 40px; font-size: 32px; z-index:100; margin: -10px 0 0 -10px; } ul#hovershow2 li:hover + li a{ position: absolute; width:30px; height: 30px; line-height: 30px; font-size: 24px; z-index:99; margin: -5px 0 0 -5px; } </style> </head> <body> <ul id="hovershow2"> <li><a href="1#" title="test"><span>1</span></a></li> <li><a href="2#" title="test"><span>2</span></a></li> <li><a href="3#" title="test"><span>3</span></a></li> <li><a href="4#" title="test"><span>4</span></a></li> <li><a href="5#" title="test"><span>5</span></a></li> <li><a href="6#" title="test"><span>6</span></a></li> <li><a href="7#" title="test"><span>7</span></a></li> </ul> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 9 次浏览

CSS Hack 汇总(学习css不能不看哦)

2022-01-31

仅IE7与IE5.0可以识别仅IE7可以识别 IE6及IE6以下识别仅IE6不识别，屏蔽IE6 仅IE6与IE5不识别，屏蔽IE6与IE5不屏蔽IE5.5仅IE5不识别，屏蔽IE5 盒模型解决方法清除浮动截字省略号只有Opera识别

共 4 次浏览

非常不错的CSS页码效果

2022-01-31

非常不错的CSS页码效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>代码基地博客站</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="CSS页码链接" /> <meta name="Description" content="CSS制作的页码链接效果" /> <meta name="Author" content="jxdawei,jxdawei@gmail.com" /> <style type="text/css"> body{ font-size:62.5%; } h1{ font-size:1.4em; } h2{ clear:both; font-size:1.2em; } #pageClass{ clear:both; font-size:1.2em; } #pageClass ul{ list-style:none; } #pageClass li{ float:left; width:20px; height:20px; line-height:20px; border:1px solid silver; margin:0 3px; } #pageClass a{ display:block; text-align:center; } #pageClass a:link,#pageClass a:visited{ background:white; text-decoration: none; color:gray; } #pageClass a:hover,#pageClass a:active{ text-decoration: none; background:gray; color:white; } /*第二个效果*/ #pageClass2{ clear:both; font-size:1.2em; } #pageClass2 ul{ list-style:none; } #pageClass2 li{ float:left; width:20px; height:20px; border:1px solid silver; margin:0 3px; } #pageClass2 a{ display:block; text-align:center; } #pageClass2 a:link,#pageClass2 a:visited{ background:white; text-decoration: none; color:gray; } #pageClass2 a:hover,#pageClass2 a:active{ text-decoration: none; background:gray; color:white; line-height:14px; } /*第三个效果*/ #pageClass3{ clear:both; font-size:1.2em; } #pageClass3 ul{ list-style:none; } #pageClass3 li{ float:left; width:20px; height:20px; border:1px solid silver; background:#f60; margin:0 3px; } #pageClass3 a{ display:block; text-align:center; line-height:16px; } #pageClass3 a:link,#pageClass3 a:visited{ background:white; text-decoration: none; color:gray; } #pageClass3 a:hover,#pageClass3 a:active{ text-decoration: none; background:#f93; color:white; line-height:16px; } </style> </head> <body> <h1>页码效果</h1> <h2>这是我原本想要去做的效果</h2> <div id="pageClass"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> <h2>做完之后成这样了</h2> <div id="pageClass2"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> <h2>改了改成这样了</h2> <div id="pageClass3"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> </body> </HTML> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 17 次浏览

符合web标准的下拉菜单

2022-01-31

符合web标准的下拉菜单<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css菜单演示</title> <style type="text/css"> *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 80px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 80px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; left: -999em; width: 180px; position: absolute; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 180px;width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; background:#C00; } #nav li:hover ul { left: auto; } #nav li.sfhover ul { left: auto; } #content { clear: left; } </style> <script type=text/javascript> function menuFix() { var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), ""); } } } window.onload=menuFix; </script> </head> <body> <ul id="nav"> <li><a href="#">产品介绍</a> <ul> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> <li><a href="#">产品一</a></li> </ul> </li> <li><a href="#">服务介绍</a> <ul> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二</a></li> <li><a href="#">服务二服务二</a></li> <li><a href="#">服务二服务二服务二</a></li> <li><a href="#">服务二</a></li> </ul> </li> <li><a href="#">成功案例</a> <ul> <li><a href="#">案例三</a></li> <li><a href="#">案例</a></li> <li><a href="#">案例三案例三</a></li> <li><a href="#">案例三案例三案例三</a></li> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四</a></li> <li><a href="#">我们四111</a></li> </ul> </li> <li><a href="#">在线演示</a> <ul> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示</a></li> <li><a href="#">演示演示演示</a></li> <li><a href="#">演示演示演示演示演示</a></li> </ul> </li> <li><a href="#">联系我们</a> <ul> <li><a href="#">联系联系联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系</a></li> <li><a href="#">联系联系联系</a></li> <li><a href="#">联系联系联系</a></li> </ul> </li> </ul> </body> </html> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 6 次浏览

网站风格切换效果的实现

2022-01-31

//Style Sheet Switcher version 1.0 Nov 9th, 2005//Author: Dynamic Drive: http://www.dynamicdrive.com//Usage terms: http://www.dynamicdrive.com/notice.htmfunction getCookie(Name) { var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pairif (document.cookie.match(re)) //if cookie foundreturn document.cookie.match(re)[0].split("=")[1] //return its valuereturn null}function setCookie(name, value, days) {var expireDate = new Date()//set "expstring" to either future or past date, to set or delete cookie, respectivelyvar expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";}function deleteCookie(name){setCookie(name, "moot")}function setStylesheet(title) {var i, cacheobjfor(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {cacheobj.disabled = trueif(cacheobj.getAttribute("title") == title)cacheobj.disabled = false //enable chosen style sheet}}}function chooseStyle(styletitle, days){if (document.getElementById){setStylesheet(styletitle)setCookie("mysheet", styletitle, days)}}function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu var iif (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menuvar element=(element.type=="select-one") ? element.options : elementfor (i=0; i<element.length; i++){if (element[i].value==selectedtitle){ //if match found between form element value and cookie valueif (element[i].tagName=="OPTION") //if this is a select menuelement[i].selected=trueelse //else if it"s a radio buttonelement[i].checked=truebreak}}}}var selectedtitle=getCookie("mysheet")if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one storedsetStylesheet(selectedtitle)function externalLinks() { if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") anchor.target = "_blank"; } } window.onload = externalLinks;");

共 10 次浏览

文字应用css滤镜集锦

2022-01-31

文字应用css滤镜集锦<style>     .abc { line-height: 22px} .t12 { font-family:华文行楷; font-size: 15px; font-weight: lighter; color: ##C3C1C1; Filter: dropshadow(color=#ffffff,offx=1,offy=1); TEXT-ALIGN: center; TEXT-DECORATION: none } </style> <BODY BGCOLOR=#C3C1C1 style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"> <TABLE WIDTH=760 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0> <TR> <TD COLSPAN=10 class="t12"> <div align="center">　|　<a href="dns.asp">懒的逍遥</a>　|　<a href="vis.asp">心有灵犀</a>　|　<a href="FreeEmail.asp">爱在东海</a>　|　<a href="CorEmail.asp">无忧制造</a>　|　<a href="moneylist.asp">我佛山人</a>　|　<a href="WebDesign.asp">萧萧小雨</a>　|　<a href="ad.asp">紫色真情 </a>　|　<br> </div></TD> <TD> </TD> </TR> </table> <br><br><center> <TABLE><TR><TD style="FILTER: glow(color:#308148,strength=5);color: #ffffff;font-size:18px;font-family:隶书"> PI}不是走多h，而是，你是否具有足远ǖ囊庵竞托拍碜哌@l路，o他有多h。</TD></TR></TABLE> <br><br> <center><span style="color:#09ff11;font: italic 900 16pt 隶书;width: 220;filter: shadow(color=red,direction=135);">自己动手丰衣足食</span> <br><br><br> <table bgcolor=#aaaaaa style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=green,endColorStr=white);"><tr><td style="filter:dropshadow(offX=1,offY=1,color=#000000);color:#ffffff;font-size:18px;font-family:华文行楷">雅语独喃<b><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></b></td></tr></table> <br><br><br><br> <style type="text/css">.3dfont { FILTER: glow(color=lime,strength=0) shadow(color=lime,direction:135); WIDTH: 678;font-family:隶书;font-size:16px; } </style> <center> <table border="0" width="569"><tr><td width="100%" class="3dfont"><font color="#008040">身高不过1米68，腰圆腿粗像西瓜，头大嘴小鼻梁趴，一张大嘴缺门牙！</font></td></tr></table> <br> <table width="400" border="1" cellspacing="0" cellpadding="0" align="center" bordercolor="#999999" bgcolor="#D1D2A4"> <tr> <td style="padding:15px;letter-spacing:3px; COLOR: #6b6c35; FILTER: dropshadow(color=#ffffcc,offx=1,offy=1);" >北国风光，千里冰封，万里雪飘。望长城内外，惟馀莽莽；大河上下，顿失滔滔。山舞银蛇，原驰蜡象，欲与天公试比高。须晴日，看红妆素裹，分外妖娆。</td> </tr> </table> <br> <table width="312" height="123" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#ffdf03"><div style="filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, color=black);color:orange;width:100%;font-family:华文新魏;font-size:17px;"><center>织梦好，蚂蚁好；蚂蚁好，织梦更好</div></td> </tr> </table> <br> <center>  <SPAN style="FILTER: Chroma(Color=green) glow(color:6655ff,strength=3);height:1"> <input type=button value="按耐不住的冲动" onClick=window.open("http://dob.tnc.edu.tw/index.php","_blank") style="background-color:green;border:1px solid white;font-size:12px;color:white;height:22;"> </SPAN>  <br><br><br> <table width="234" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="filter:blur(add=1,direction=135,strength=7)"> <tr> <th scope="row" style="font-family:华文行楷;font-size:18px;color:red;">我想让里面的字正常显示</th> </tr> </table> <br><br> <table> <tr> <td width="510"> <div style="height:1;width:100%; font-family:impact;font-size:14pt;color:deeppink;display:block; filter:progid:DXImageTransform.Microsoft.wave(Strength=3)"> <p align="center">看小蜜的身材怎么样?您是否已爱上了她! </div></td> </tr> <tr> </table> <table> <tr> <td width="510"> <div style="filter:progid:DXImageTransform.Microsoft.engrave(bias=0.5); height:1;font-size:20pt;font-family:impact;background-color:blue"> <p align="center"> I just couldn"t help it.</div></td> </tr> <tr> <td width="510"> <div style="filter:progid:DXImageTransform.Microsoft.emboss(bias=0.5); height:1;font-family:impact;font-size:20pt;background-color:blue"> <p align="center">We"d better be off.</div></td> </tr> <tr> </table> <br><br> <table> <tr> <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=blue,direction=135,strength=6)" align="center"><font color="blue" size="7" face="华文新魏">文章版权归我站和作者共有</font></td> </tr> <tr> <td style="FILTER: glow(color=#bb0909,strength=2) shadow(color=#22BB09,direction=135)" align="center"><font color=#E1E4EC size=6 face="华文新魏"><b>让自己不至于在等待回贴的过程中血气上涌</b></font></td> </tr> <tr> <td style="FILTER: glow(color=yellow,strength=4) mask(color=green) chroma(color=#B4BBCF)" align="center" height=54><font color=#fa2233 size=6 face="华文彩云"><b>一个神奇的测试，更能加深彼此的感情 </b></font></td> </tr> </table> <br><br> <style type="text/css"> .a1 { font-size: 32px; font-family: "华文行楷"; color: red; filter: dropshadow(color=#fa00fd,offX=1,offY=1,positives=true); height: 20px; } </style> <center> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"><div class="a1">看书看棋看美人赏花赏月赏秋香</div></td> </tr> </table> <br><br> <div style="font-family:Courier">+ +++ + + +++++ + + +++ + + +++++ +++ ++++ +++++ + + +++++ ++++ <br>+ + + + + + + + + + + + + + + + + + + + + + + <br>+ + + + + + + + + + + + + + + + + + + + + + + <br>+ + + + + ++++ + + + + + ++++ + + ++++ ++++ + + ++++ ++++ <br>+ + + + + + + + + + + + + + + + + + + + + + <br>+ + + + + + + + + + + + + + + + + + + + + + <br>+++++ +++ + +++++ + +++ +++ + +++ + + +++++ + +++++ + + <br></div> <br> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

共 5 次浏览

关于text-indent 隐藏文字出现虚线框outline的问题

2022-01-31

链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。　　因为平时是用overflow:hidden; 属性的，所以一直也没有注意到这个问题的存在，但当你需要使用 JS 来实现某种交互时，强烈建议不要使用 overflow:hidden; 属性，因为会给你带来很多意想不到的麻烦。　　虚线框，其实就是 CSS 中的 outline 属性，这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致：IE 认为虚线框就是border的边缘，而 Firefox 则认为虚线框应该是文字范围。　　那 W3C 中是如何定义 outline 的呢？

共 7 次浏览

CSS模块化设计从空格谈起

2022-01-31

引子：今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》，思考了一下，本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》，但是内容太大，还是来点简单的实惠。所以改叫《CSS样式――从空格谈起》吧。一、空格运算符（1）CSS语言简单地说，CSS语言类似JS语言，是通过客户端下载后，通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言，离JS这种基于对象的比较完善的“弱类型”语言，还差相当一段距离。要知道CSS样式是定义出来的，而样式的呈现是根据文档流顺序和CSS优先级别，浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能（尤以IE为甚），所以样式定义的语法有错误，并不影响浏览器正常工作，只不过显示不出应有的效果罢了。在我们设计定义样式的时候，排错是比较令人苦恼的，其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的，所以我们就更应该注重CSS定义的严禁，才能出较少的错误，较快更好的完成工作（2）CSS的运算符首先说，CSS语言的运算符就不多，有.#{}:";还有一个非常重要的空格。这几个运算符，都是常用的定义声明符号。而在CSS样式定义中，空格就有点特殊，我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说，我们可以把空格视为路径指向的箭头，表明HTML标签的父子级别关系。CSS是与HTML想关联的，也就是说，CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应，而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”；一个HTML标签也可以“复合调用”多个样式类。所以说，CSS样式定义的复杂性与关联的HTML是密不可分。（3）实例说明 <style type="text/css">td .b { color:#00ff00; }th.b { color:#ff0000; font-family:黑体; font-size:20px;}.b { color:#0000ff; font-size:12px;}</style><table> <tr> <td><div class="b">第一个类b的类路径是th .b</div></td> <th class="b">第二个类b的类路径是th.b</td> <td class="b">第三个类b的类路径是 .b</th> </tr></table><div class="b">第三个类b的类路径是 .b</div>

共 10 次浏览

共计26043条记录上一页 1.. 845 846 847 848 849 850 851 ..2605 下一页

推荐阅读

用AI 10.0 绘制一部车(1)

PS打造质感立体文字

Photoshop制作简单的发光纹理字

明暗对照法到底是什么意思

最新发布

首行空格、首行缩进效果的实现

挺实用的伪类_CSS定义首行第一个字体突出效果

网页中实用的放大效果

CSS Hack 汇总(学习css不能不看哦)

非常不错的CSS页码效果

符合web标准的下拉菜单

网站风格切换效果的实现

文字应用css滤镜集锦

关于text-indent 隐藏文字出现虚线框outline的问题

CSS模块化设计从空格谈起