CSS³ö´íÁË£¡
ÎÒ±àдÁËÒ»¶ÎHTML´úÂëºÍCSS´úÂ룬µ«ÊdzöÀ´µÄЧ¹ûÓëÎÒÏëÒª±àдµÄЧ¹ûÍêÈ«Ïà·´£º
demo.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hello World! </title>
<link rel="stylesheet" href="demo.css" type="text/css" />
</head>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
</html>
demo.css
div#father
{
width:10px;height:10px;background:red;
}
div#son
{
padding-top:3px;padding-bottom:3px;padding-left:5px;padding-right:0px;background:green;
}
ÎÒÏëÈÃËüÏÔʾһ¸ö·½¿é£¬ÆäÖУ¬ÓÐÒ»¸öºìÉ«¿éÔÚ×ó±ß£¬°ë°üΧÓұߵÄÂÌÉ«¿é£¬¹¹³ÉÕû¸ö·½¿é£¬¾ÍÏñÊúÆðÀ´µÄ¡°°¼¡±×Ö¡£
¶øÊÂʵȴÊÇ£¬Ò»¸ö·½¿é£¬Éϰ벿·ÖÏÔʾÂÌÉ«£¬Ï°벿·ÖÏÔʾºìÉ«¡£
ÕâÊÇΪʲô£¿ÔõôÑù²ÅÄÜʵÏÖÄØ£¿
°ÝÍи÷룬°ï°ï棡
CSS code:
div#father
{
width:10px;height:10px;background:red; overflow:hidden; position:relative;
}
div#son
{
top:3px;bottom:3px;left:5px;right:0px;background:green; overflow:hidden; width:5px; height:4px; position:absolute;
Ïà¹ØÎÊ´ð£º
Ƥ·ôºÍÑùʽ±í¶¼¿ÉÒÔÉèÖÿؼþµÄÍâ¹Û£¬¾ßÌåÓÐÊ²Ã´Çø±ðÄØ£¿
skin ÊÇasp.net ÌåϵµÄ ¾ÍÏ൱ÓÚ<asp:TextBox> ¶ÔÓ¦ÓÚ<input type="text">
Äã°ÑƤ·ôµ±³ÉÒ·þ£¬°ÑÑùʽ±íµ±³É»¯×±Æ·¾ÍÈÝÒ×Àí½âÁË
......
²»¶®ËûÍø¸ñÈçºÎÔÀí
\Using Nesting Grids
YUI Grids CSS provides a system for subdividing sections of your page with nestable grids. Use this technique to easily create complex layouts that go ......
ÎÒÓпÕûÓÐÊÂ×öÑо¿Ò»ÏÂCSS+DIV,ÏÖ×öÒ»Ìõµ¼º½Ìõ£¬Óöµ½Ò»¸öÎÊÌ⣬Ëü´ó¼Ò°ïæ½â¾öһϣº
ÒÔÏ´úÂë¿ÉÒÔʵÏÖ¾ÓÖУ¬µ«ÓÐÒ»¸öÎÊÌâ¾ÍÊÇ£¬Èç¹ûÎÒ¼Ó¶àÒ»¸öÀ¸Ä¿±ÈÈç¼Ó¶àÒ»¸öHTML code:
<li><a href="" ......
ÎÒÓÃCSS¿ØÖƵÄÍøÒ³Ò³ÃæÑÕÉ«£¬ÔÚÉè¼ÆµÄʱºò¶¼ÓÐÑÕÉ«£¬ÔõôÔÚÔËÐеÄʱºòûÓÐÏÔʾ°¡£¿ÇóÇó´ó¼Ò˵˵¿©
ÄãµÄ´úÂëÄØ£¿
body
{
background-color:#C0C9FF;
}
Ö±½ÓÕâÑùдµÄ¿©£¬È»ºóÒýÓõ½¿ØÖƵÄÍøÒ³ÀïÃæ¿© ......
ÔÚʹÓÃCSSÖеÄpadding-leftʱÓöµ½Ò»¸öÎÊÌâ¡£¾ÍÊDZ¾À´ÒѾÉèÖúõĿí¶È£¬padding-leftÒ»ÉèÖà ¶àÉÙºÃÏñ¾Í°ÑÕâ¸ö¼Ó¿íÁ˶àÉÙ¡£ºóÃæµÄDIV¾Í±äλÖÃÁË¡£ÓÐû½â¾ö°ì·¨Ñ½
ÇëÎÊÄãIE¼¸°¡£¿=£¬= ²»»áÓÐÕâÖÖÇé¿öÒ®
Èç¹ûÊÇIE6£¬Ä ......