DIV+CSSÖ®float
test.html£º
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="c.css" mce_href="c.css" />
</head>
<body>
<div id="footer2">
this is a footer2 div
</div>
<p id="p1">
this is a p1 p
</p>
<p id="p2">
this is a p2 p
</p>
<div id="footer3">
this is a footer3 div
</div>
</body>
</html>
c.css£º
div#footer2 {
float:left;
background-color: #faf;
width: 200px;
height:80px;
margin: 10px;
}
#p1{
float: right;
background-color: #afa;
width: 200px;
height:80px;
margin: 2px;
}
#p2{
float: right;
background-color: #afa;
width: 200px;
height:80px;
margin: 2px;
}
#footer3 {
float:right;
background:#afe;
width: 200px;
height:80px;
margin: 2px;
}
1.
ÖмäÓÐÁ½¸ö<p>ÔªËØ£¬ÄÇôÎÊÌâ¾ÍÀ´ÁË£¬Èç¹ûÔÚcssÀïûÓÐÉèÖÃmarginÔòÔÚFFÖÐÑù×Ó»áÓëÏëÏñÖеIJ»Í¬£¬div Óë
p µÄ¸ß¶È»á²»Ïàͬ¡£
¼Ó¸ömargin¾ÍûÊÂÁË£¬¼´Ê¹傎ÊÇ0¡£
2.cssÖÐfloat Óë clear ²»ÄÜÒ»ÆðʹÓã¬Ò»ÆðÓÃclear»á²»Æð×÷Óá£
ËùÒÔÏÖÔÚ»¹²»ÏþµÃ¼ÈÈÃfooter2 clear bothÓÖÈÃËüÏòÓÒ¸¡¶¯¸ÃÕ¦°ì£¿
Ïà¹ØÎĵµ£º
Ò»¡¢CSS Ö㤶ÈÓëÑÕÉ«
1¡¢³¤¶Èµ¥Î»ËµÃ÷
in Ó¢´ç
cm ¹«·Ö
mm ¹«Àï
cm ÒÔĿǰ×ÖÌå¸ß¶ÈΪµ¥Î»
ex ÒÔСд×Öĸ¸ß¶ÈΪµ¥Î»£¨´ó²¿·Ö²»Ö§³Ö£©
pt 1pt/72Ó¢´ç
pc 1pc/12pt
px ÏñËØ£¨ÍƼöʹÓã©
2¡¢ÑÕÉ«µ¥Î»£º ˵Ã÷
Ê®Áù½øÖÆÈ磺color:#ff0000
ÑÕÉ«Ãû³ÆÈ磺color:red
ÈýÔÉ«µ¥Î»È磺rgb(255,0,0)
Ò»°ã×î³£ÓõÄÊÇÊ®Áù½øÖ ......
ÁоÙÒ»Ð©ÍøÕ¾Ò³Ãæ±ä»ÒµÄcss´úÂë:
Ê×ÏÈÈ·±£ÍøÕ¾ÓÐ1.0±ê×¼ÉùÃ÷:
<!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“>
·½·¨ÈçÏÂ:
1.html{filte ......
¶¨ÒåºÍÓ÷¨
line-height ÊôÐÔÉèÖÃÐмäµÄ¾àÀ루Ðиߣ©¡£
×¢ÊÍ£º²»ÔÊÐíʹÓøºÖµ¡£
˵Ã÷
¸ÃÊôÐÔ»áÓ°ÏìÐпòµÄ²¼¾Ö¡£ÔÚÓ¦Óõ½Ò»¸ö¿é¼¶ÔªËØÊ±£¬Ëü¶¨ÒåÁ˸ÃÔªËØÖлùÏßÖ®¼äµÄ×îС¾àÀë¶ø²»ÊÇ×î´ó¾àÀë¡£
line-height Óë font-size µÄ¼ÆËãÖµÖ®²î£¨ÔÚ CSS ÖгÉΪ“Ðмä¾à”£©·ÖΪÁ½°ë£¬·Ö±ð¼Óµ½Ò»¸öÎı¾ÐÐÄÚÈݵĶ¥²¿ºÍµ× ......
Ò»£ºÖ±½ÓÉèÖÃ
¶þ£º»ÃæÉÏÉèÖãº
È磺
<mx:Style>
TextArea{
font-size:36px
font-weight: bold
}
</mx:Style>
Èý£ºÊ¹ÓÃÍâÖÃÎļþ
<mx:Style source="style.csss"/> ......
Ò»×éǶÌ×Ñ¡ÔñÆ÷µÄʵ¼ÊÌØÐÔ¿ÉÒÔ¼ÆËã³öÀ´¡£»ù±¾µÄ£¬Ê¹ÓÃIDÑ¡ÔñÆ÷µÄÖµÊÇ100£¬Ê¹ÓÃclassÑ¡ÔñÆ÷µÄÖµÊÇ10£¬Ã¿¸öhtmlÑ¡ÔñÆ÷µÄÖµÊÇ1¡£
ËüÃÇ¼ÓÆðÀ´¾Í¿ÉÒÔ¼ÆËã³öÌØÐÔµÄÖµ¡£
pµÄÌØÐÔÊÇ1£¨Ò»¸öhtmlÑ¡ÔñÆ÷£©
div pµÄÌØÐÔÊÇ2£¨Á½¸öhtmlÑ¡ÔñÆ÷£©
.treeµÄÌØÐÔÊÇ10£¨1¸öclassÑ¡ÔñÆ÷£©
div p.treeµÄÌØÐÔÊÇ1+1+10=12£¬£¨Á½¸öhtmlÑ¡ÔñÆ÷ ......