CSS ÖÐÓ¢Îĵ¼º½
CSS:
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
.bi{
position: relative;
z-index: 0;
}
.bi:hover{
z-index: 99;
}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}
.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{
padding-top: 2px;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
</style>
<ul id="nav">
<li><a class="bi" href="http://download.csdn.net//">hanlinwang.org<span>ÎÒ°®CSS</span></a></li>
<li><a class="bi" href="#">About us<span>¹ØÓÚÎÒÃÇ</span></a></li>
<li><a class="bi" href="#">Products<span>²úƷչʾ</span></a></li>
<li><a class="bi" href="#">Services<span>ÊÛºó·þÎñ</span></a></li>
<li><a class="bi" href="#">Contact<span>ÁªÏµÎÒÃÇ</span></a></li>
</ul>
<div id="navbar"></div>
Ïà¹ØÎĵµ£º
SEO¼´ËÑË÷ÒýÇæÓÅ»¯£¬´ÓÄ¿Ç°»¥ÁªÍøµÄ·¢Õ¹×´¿öÀ´¿´£¬ÊµÏÖSEOÓÐÖúÓÚÆóÒµ¼õÉÙÍøÂçÍƹãµÄ³É±¾¡£SEOµÄÊÖ¶ÎÓкܶàÖÖ£¬»òÕ߹̶¨µÄ¼¼Êõģʽ£¬»òÕ߷ǹ̶¨µÄËùνÒÕÊõģʽҲ¡£DIV+CSSÊǵ±Ç°¹«ÈϵÄÍøÒ³Éè¼Æ±ê×¼£¬ÊǹãΪÍƳçµÄÍøÒ³Éè¼Æз¶Ê½£¬ËäÈ»TABLE»¹±»¹ã·ºÓ¦Ó㬵«DIV+CSSÓÅÐãµÄ½çÃæ¿ØÖÆÄÜÁ¦£¬»¹ÊÇÓµÓÐÁ˷dz£Ç¿µÄ¾ºÕùÓÅÊÆ¡£µ±È»£¬Ä¿ ......
1. ¶¨ÒåÑùʽ
1.1 °´html±êÇ©¶¨Òå
ÀýÈ磺body{background-color:#999999; text-align:center}
1.2 °´ÀඨÒå
ÀýÈ磺.style1{border-style:solid; border-color:#0000FF; border-width:1px}
1.3 °´id¶¨Òå
ÀýÈ磺#style2{border-style:solid; border-color:#FF0000; border-width:1px}
2. CSSµÄλÖúÍÒýÓÃ
......
¡¡
¡¡Æäʵ£¬ÒÔÇ°´ÓÀ´Ã»ÓнӴ¥¹ýCSSÏà¹ØµÄÄÚÈÝ£¬¶¼ÊÇÔÚ×öÒµÎñµÄ±à³Ì£¬´ÓÀ´Ã»Ïë¹ýǰ̨ҳÃæµÄÉè¼ÆÒ²ÄÜÈç´Ë¸´ÔÓ¡£Õâ´ÎÏîÄ¿µÄ¿ª¹ý¹ý³ÌÖУ¬×÷ΪCSS²ËÄñµÄÎÒÒ²
½Ó´¥µ½CSSµÄÏà¹ØÉè¼Æ¡£Ëù³öÏֵĵͼ¶ÎÊÌâºÍÀ˷Ѻܶàʱ¼äµÄ×´¿öÒ²²ã³ö²»ÇËùÒÔͨ¹ý¸÷·½ËÑË÷ºÍ×Ô¼ºµÄʵ¼ÊѧϰÖÐ×ܽá³ö¼¸µãIEºÍFirefox¶ÔCSS
µÄÇø±ð£¬¸ø´ó¼Ò½è¼ø¡£
¡¡¡ ......
1¡¢ÏÂÔØ yuicompressor °ü
Ê×Ïȵ½¹Ù·½ÍøÕ¾ http://yuilibrary.com/downloads/#yuicompressor ÉÏÏÂÔØ yuicompressor-2.4.2.zip ×ÊÔ´°ü¡£½âѹºó yuicompressor-2.4.2.jar ÔÚ yuicompressor-2.4.2\build Ŀ¼Ï¡£
2¡¢´´½¨build-yui.xml Îļþ
È»ºó´´½¨ant ÔËÐеÄÎļþ£¬ÄÚÈÝÈçÏ£º
<?xml version="1.0" encodin ......
abc.css
CSS code
.class1
{
width:10px;
background-color: red;
}
HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="abc.css" />
<TITLE> New Document </TITLE>
<script&g ......