Question

我刚看过谷歌的源代码，我看到侧栏是根据<ul>和<li>标签创建的，这些标签用于列表。

正如我说的，我看到了他们的侧边菜单栏，我试图做同样的事情，如下所示：http://jsbin.com/oyibok/edit#javascript,html,live

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
  <ul>
    <li> dsds </li>
    <li> dsds </li>
  </ul>
</body>
</html>

不安静，是否有任何技术可以像谷歌一样用来制作一个没有跟随点的列表？

Answer 1

要摆脱这些点，只需添加以下css：

ul {
  list-style: none;
}

Answer 2

是的 - 答案是css。你应该做点什么

ul {
  list-style-type: none; /* look mom - no dots */
}

ul li {
  display:inline; /* look mom - no block display - only if you want a horizontal nav */
}

a {
  text-decoration:none /* look mom - no underline */
}

同样如您所知，如果这是一个导航栏，您可能会将li元素中的链接与a元素放在一起顺便说一句 - 所有现代导航栏都是列表..

Answer 3

除了删除CSS中的项目符号/点之外，如果您希望顶级列表项与其容器的左侧齐平，您可能还需要将边距重置为margin: 0px。

在大多数浏览器中，只需移除子弹仍会留下通常所在的空白区域。

Answer 4

默认情况下，列表包含项目符号，还有一些边距和填充。

<ul>
    <li><a href="">list item 1</a></li>
</ul>

使用CSS，您可以更改列表的显示方式。

<style>
    /* the styles go in between the style tag */
</style>

您可以使用CSS来抓取列表中的每个元素并更改属性。

例如，我通常首先删除列表样式，边距和填充。

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

接下来，您可以更改链接或锚标记，使其具有宽度和高度以及背景颜色。

defaul的链接是内联元素，这意味着它们不会强制换行但是内联流动。我需要将它们显示为块元素，以便我可以设置样式。

ul a:link,
ul a:visited { display:block; width:100px; height:20px; line-height:20px; background:blue;    }

现在，当用户将鼠标悬停在链接上时，您可以再次更改其颜色，CSS堆栈，以便您上面写的所有样式仍然适用，但我们可以覆盖我们选择的任何内容。

ul a:hover { background:orange; }

一些阅读：http://www.w3schools.com/css/css_list.asp

一旦你知道如何使用CSS选择元素，你就可以创建几乎任何东西。

您可以为HTML元素指定唯一的ID或类。 id用于选择其自身的单个元素。

但是如果你有很多元素，就会使用一个类。

＆＃34;＃＆＃34;对于Ids和一个＆＃34;。＆＃34;对于课程。

示例：

<div id="something">some text wrapped in a div with an id</div>

<div class="something">a div with a class</div>
<div class="something">a div with a class</div>
<div class="something">a div with a class</div>

<style>
#something { background:red; }
.something { background:blue; }
</style>

开始 http://jsbin.com/oyibok/5/edit

Html样式列表

4 个答案: