E-mail Comment Del.icio.us Digg Reddit Technorati Furl

样式化侧边栏

三 12, 2010 | wordpress 主题 | Tags:

第一步
在 .sidebar{} 下输入：
.sidebar ul{
list-style-type: none;
margin: 0;
padding: 0 10px 0 10px;
}
现在已经为侧边栏样式化父级无序列表（UL）标签。所有的子 ULs 或者内嵌的

ULs 将会击继承同样的样式。在这里，它是无列表样式，零空白和10像素的填充

。
如下所示：
<ul>
            <li>
                    <ul>
                              <li></li>

                   </ul>

          </li>

</ul>
         第二级的（或内嵌的） UL 继承了第一级 UL 的样式。如果你给了第一级 UL 应用了边框，第二级的 UL 同样也会有个边框。
保存并刷新就可以看到列表条目现在已经没有前面的圆点了。

第二步：
在 .sidebar ul{} 下输入：
.sidebar ul li{
padding: 10px 0 10px 0;
}

第三步
在 .sidebar ul li{} 下输入：
.sidebar ul li h2{
font-family: Georgia, Sans-serif;
font-size: 14px;
}

第四步：
在 .sidebar ul li h2{} 下输入：
.sidebar ul ul li{
padding: 0;
}
在 .sidebar ul ul li{} 中连续的 UL 指明了你是在定义第级别的 LIs。再说一

次，当所有的值都为 0 的时候，你不需要 px 这个后缀。

行距太近的话，可以把行高改成 24px。
增加 line-height: 24px; 到 .sidebar ul ul li{}.
 
另外，如果在 IE 下，搜索框下有多出了额外的空白，在下面增加 form：
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p{
margin: 0;
padding: 0;
}
改成：
body, h1, h2, h3, h4, h5, h6, address, blockquote, dd, dl, hr, p, form{
margin: 0;
padding: 0;
}

看过这篇文章的读者还看过:

留下您的脚印