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

»¬¶¯Í¼Æ¬Õ¹Ê¾Ð§¹û£¨js+css£©

<!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=utf-8" />
<title>www.zishu.cn</title>
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-family:Verdana; font-size:12px; line-height:1.8; margin:50px;}
img{ border:0; display:block;vertical-align:middle}
#imgBox{border-right:1px solid #3B8C54; border-bottom:1px solid #3B8C54; background:#84B726; padding:5px;}
#imgBox div{width:700px; background:#B5DF63; border:1px solid #DAEFB1; border-top:1px solid #6D9720; border-left:1px solid #6D9720; overflow:hidden}
#imgBox,#imgBox ul,#imgBox li{ float:left;}
#imgBox ul{ width:4100px;}
#imgBox a{ padding:6px; display:block; background:#fff; margin:10px; border:1px solid #A5D845; text-align:center; text-decoration:none}
#imgBox span{ display:block; background:#FFFF99; border-top:1px solid #FFFFFF}
#imgBox a:hover{ border:1px solid #84B726; border-left:1px solid #fff; border-top:1px solid #fff; background:#95CC2D;}
#imgBox a:hover span{ background:#000; color:#fff}
</style>
</head>
<body>
<div id="imgBox">
 <ul>
 <li><a href="http://www.zishu.cn"><img alt="this is 001" src="http://www.zishu.cn/attachments/month_0902/1.gif" /></a></li>
 <li><a href="http://www.zishu.cn"><img alt="this is 002" src="http://www.zishu.cn/attachments/month_0902/2.gif" /></a></li>
 <li><a href="http://www.zishu.cn"><img alt="this is 003" src="http://www.zishu.cn/attachments/month_0902/3.gif" /></a></li>
 <li><a href="http://www.zishu.cn"><img alt="this is 004" src="http://www.zishu.cn/attachments/month_0902/4.gif" /></a></li>
 <li><a href="http://www.zishu.cn"&g


Ïà¹ØÎĵµ£º

CSS Ñùʽ

ÑùʽӦÓõij¡ºÏµ±È»ÊÇÍøÒ³ÎļþÖУ¬µ«ÊÇÈçºÎÈ¥ÔËÓÃÄØ£¿¿ÉÒÔ¼òµ¥µÄÕûÀíÒ»ÏÂ˼·¡£
selector ÓÐÈýÖÖÇé¿ö£¬ÄÚ²¿Ñùʽ£¬ÍⲿÑùʽ£¬ÄÚÁªÑùʽ¡£Ó﷨Ϊ
Selector { property: value }
¿ÉÒÔͨ¹ýÉèÖñêÇ©µÄstyleÊôÐÔÖÐÊéд£¬Í¨¹ýCLASSºÍIDÀ´¶¨Òå¡£
<link rel=stylesheet href="***/**.css" type="text/css">
ÈýÖÖ·½Ê½µÄÔËÓ ......

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;
}
</style>
HTML´úÂë
<div class="test"&g ......

ÓÃcssÈÃͼƬ×Ô¶¯ÊÊÓ¦´óС

ͼƬ×Ô¶¯ÊÊÓ¦´óСµÄÎÊÌâÔÚÆ½Ê±ÖÆ×÷µÄʱºòÊDZȽϳ£¼ûµÄÎÊÌ⣬ÏÂÃæÌṩһ¸ö±È½Ï¼òµ¥µÄ½â¾ö·½·¨£º
div img {
max-width:600px;
//IE7¡¢FFµÈÆäËû·ÇIEä¯ÀÀÆ÷ÏÂ×î´ó¿í¶ÈΪ600px;
width:600px;
//ËùÓÐä¯ÀÀÆ÷ÖÐͼƬµÄ´óСΪ600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//µ±Í¼Æ¬´óС´óÓÚ6 ......

CSSµÄpositionÏê½â

position ÓÐÈý¸öÖµ£¬static£¨¾²Ì¬£©¡¢relative£¨Ïà¶Ô£©¡¢absolute£¨¾ø¶Ô£© fix(¹Ì¶¨²¼¾Ö)£»ÓÉÓÚstaticÊÇËùÓÐÒ³ÃæÔªËØµÄĬÈÏÖµ£¬Òò´ËÉèÖÃÔªËØµÄ¶¨Î»ÀàÐÍʱ¼¸ºõ²»ÓÃÕâ¸öÖµ£¬³ý·ÇÓÃÓÚ¸²¸Ç֮ǰµÄ¶¨Òå¡£
¶ÔÓÚºóÁ½Õߣ¬Ò»°ãÓ¦ÓãºÔÚÒ»¸öÏà¶Ô¶¨Î»µÄÔªËØÀïÃæ·ÅÖÃÒ»¸ö¾ø¶Ô¶¨Î»µÄÔªËØ£¬Èçͼ£º
×ÓÔªËØB¿ÉÒÔͨ¹ýtop¡¢right¡¢bottom¡¢le ......
© 2009 ej38.com All Rights Reserved. ¹ØÓÚE½¡ÍøÁªÏµÎÒÃÇ | Õ¾µãµØÍ¼ | ¸ÓICP±¸09004571ºÅ