Ò׽ؽØͼÈí¼þ¡¢µ¥Îļþ¡¢Ãâ°²×°¡¢´¿ÂÌÉ«¡¢½ö160KB

5¸öCSSÊéд¼¼ÇÉ

1. CSS Reset/ÖØÖÃ
ÄãÒ²ÐíÐèÒªÏÈÁ˽âʲôÊÇcssÖØÖá£È»ºóÔõôÑùдcssÖØÖÃÄØ¡£
Äã¿ÉÒÔcopy Eric Meyer Reset, YUI Reset»òÆäËücss reset, µ«Äã½ÓÏÂÀ´Ó¦¸Ã¸ù¾ÝÄãµÄÏîÄ¿¸Ä³ÉÄã×Ô¼ºµÄreset.
²»ÒªÊ¹ÓÃ* { margin: 0; padding: 0; } ¡£ÎÒ¸öÈ˺ܰ®Óã¬Ô­×÷ÕßÌᵽʹÓÃÕâ¾ä²¢²»ÊÊÓÃһЩԪËرÈÈ絥ѡ°´Å¥¡£²»¹ý°³²©¿ÍÀïÃæҲûÓе¥Ñ¡°´Å¥£¬Èç¹ûÓУ¬ÓÖÖØиøµ¥Ñ¡°´Å¥ÖØÉè¾ÍºÃÁËÂï¡£
2. °´×Öĸ˳ÐòÀ´ÅÅÁÐcss
²»°´×Öĸ˳ÐòÅŵÄ
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
°´×Öĸ˳ÐòÅŵÄ
div#header h1 {
 border-bottom: 1px solid #dedede;
 color: #000;
 font-size: 18px;
 line-height: 24px;
 margin-right: 48px;
 position: relative;
 z-index: 101;
}
ÀíÓÉÊÇÕâÑù¿ÉÒÔ¸üºÃµÄÕÒµ½Ä³¸öÊôÐÔ¡£¸öÈ˾õµÃ»¹ºÃ£¬²î±ðÒ²²»ÊÇÌ«´ó¡£²»¹ýÒ²Ðí»áÊʺÏÄã¡£
3. ¸üºÃµÄ×éÖ¯css½á¹¹
ʹÓÃcss×¢ÊÍÀ´·Ö¸øcss·Ö×飬ÕâÑù½á¹¹Ã÷ÁË£¬Ò²ÓÐÀûÓÚЭͬÉè¼Æ¡£
/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
4. ±£³ÖÒ»ÖÂÐÔ
²»ÒªÎÞÒâÒåµÄÈ¥ÌÖÂÛµ½µ×Ò»¸öÑ¡ÔñÆ÷µÄËùÓÐÊôÐÔдÔÚÒ»ÐУ¬»¹ÊÇÿ¸öÊôÐÔдһÐбȽϺá£Äã×Ô¼º¾õµÃok¾ÍºÃ¡£
iv#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
±ÈÈçÎÒ¸öÈ˾Íϲ»¶Ð´ÔÚÒ»ÐУ¬ÒòΪÿÅÅдһÐлáÈÃÕû¸öÎĵµ¸Ð¾õÌ«³¤ÁË£¬ÕÒÆðÀ´²»·½±ã¡£Èç¹ûÄãϲ»¶Ð´Ò»ÐУ¬µ«ÊÇ·¢¸øteamµÄÁíÒ»¸ö£¬Ëûȴϲ»¶Ã¿ÅÅÒ»ÐУ¬ÄÇÔõô°ì£¿ÆäʵºÜ¼òµ¥£¬°ÑcssÄÃÈ¥w3cÑéÖ¤£¬Ëü»áÓÐÒ»·Ý½á¹û£¬»á×Ô¶¯×ª»»³ÉÿÅÅÒ»ÐС£
5. Ïȱê¼Çºócss
Õâ¸öÎÒûÓÐÌ«¿´¶®¡£´ó¸ÅÀí½âÊǶÔhtmlµÄ±ê¼ÇŪºÃºóÔÙдcss»á±È½Ï²»ÈÝÒ׳ö´í¡£±ÈÈçÎÒдһ¸öÒ³Ã棬ÏÈдһ¸ö×î»ù±¾µÄ±ê¼Ç½á¹¹
<body>
     <div id="wrapper">
          <div id="header"><!--end #header-->
          <div id="container">
 &n


Ïà¹ØÎĵµ£º

ÍøÒ³ÖÐÈçºÎ»»·ô£¿£¨CSS£©

×î¼òµ¥µÄ°ì·¨£º¼ÙÉèÄãÓÐÁ½¸öÑÕÉ«µÄCSSÎļþred.css,green.css,ĬÈÏΪºìÉ«µÄÑùʽ
<link rel="stylesheet" style="text/css" link="red.css" id="colorcss">
<input type="button" name="redcss" value='ºìÉ«' onclick="javascript:document.getElementById('colorcss').href='red.css'">
<input type="butt ......

CSSÎÄ×Ö»»ÐÐÏêϸ½â˵

±¾ÎÄÁоÙÁ˼æÈÝ IE ºÍ FF µØ»»ÐÐ CSS ÍƼöÑùʽ,Ïêϸ½éÉÜÁËword-wrapͬword-breakµØÇø±ð.¼æÈÝ IE ºÍ FF µØ»»ÐÐ CSS ÍƼöÑùʽ£º
×îºÃµØ·½Ê½ÊÇ
word-wrap:break-word; overflow:hidden;
¶ø²»ÊÇ
word-wrap:break-word; word-break:break-all;
Ò²²»ÊÇ
word-wrap:break-word; overflow:auto;
ÕâÖÖ×îºÃµØ·½Ê½,ÔÚ IE ÏÂûÓÐÈ ......

ͨ¹ýʹҳÃ涯̬¼ÓÔز»Í¬CSSʵÏÖ¶à½çÃæ

 Í¨¹ýʹҳÃ涯̬¼ÓÔز»Í¬CSSʵÏÖ¶à½çÃæ
·½·¨Ò»:
<%@page language="C#"%>
<%@import namespace="System.Data"%>
<script language="c#" runat="server">
public void page_load(Object obj,EventArgs e)
{
//´´½¨·þÎñÆ÷¶Ë¿Ø¼þ.
//Ö¸¶¨µÄ±ê¼Ç"LINK"³õʼ»¯´ËÀàµÄÐÂʵÀý.
HtmlGeneric ......

¼¸¸ödiv+cssͼƬ¹ö¶¯ÏÔʾµÄ´úÂë

ÓÉÏÂÍùÉϵģº
<div id="demo" onmouseover="ij=1" style="border:1px solid gray; overflow: hidden; height: 119px; width:211px " onmouseout="ij=0">
<div id="demo1">1<br />2br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
¿ÉÒÔÊÇÈκεÄHTMLÄÚÈÝ<br&g ......

CSSÖдæÔÚµÄBUG

1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ 
vertical-align:middle; 
½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px; 
È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐС£
2. margin¼Ó±¶µÄÎÊÌâ     
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö·½°¸ ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØͼ | ¸ÓICP±¸09004571ºÅ