|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
HTML:
以下是援用片断:
<divid="navcontainer">
<ulid="navlist">
<liid="active"><ahref="#"id="current">Itemone</a>
<ulid="subnavlist">
<liid="subactive"><ahref="#"id="subcurrent">Subitemone</a></li>
<li><ahref="#">Subitemtwo</a></li>
<li><ahref="#">Subitemthree</a></li>
<li><ahref="#">Subitemfour</a></li>
</ul>
</li>
<li><ahref="#">Itemtwo</a></li>
<li><ahref="#">Itemthree</a></li>
<li><ahref="#">Itemfour</a></li>
</ul>
</div>
CSS:
以下是援用片断:
#navcontainer{margin-left:30px;}
#navcontainerul
{
margin:0;
padding:0;
list-style-type:none;
font-family:verdana,arial,Helvetica,sans-serif;
}
#navcontainerli{margin:0;}
#navcontainera
{
display:block;
padding:5px10px;
width:140px;
color:#000;
background-color:#ADC1AD;
text-decoration:none;
border-top:1pxsolid#fff;
border-left:1pxsolid#fff;
border-bottom:1pxsolid#333;
border-right:1pxsolid#333;
font-weight:bold;
font-size:.8em;
background-image:url(images/vertical06.jpg);
background-repeat:no-repeat;
background-position:00;
}
#navcontainera:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
border-top:1pxsolid#333;
border-left:1pxsolid#333;
border-bottom:1pxsolid#fff;
border-right:1pxsolid#fff;
background-image:url(images/vertical06a.jpg);
background-repeat:no-repeat;
background-position:00;
}
#navcontainerululli{margin:0;}
#navcontainerulula
{
display:block;
padding:5px5px5px30px;
width:125px;
color:#000;
background-color:#C5D8C5;
text-decoration:none;
font-weight:normal;
}
#navcontainerulula:hover
{
color:#000;
background-color:#889E88;
text-decoration:none;
}
ABOUTTHECODE
SomelistswithintheListamaticsitehadtobemodifiedsothattheycouldworkonListamaticssimplelistmodel.Whenindoubt,usetheexternalresourcefirst,oratleastcomparebothmodelstoseewhichonesuitsyourneeds.
检察效果
</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。 |
|