如何使用CSS设计链接列表的样式？

关于如何使用CSS在小型小部件中设置这些链接以使用css查看热度的任何提示？（这里是我的html代码）如何使用CSS设计链接列表的样式？

我会爱干净和简单的布局

<div id="related_links"> 
    <ul> 
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li> 
    <li><a alt="SQL Server Performance Tuning" title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li> 
    <li><a alt="SQL Server Audit Service" title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li> 
    <li><a alt="Upgrade to Microsoft SQL 2008" title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li> 
    </ul> 
</div>

来源

2010-10-22 kacalapy

alt标签不允许在锚标签上。改用标题 – skyfoot 2010-10-22 15:35:29

这是非常主观的。你希望他们看起来如何？ – Cfreak 2010-10-22 15:37:24

你的侧面部件有多大？你有一个它正在被放置的页面的例子吗？ – vol7ron 2010-10-22 16:21:57

我想列表分开已经涵盖了很多年前： http://www.alistapart.com/articles/taminglists/

垂直

（信用：除了列表）

#related_links { 
    width: 12em; 
    border-right: 1px solid #000; 
    padding: 0 0 1em 0; 
    margin-bottom: 1em; 
    font-family: 'Trebuchet MS', 'Lucida Grande', 
    Verdana, Lucida, Geneva, Helvetica, 
    Arial, sans-serif; 
    background-color: #90bade; 
    color: #333; 
    } 

#related_links ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: none; 
    } 

#related_links li { 
    border-bottom: 1px solid #90bade; 
    margin: 0; 
    } 

#related_links li a { 
    display: block; 
    padding: 5px 5px 5px 0.5em; 
    border-left: 10px solid #1958b7; 
    border-right: 10px solid #508fc4; 
    background-color: #2175bc; 
    color: #fff; 
    text-decoration: none; 
    width: 100%; 
    } 

html>body #related_links li a { 
    width: auto; 
    } 

#related_links li a:hover { 
    border-left: 10px solid #1c64d1; 
    border-right: 10px solid #5ba3e0; 
    background-color: #2586d7; 
    color: #fff; 
    }

水平

这里几乎是，我已经感动了一些格式相同的例子变化。

#related_links { 
    background-color : #90bade; 
    color    : #333; 
    font-family  : Tahoma; 
    font-size   : .7em; 
    padding   : 1em; 
    } 

#related_links li { 
    border-bottom  : 1px solid #90bade; 
    list-style-type : none; 
    display   : inline-block; 
    } 

#related_links li a { 
    background-color : #2175bc; 
    color    : #fff; 
    border-left  : 10px solid #1958b7; 
    border-right  : 10px solid #508fc4; 
    font-weight  : bold; 
    padding   : .5em; 
    text-decoration : none; 
    } 

#related_links li a:hover { 
    background-color : #2586d7; 
    color    : #fff; 
    border-left  : 10px solid #1c64d1; 
    border-right  : 10px solid #5ba3e0; 
    }

如果你不想背景横跨整个屏幕

#related_links, #related_links ul{ 
    display   : inline; 
    }

如何删除空格

要在项目之间删除空格呢，你就必须要么浮动列表项目或删除一个结尾和另一个结尾之间的空格： From：

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
<ul>

要：

<ul> 
     <li>1</li 
    ><li>2</li><!-- 
    --><li>3</li> 
<ul>

注：1后，该方法不会结束列表标签，直到下一行，不允许两个列表项之间的空白。方法2是类似的，但它使用注释来忽略第二个和第三个列表项之间的任何空格。

同样，你可能永远都只是浮在li在CSS

来源

2010-10-22 15:42:28 vol7ron

啊，那篇文章 - 这样的美好回忆:) – ndorfin 2010-10-22 15:45:21

它似乎是只是昨天div /跨度介绍:) – vol7ron 2010-10-22 15:47:24

你可以去这个问题在很多方面。

从网站上的任何其他环节单独的相关链接请执行以下操作：

#related_links a { 

}

记得添加悬停和链接样式，以及：

#related_links a:hover { 

    } 

    #related_links a:link { 

    }

来源

2010-10-22 15:36:55 skyfoot

他们关键在于风格的一个标签，并“清除”列表。

#related_links ul, #related_links li { 
    list-style-type:none; 
    margin:0; 
    padding:0 
} 

/* this is for a horizontal menu if you want one */ 
#related_links li { 
    float:left; 
} 

#related_links a { 
    display:block; 
    background-color:#202020; 
    color:#ffffff; 
    padding:5px; 
    margin-right:2px; 
    margin-bottom:2px; 
}

来源

2010-10-22 15:39:55

-1

把所有这些链接到一个类

<div id="related_links"> 
    <ul class="stylelinks"> 
    <li><a title="SQL Server Performance Tuning" href="/Database.aspx">SQL Services</a></li> 
    <li><a title="SQL Server Performance Tuning" href="/Database/MSSQLServerPerformanceTuning.aspx">Performance Tuning</a></li> 
    <li><a title="SQL Server Audit Service" href="/Database/SQLServerAuditService.aspx">SQL Auditing</a></li> 
    <li><a title="Upgrade to Microsoft SQL 2008" href="/Database/SQLServer2008.aspx">SQL 2008</a></li> 
    </ul> 
</div>

和CSS样式表将有

<style type="text/css"> 
ul.stylelinks { 
color: #666666; /*do your desired styling*/ 
} 
</style>

更多的效果可以使用补充说：

ul.stylelinks a:hover { 

} 
ul.stylelinks a:active { 

} 
ul.stylelinks a:link { 

} 
ul.stylelinks a:visited { 

}

来源

2010-10-22 15:41:15

没有必要添加一个类，如果他有一个父ID的工作。 – ndorfin 2010-10-22 15:42:38

你不需要上课。一切都可以从它的包装器继承。 – 2010-10-22 15:42:40

类需要添加，如果你想做一个小部件，如果你想要一个按钮或链接，这样就不需要样式化..你不能期望新的按钮/或类似的东西继承相同的属性..它是聪明的尽可能将css影响限制在更小的区域。 :) – 2010-10-22 15:47:38

不同的，简单的答案

 

#related_links span 
{ 
    display: block 
}

然后换你的跨度链接（锚标记）。例如：

 

<div id="related_links"> 
<span>&lta ... stuff .. >some text</a></span> 
<span>&lta ... different stuff .. >different text text</a></span> 
</div>

来源

2010-10-22 15:47:26 DwB

如何使用CSS设计链接列表的样式？

回答

垂直

水平

如果你不想背景横跨整个屏幕

如何删除空格

相关问题