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Îļþ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 ......
±¾ÎÄÁоÙÁ˼æÈÝ 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ʵÏÖ¶à½çÃæ
·½·¨Ò»:
<%@page language="C#"%>
<%@import namespace="System.Data"%>
<script language="c#" runat="server">
public void page_load(Object obj,EventArgs e)
{
//´´½¨·þÎñÆ÷¶Ë¿Ø¼þ.
//Ö¸¶¨µÄ±ê¼Ç"LINK"³õʼ»¯´ËÀàµÄÐÂʵÀý.
HtmlGeneric ......
ÓÉÏÂÍùÉϵģº
<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 ......
1.divµÄ´¹Ö±¾ÓÖÐÎÊÌâ
vertical-align:middle;
½«ÐоàÔö¼Óµ½ºÍÕû¸öDIVÒ»Ñù¸ß line-height:200px;
È»ºó²åÈëÎÄ×Ö£¬¾Í´¹Ö±¾ÓÖÐÁË¡£È±µãÊÇÒª¿ØÖÆÄÚÈݲ»Òª»»ÐС£
2. margin¼Ó±¶µÄÎÊÌâ
ÉèÖÃΪfloatµÄdivÔÚieÏÂÉèÖõÄmargin»á¼Ó±¶¡£ÕâÊÇÒ»¸öie6¶¼´æÔÚµÄbug¡£
½â¾ö·½°¸ ......