CSS¿ò¼Ü»ã×Ü
Ò»¡¢YAML
´ó¼Ò±È½ÏÊìϤµÄÊÇjs¿ò¼Ü£¬ÀýÈçprototype¡¢JQueryѽ¡£ÆäʵXHTML+CSSÒ²ÊÇ
Óпò¼ÜµÄ£¬×îÖøÃûµÄ¿ÉÄܾÍÊÇYUIÁË£¬ÊÇyahoo¿ª·¢Ð¡×éµÄ¡£µ«ÊÇÄǸöÉÔ΢ÓеãÅӴ󣬶øÇÒÇ£³¶µ½Ò»Ð©µÄJS¿ò¼Ü¡£ËùÒÔ¸Õ¿ªÊ¼Ñо¿µÄʱºò¿ÉÄÜÉÔ΢ÓеãÀÛ¡£
¶øÕâ¸öYAML¾Í±È½Ïµ¥´¿ÁË¡£¿ÉÄÜÊÇÏÖÔÚ»¹ÔÚ·¢Õ¹³õÆÚËùÒÔ¿ò¼ÜºÜ¼òµ¥£¬¶«Î÷²»¶à£¬¶ÔXHMTL+CSS¿ò¼Ü¸ÐÐËȤµÄ¿ÉÒÔÈ¥¿´¿´Å¶¡£ÔÚ¹úÄÚºÃÏñ»¹Ã»ÓÐÄǸöÅó
ÓÑÔÚ×öÕâ¸ö¶«Î÷£¬Èç¹ûÄãÓÐÐËȤ£¬×Ô¼º×êÑÐÒ»ÏÂ˵²»¶¨ÖйúµÄCSS¿ò¼Ü֮׿¾ÍÊÇÄãÁËŶ¡£ºÇºÇ¡£¡£
꿅᣼http://www.yaml.de/en/
Àï
ÃæÓÐÔ´Â룬¿ª·¢ÎĵµÒÔ¼°Ò»Ð©Ê¹Óô˿ò¼Ü´î½¨µÄÒ³ÃæÊµÀý¡£
¶þ¡¢blueprintcss
Èý¡¢Elements
Ò»¡¢Ê²Ã´ÊÇ
Elements
1.ElementsÊÇÒ»¿î´¿¾»µÄCSS¿ò¼Ü£¬¿ÉÒÔ°ïÖúÉè¼ÆÊ¦¿ìËÙ¸ßЧÂʵÄÊéдcssÎĵµ¡£Äã¿ÉÒÔ½«ËûÀí½â³ÉÒ»Ì×Ä£°å£¬
ÀïÃæ°üº¬ÁË´ó¶àÊýÕ¾µãÖÐËùÐèÒªµÄÄÇЩcssÀà¡£ËûºÜС£¬Ö»ÓÐËĸöÎļþ¶øÒÑ¡£×ܹ²²»µ½6KB¡£
2.ÕâËĸöÎļþ·Ö±ðÊÇ×öʲôÓã¿
Elements.css
¹éÄÉÁËһЩվµãcssÖг£ÓõÄcssÀà
Reset ¶ÔһЩ³£ÓõÄhtml±êÇ©½øÐÐÔ¤Éè¡£ÀýÈçhtml, body, div, span,
applet, h1, h2, h3, h4, h5, h6....µÈµÈ¡£
Typography
ÎÄ×ÖÅŰ泣ÓñêÇ©µÄÔ¤Éè¡£ÀýÈç
body,ul,ol,dl,td,th,caption,pre,p,blockquote,input,textareaµÈ
External
Links ¶ÔÓÚ¸÷ÖÖÎĵµÐÎʽµÄÁ´½ÓµÄÔ¤Éè¡£Õâ¸ö¶«Î÷ºÜÔçÒѾÓÐÈ˵¥¶ÀÌá³ö¹ý¡£
3.ÈçºÎʹÓÃElements CSS¿ò¼Ü£¿
<link
rel="stylesheet" type="text/css" href="/css/elements/elementsImport.css"
/>
´ó¼Ò¿ÉÄÜ×¢Òâµ½ÉÏÃæµÄͼƬÖÐÓÐ5¸öcssÎļþ£¬ÆäÖеÄelementsImport.cssÖ»Êǽ«ÆäËûµÄËĸöcssÎļþ·Ö±ðµ¼Èë½ø
À´¡£
@import "reset.css";
@import "typography.css";
@import
"elements.css";
@import "externalLinks.css";
Elements¿ò¼ÜÒ²Ðí²¢²»Ò»¶¨ÊÊ
ºÏÎÒÃǵÄÕ¾µã¿ª·¢£¬µ«ÊÇͨ¹ýËüÎÒÃÇ¿ÉÒÔÕÒµ½Ò»Öֺõļܹ¹·½Ê½¡£Èç¹ûÄã¾³£»áºÍcss´ò½»µÀ£¬²»ÂÛÄãÊÇÔÚ×öÆóÒµÕ¾»¹ÊÇÃÅ»§Õ¾£¬ºÃºÃµÄÕûÀíÒ»ÏÂÄãÒÔǰµÄÎĵµ£¬
¸ù¾ÝÄãµÄÐèÇóÖÆ¶¨×Ô¼ºµÄCSS¿ò¼Ü£¬»áºÜ´ó³Ì¶ÈÉϵÄÌá¸ßÄãµÄ¿ª·¢Ð§ÂÊ¡£
Ïà¹ØÎĵµ£º
jQuery, MooTools, Prototype µÈÓÅÐãµÄ JavaScript ¿ò¼ÜÓµÓи÷ÖÖÇ¿´óµÄ¹¦ÄÜ£¬°üÀ¨»æÖÆ Web ͼ±í£¬Ê¹ÓÃÕâЩ¿ò¼ÜÒÔ¼°ÏàÓ¦²å¼þ£¬ÎÒÃÇ¿ÉÒԷdz£ÇáËɵØÊµÏÖÇúÏßͼ£¬Ô²±ýͼ£¬Öù״ͼµÈ Web ͼ±íµÄ»æÖÆ£¬¶ø²»±ØÏóÒÔÍùÄÇÑùͨ¹ý¸´Ô Flash ¼¼ÊõʵÏÖ¡£±¾ÎĽéÉÜÁË9¸öÓÅÐãµÄ»ùÓÚ JavaScript Óë CSS µÄ Web ͼ±í¿ò¼Ü¡£ 1. Flot Flot ......
ÍøÒ³Éè¼ÆDIV+CSSÔªËØ½âÎö£¬<head>²¿·Öǰ£º
£¨Ò»£© DOCTYPE ºÍDTD
ÓÃDWн¨ÍøÒ³Ê±£¬×Ü»áÉú³ÉÒ»¾ä
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Õâ¾äÊÇDOCTYPEÉùÃ÷£¬DOCTY ......
clip:rect(ÉÏ£¬ÓÒ£¬Ï£¬×ó) Ëĸöµã×ø±ê
<img src="1.jpg" style=" clip:rect(0£¬30£¬10£¬10);"/>
´Ë·½·¨²»ÊʺϼôÇб³¾°
±³¾°Ê¹ÓÃ
style="background-image:url(bg.jpg); background-position:20px 0px;"
kground-position:
1.¶¨Î»·½·¨ left center ºáÏò ×ÝÏò
2.ÇÐÈ¡ ºáÏòpx ×ÝÏòpx
²»ÊÊºÏÆ ......
¹ØÓÚCSS¶Ô¸÷¸öä¯ÀÀÆ÷¼æÈÝÊǸö·Ç³£ÈÃÈËÍ·ÌÛµÄÊÂÇéÁË, ÍøÂçÉÏµÄ½Ì³Ì±éµØ¶¼ÊÇ.½ñÌìÔÚdiscuz.netÉÏ·¢ÏÖÁËһƪ²»´íµÄ¶«Î÷£¬¾Í×ªÔØ¹ýÀ´ºÍ´ó¼Ò¹²Ïí.¿ÉÒÔµ±×÷CSS¼æÈÝIE6,IE7,FireFoxµä·¶ÁË£¬ÖµµÃÈ¥¼Ç¼Ï¡£·¢ÏÖ×Ô¼ººÜ¾ÃûÓÐ×ªÔØ¶«Î÷¡£
×¢£ºIE¶¼ÄÜʶ±ð*;±ê×¼ä¯ÀÀÆ÷(ÈçFirefox,Opera,Netscape)²»ÄÜʶ±ð*£»IE6ÄÜʶ±ð*£¬µ«²»ÄÜʶ±ð !im ......
ÈÃleftµÄ¸ß¶ÈµÈÓÚ centerµÄ¸ß¶È..........
<div id=left></div>
<div id=center></div>
<script type="text/javascript">
document.getElementById("left").style.height = document.getElementById("center").offsetHeight + "px";
</script> ......