CSS ѧϰ±Ê¼Ç
µ±Í¬Ò»¸ö HTML ÔªËØ±»²»Ö¹Ò»¸öÑùʽ¶¨Òåʱ£¬»áʹÓÃÄĸöÑùÊ½ÄØ£¿
Ò»°ã¶øÑÔ£¬ËùÓеÄÑùʽ»á¸ù¾ÝÏÂÃæµÄ¹æÔò²ãµþÓÚÒ»¸öеÄÐéÄâÑùʽ±íÖУ¬ÆäÖÐÊý×Ö 4 ÓµÓÐ×î¸ßµÄÓÅÏÈȨ¡£
1.
ä¯ÀÀÆ÷ȱʡÉèÖÃ
2.
ÍⲿÑùʽ±í
3.
ÄÚ²¿Ñùʽ±í£¨Î»ÓÚ <head> ±êÇ©ÄÚ²¿£©
4.
ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©
Òò´Ë£¬ÄÚÁªÑùʽ£¨ÔÚ HTML ÔªËØÄÚ²¿£©ÓµÓÐ×î¸ßµÄÓÅÏÈȨ£¬ÕâÒâζ×ÅËü½«ÓÅÏÈÓÚÒÔϵÄÑùʽÉùÃ÷£º<head> ±êÇ©ÖеÄÑùʽÉùÃ÷£¬ÍⲿÑùʽ±íÖеÄÑùʽÉùÃ÷£¬»òÕßä¯ÀÀÆ÷ÖеÄÑùʽÉùÃ÷£¨È±Ê¡Öµ£©¡£
CSS Óï·¨
CSS Óï·¨ÓÉÈý²¿·Ö¹¹³É£ºÑ¡ÔñÆ÷¡¢ÊôÐÔºÍÖµ£º
selector {property: value}
Ñ¡ÔñÆ÷ (selector) ͨ³£ÊÇÄãÏ£Íû¶¨ÒåµÄ HTML ÔªËØ»ò±êÇ©£¬ÊôÐÔ (property) ÊÇÄãÏ£Íû¸Ä±äµÄÊôÐÔ£¬²¢ÇÒÿ¸öÊôÐÔ¶¼ÓÐÒ»¸öÖµ¡£ÊôÐÔºÍÖµ±»Ã°ºÅ·Ö¿ª£¬²¢ÓÉ»¨À¨ºÅ°üΧ£¬ÕâÑù¾Í×é³ÉÁËÒ»¸öÍêÕûµÄÑùʽÉùÃ÷£¨declaration£©£º
body {color: blue}
ÉÏÃæÕâÐдúÂëµÄ×÷ÓÃÊǽ« body ÔªËØÄÚµÄÎÄ×ÖÑÕÉ«¶¨ÒåΪÀ¶É«¡£ÔÚÉÏÊöÀý×ÓÖУ¬body ÊÇÑ¡ÔñÆ÷£¬¶ø°üÀ¨ÔÚ»¨À¨ºÅÄڵĵIJ¿·ÖÊÇÉùÃ÷¡£ÉùÃ÷ÒÀ´ÎÓÉÁ½²¿·Ö¹¹³É£ºÊôÐÔºÍÖµ£¬color ΪÊôÐÔ£¬blue Ϊֵ
ÔÚ CSS ÖУ¬ÀàÑ¡ÔñÆ÷ÒÔÒ»¸öµãºÅÏÔʾ£º
.center {text-align: center}
ÔÚÉÏÃæµÄÀý×ÓÖУ¬ËùÓÐÓµÓÐ center ÀàµÄ HTML ÔªËØ¾ùΪ¾ÓÖС£
CSS position ÊôÐÔ
ͨ¹ýʹÓà position
ÊôÐÔ£¬ÎÒÃÇ¿ÉÒÔÑ¡Ôñ 4 Öв»Í¬ÀàÐ͵Ķ¨Î»£¬Õâ»áÓ°ÏìÔªËØ¿òÉú³ÉµÄ·½Ê½¡£
position ÊôÐÔÖµµÄº¬Ò壺
static
ÔªËØ¿òÕý³£Éú³É¡£¿é¼¶ÔªËØÉú³ÉÒ»¸ö¾ØÐοò£¬×÷ΪÎĵµÁ÷µÄÒ»²¿·Ö£¬ÐÐÄÚÔªËØÔò»á´´½¨Ò»¸ö»ò¶à¸öÐпò£¬ÖÃÓÚÆä¸¸ÔªËØÖС£
relative
ÔªËØ¿òÆ«ÒÆÄ³¸ö¾àÀë¡£ÔªËØÈÔ±£³ÖÆäδ¶¨Î»Ç°µÄÐÎ×´£¬ËüÔ±¾ËùÕ¼µÄ¿Õ¼äÈÔ±£Áô¡£
absolute
ÔªËØ¿ò´ÓÎĵµÁ÷Íêȫɾ³ý£¬²¢Ïà¶ÔÓÚÆä°üº¬¿é¶¨Î»¡£°üº¬¿é¿ÉÄÜÊÇÎĵµÖеÄÁíÒ»¸öÔªËØ»òÕßÊdzõʼ°üº¬¿é¡£ÔªËØÔÏÈÔÚÕý³£ÎĵµÁ÷ÖÐËùÕ¼µÄ¿Õ¼ä»á¹Ø±Õ£¬¾ÍºÃÏñÔªËØÔÀ´²»´æÔÚÒ»Ñù¡£ÔªËض¨Î»ºóÉú³ÉÒ»¸ö¿é¼¶¿ò£¬¶ø²»ÂÛÔÀ´ËüÔÚÕý³£Á÷ÖÐÉú³ÉºÎÖÖÀàÐ͵Ŀò¡£
fixed
ÔªËØ¿òµÄ±íÏÖÀàËÆÓÚ½« position ÉèÖÃΪ absolute£¬²»¹ýÆä°üº¬¿éÊÇÊÓ´°±¾Éí¡£
Ìáʾ£ºÏà¶Ô¶¨Î»Êµ¼ÊÉϱ»¿´×÷ÆÕͨÁ÷¶¨Î»Ä£Ð͵ÄÒ»²¿·Ö£¬ÒòÎªÔªËØµÄλÖÃÏà¶ÔÓÚËüÔÚÆÕͨÁ÷ÖеÄλÖá£
CSSʵÀý£º
http://www.w3school.com.cn/example/csse_examples.asp
Ïà¹ØÎĵµ£º
<asp:GridView ID="GridView1" runat="server" Width="100%"
HorizontalAlign="Center" CellPadding="1" AutoGenerateColumns="False" AllowPaging="true" ......
cursorÖÐhandÓëpointer
Àý×Ó£ºCSSÊó±êÊÖÐÍЧ¹û <a href="#" style="cursor:hand">CSSÊó±êÊÖÐÍЧ¹û</a>
pointerÒ²ÊÇÊÖÐÍ£¬ÕâÀïÍÆ¼öʹÓÃÕâÖÖ£¬ÒòΪÕâ¿ÉÒÔÔÚ¶àÖÖä¯ÀÀÆ÷ÏÂʹÓá£
Àý×Ó£ºCSSÊó±êÊÖÐÍЧ¹û <a href="#" style="cursor:pointer">CSSÊó±êÊÖÐÍЧ¹û</a>
crosshairÊÇÊ®×ÖÐÍ
Àý×Ó£ºCSSÊó± ......
IE6ʵÏÖ·½·¨:
HTML²¿·Ö:
<imgsrc="..."alt="..."onload="resizeImage(this)"/>
JS²¿·Ö:
<mce:scripttype="text/javascript"><!--
functionresizeImage(obj){
obj.width=obj.width>50&&obj.width>obj.height?50:auto;
obj.height=obj.height>50?50:auto;
}
// -->&l ......
ËÑË÷ÒýÇæÓÅ»¯(seo)Óкܶ๤×÷Òª×ö£¬ÆäÖжԴúÂëµÄÓÅ»¯ÊÇÒ»¸öºÜ¹Ø¼üµÄ²½Öè¡£
ΪÁ˸ü¼Ó·ûºÏSEOµÄ¹æ·¶£¬ÏÂÃæÊÇĿǰÁ÷ÐеÄCSS+DIVµÄÃüÃû¹æÔò£º
ҳͷ:header
µÇ¼Ìõ:loginBar
±êÖ¾:logo
²àÀ¸:sideBar
¹ã¸æ:banner
µ¼º½:nav
×Óµ¼º½:subNav
²Ëµ¥:menu
×Ӳ˵¥:subMenu
ËÑË÷:search
¹ö¶¯:scroll
Ò³ÃæÖ÷Ìå:main
ÄÚÈÝ:con ......