CSSµÄÖÖÀà:Àà/±êÇ©Ñùʽ/IDÑ¡Ôñ·û/αÀà
CSSÑùʽµÄÖÖÀࣺ
1 £®HTML ±ê¼Ç·û£ºÓÃÓÚ¶¨ÒåHTML µÄTAGS Ñùʽ£¬ÀýÈç bodyp img µÈ¡£
ÀýStyle.cssÖж¨ÒåµÄbody\h1\p\img µÈ Àýstyle.css
2 £®ÀàÑ¡ÔñÆ÷£ºÒÔ . ¿ªÍ·£¬Ñùʽһµ©¶¨Ò壬¿É¾ÍÓÃÓÚÈκÎHTML ÔªËØ ¡£
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Trans
CSSÑùʽµÄÖÖÀࣺ
1
£®HTML
±ê¼Ç·û£ºÓÃÓÚ¶¨ÒåHTML
µÄTAGS
Ñùʽ£¬ÀýÈç body p
img
µÈ¡£
ÀýStyle.cssÖж¨ÒåµÄbody\h1\p\img µÈ
Àýstyle.css
2
£®ÀàÑ¡ÔñÆ÷£ºÒÔ .
¿ªÍ·£¬Ñùʽһµ©¶¨Ò壬¿É¾ÍÓÃÓÚÈκÎHTML
ÔªËØ
¡£
<!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>
<mce:style type="text/css"><!--
.content {
background-color: #CCCCCC;
height: 300px;
width: 500px;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
border: 1px solid #000000;
}
--></mce:style><style type="text/css" mce_bogus="1">.content {
background-color: #CCCCCC;
height: 300px;
width: 500px;
font-size: 14px;
line-height: 20px;
letter-spacing: 1px;
border: 1px solid #000000;
}</style>
</head>
<body>
<p class="content">ÕâÊÇÒ»¸öÀàÑ¡ÔñÆ÷µÄʾÀý¡£</p>
</body>
</html>
3
£®ID
Ñ¡ÔñÆ÷£ºÒÔ“#
”¿ªÍ·£¬Ñùʽһµ©¶¨Ò壬ֻ¶ÔÏàͬID
µÄHTML
ÔªËØÓÐЧ£¬ÇÒÔÚͬһ¸öÍøÒ³ÖУ¬Ö»ÄÜÓÃÒ»´Î£¬ÔÚµ÷ÓöÔÏó»òʹÓýű¾ÓïÑÔʱʹÓá£
<!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; char
Ïà¹ØÎĵµ£º
visibility: hidden, visible
display: block, inline, none
visibility: ¿ØÖÆÒ³ÃæÔªËصÄÏÔʾºÍÒþ²Ø£¬²»¿ÕÖµÔªËØµÄλÖÃÌØÕ÷¡£
document.getElementById("div").style.visibility = "hidden"; //Òþ²ØÔªËØ
document.getElementById("div").style.visibility = "visible"; //ÏÔÊ¾ÔªËØ
µ±ÔªËØÔÚÒ³ÃæÊÇÒþ²ØÊ±£¬ ......
1. CSSµÄÒªµãÊÇÔÚÄãµÄÒ³ÃæÖÐʹÓüò½àµÄHTML´úÂë,È»ºó±àдCSS"¿ØÖƹæÔò"À´Ñùʽ»¯Ò³ÃæÖеĶÔÏó.Ò³Ãæ±£³ÖÇåÎúÓÐÌõ²»ÎÉ¿´ÉÏÈ¥·Ç³£°ô.ÕâÑùÄãµÄHtmlÒ³Ãæ¿ÉÒÔÔÚÒÆ¶¯É豸ºÍ±ê×¼ä¯ÀÀÆ÷ÖÐÔËÐÐ.Õâ¾ÍÊÇCSSµÄÒªµã.
²»¹ýCSSµÄÒÕÊõÔÚÓÚÄܹ»ÀûÓÃCSS¿ØÖƹæÔò¿ìËÙÓÐЧµØ²Ù×ÝÒ³Ãæ¶ÔÏó.°ÑCSS¹æÔòÓëHTML±ê¼ÇÆ¥ÅäÆðÀ´µÄ²Ù×ö¾ÍºÃÏñÊÇÒ»ÖÖ¶ ......
<style>
.a
{
background-color:#000000;
}
.b
{
background-color:#ffffff;
}
</style>
<ul>
<li id="aaa1" onclick="setClassName(this,'a')"> <a href="#">aaaa</a> </li>
<li id="aaa2" onclick="setClassName(this,'a')"> <a href="#"&g ......
I needed a tab pane to put some content in my web pages. There are many solutions around
and I must say that they are quite good, but I had some extra requirements that I needed.
I did search around but I did not find what I wanted, so I ended up producing something and now I am sharing
it with y ......
ƽʱÎÒÃÇÔÚä¯ÀÀÍøÒ³µÄʱºò£¬³£³£¿´¼ûµ¼º½À¸ÊǶ¯Ì¬µÄ£¬ÆäʵÎÒÃÇ¿ÉÒÔͨ¹ýcssÑùʽ±íµÄ¶¨Òå¾Í¿ÉÒÔÍê³É¡£
Ê×ÏÈÎÒÃÇ¿´Ò»ÏÂcss´úÂ룺
#nav {
width:900px;
margin:0 auto;
background:#E1F4FD;
}
#nav li {
float:left;
font-size:14px;
}
#nav li a {
color:#000000;
......