¡¾DIV+CSSÈëÃŽ̡̳¿ËÄ¡¢CSSÈçºÎ¿ØÖÆÒ³Ãæ
±¾½ÚÖ÷Òª½²½â£¬Á½¸öÄÚÈÝ£¬
µÚÒ»£ºCSS
ÈçºÎ¿ØÖÆÒ³ÃæÑùʽ£¬ÓÐ
¼¸ÖÖ·½Ê½£»
µÚ¶þ£ºÕâЩ·½Ê½³öÏÖÔÚͬһ¸öÒ³ÃæÊ±µÄÓÅÏȼ¶¡£
ʹÓÃxHTML
+CSS
²¼¾ÖÒ³Ãæ£¬ÆäÖÐÓиöºÜÖØÒªµÄÌØµã¾ÍÊÇÄÚÈÝÓë±íÏóÏà·ÖÀ룬ÄÚÈÝÖ¸HTMLÒ³Ãæ´úÂ룬±íÏó¾ÍÊÇCSS´úÂëÁË£¬Èç¹û°ÑÒ³Ãæ¿´³É´©×ÅÒ·þµÄÈ˵ϰ£¬È˾ÍÊÇ
HTML£¬ÊÇÄÚÈÝ£¬¶øÒ·þÄØ¾ÍÊÇCSS£¬ÊDZí
Ïó£¬ÏÖÔÚ³öÏÖµÄÎÊÌâÊÇ£¬ÈçºÎÈÃCSSÈ¥¿ØÖÆÒ³Ã棿»òÕß˵£¬ÈçºÎÈÃÒ·þ´©ÔÚÈËÉíÉÏ£¬ºÃÌåÏÖ³öÈ˵÷ç¸ñÌØ
µã£»²»Í¬µÄCSS¾Í¿ÉÒÔÊ¹Ò³Ãæ³öÏÖ²»Í¬µÄ·ç¸ñÊÊÓò»Í¬µÄÍøÕ¾£¬¶ø²»Í¬µÄÒ·þ£¬ÈË´©ÉϺó¾Í»áÌåÏÖ
³ö²»Í¬µÄÖ°Òµ¡£
µÚÒ»£ºÈçºÎÈÃCSSÈ¥¿ØÖÆHTMLÒ³ÃæÐ§¹ûÄØ£¿
ÓÐ
Õâô4ÖÖ·½Ê½£¬ÐÐÄÚ·½Ê½¡¢ÄÚǶ·½Ê½¡¢Á´½Ó·½Ê½¡¢µ¼È뷽ʽ
1£©ÐÐÄÚ·½Ê½
ÐÐÄÚ·½Ê½ÊÇ4ÖÖÑùʽÖÐ×îÖ±½Ó×î¼òµ¥µÄÒ»ÖÖ£¬Ö±½Ó¶ÔHTML±êÇ©ÊÊÓÃstyle=""£¬ÀýÈ磺
<p style="color:#F00; background:#CCC;
font-size:12px;"></p>
ËäÈ»ÕâÖÖ·½·¨±È½ÏÖ±½Ó£¬ÔÚÖÆ×÷Ò³ÃæµÄʱºòÐèҪΪºÜ¶àµÄ±êÇ©ÉèÖÃstyleÊôÐÔ£¬ËùÒԻᵼÖÂHTMLÒ³Ãæ²»¹»´¿¾»£¬ÎļþÌå»ý¹ý´ó£¬²»ÀûÓÚËÑË÷Ö©ÖëÅÀÐУ¬´Ó¶ø
µ¼ÖºóÆÚά»¤³É±¾¸ß¡£
2£©ÄÚǶ·½Ê½
ÄÚǶ·½Ê½¾ÍÊǽ«CSS´úÂëдÔÚ<head></head>Ö®¼ä£¬²¢ÇÒÓÃ<style><
/style>½øÐÐÉùÃ÷£¬ÀýÈ磺
<!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">
<!--
#div1{width:64px; height:64px; float:left;}
#div1 img{width:64px; height:64px;}
-->
</style>
</head>
<body>
<div id="div1"><img
src="http://www.cssxuexi.cn/index/images/ico/2days.gif"
/></div>
È«¹úµÄCSS°®ºÃÕß»ã¾ÛÓÚ´Ë£¬Èç¹û²»À´£¬Äã¾ÍOUTà¶~ÎÒÃǵĿںÅÊÇ£º
“·ÖÏí×Ô¼ºµÄ»¶ÀÖÓëÍ´¿à£¬·ÖÏí×Ô¼ºµÄ¾ÑéÓëÐĵ㬷ÖÏí×Ô¼ºµÄ×ÊÁÏÓë×ÊÔ´”
Èç¹ûÄúÒ²Ô¸Ò⣬¾Í¼ÓÈëÎÒÃǰÉ~
</bo
Ïà¹ØÎĵµ£º
CSSÒѾ³ÉÎªÍøÒ³Ç°¶ÎÉè¼ÆÒ»¸ö·Ç³£ÖØÒªµÄ²¿·Ö£¬ÓÉÓÚдCSSʱÐèÒª¿¼ÂǵÄÎÊÌâ·Ç³£¶à£¬ÀÏÊÖÃÇ´´½¨ÐÂÒ³ÃæÊÇͨ³£»áÑØÓÃÒÔǰµÄCSS¿ò¼Ü¡£µ«ÊÇÐÂÊÖûÓÐ×Ô¼ºµÄ¿ò¼Ü£¬ÕâÆªÎÄÕ¿ÉÒÔ¸øÐÂÊÖÃÇһЩÆôʾ¡£
1.¼òµ¥µÄ´¿CSS Tooltip
ͨ¹ýÕâЩ´úÂ룬Äã¿ÉÒÔ×ö³ö¼òµ¥µÄTooltip¡£ÕâÊÇCSS
´úÂ룺
ÒÔÏÂΪÒýÓõÄÄÚÈÝ£º
a:hover { background: ......
¹ö¶¯ÌõÑùʽÖ÷񻃾¼°µ½ÈçÏÂCSSÊôÐÔ:
overflowÊôÐÔ: ¼ìË÷»òÉèÖõ±¶ÔÏóµÄÄÚÈݳ¬¹ýÆäÖ¸¶¨¸ß¶È¼°¿í¶ÈʱÈçºÎÏÔʾÄÚÈÝ
overflow: auto; ÔÚÐèҪʱÄÚÈÝ»á×Ô¶¯Ìí¼Ó¹ö¶¯Ìõ
overflow: scroll; ×ÜÊÇÏÔʾ¹ö¶¯Ìõ
overflow-x: hidden; ½ûÖ¹ºáÏòµÄ¹ö¶¯Ìõ
overflow-y: scroll; ×ÜÊÇÏÔʾ×ÝÏò¹ö¶¯Ìõ
width: 568px; width: 98%; ÉèÖÃÇøÓòµÄ ......
±ÈÈçÒª·Ö±æIE6ºÍfirefoxÁ½ÖÖä¯ÀÀÆ÷£¬¿ÉÒÔÕâÑùд£º
¡¡¡¡<style>
¡¡¡¡div{
¡¡¡¡background:green; /* for firefox */
¡¡¡¡*background:red; /* for IE6 */
¡¡¡¡}
¡¡¡¡</style>
¡¡¡¡ÎÒÔÚIE6Öп´µ½ÊǺìÉ«µÄ£¬ÔÚfirefoxÖп´µ½ÊÇÂÌÉ«µÄ¡£
¡¡¡¡½âÊÍһϣº
¡¡¡¡ÉÏÃæµÄcssÔÚfirefoxÖУ¬ËüÊÇÈÏʶ²»Á˺óÃæµÄÄǸö´ ......
Ëĸöcss¹¤¾ß£ºfonts,grids,reset,base
Ê¹ÔªËØ±ê×¼»¯µÄreset.css
ÒÔÏÂÆÕͨ¶ø³£ÓõÄÔªËØ¶¼½«marginºÍpaddingÖµ±ê×¼»¯µ½0
the document body
div and p
ËùÓÐlist ÔªËØ£ºdl,dt,dd,ul,ol,li
±êÌâ¼¶ÔªËØ£ºh1,h2,h3,h4,h5,h6
preºÍblockquoteÔªËØ
ijЩ±íµ¥ÔªËØ£ºform,fieldset,input,textarea
tableÔªËØ£ºt ......
ÌṩһÖÖÓÃCSS´úÂëʵÏÖ×Ô¶¯½ØÈ¡×Ö·û´®µÄ·½·¨£º
CSS´úÂëÈçÏ£º
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
......