Список в стиле HTML - PullRequest
Новая
       3

Список в стиле HTML

0 голосов
/ 28 ноября 2011

Я только что посмотрел исходный код Google и увидел, что боковая панель создана из тегов <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>

не тихо сработало, есть ли какая-нибудь техника, которую я могу использовать, чтобы сделать то же самое, что и Google, и создать список без следующей точки?

Ответы [ 4 ]

4 голосов
/ 28 ноября 2011

Чтобы избавиться от точек, просто добавьте следующий CSS: 

ul {
  list-style: none;
}
1 голос
/ 28 ноября 2011

да - ответ 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 - все современные панели навигации являются списками..

0 голосов
/ 28 ноября 2011

По умолчанию список содержит маркеры, а также некоторые поля и отступы. 

<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; }

Далее вы можете изменить ссылкуили якорные теги, чтобы иметь ширину и высоту и цвет фона.

Ссылки по умолчанию являются встроенными элементами, что означает, что они не заставляют новую строку, а текут внутри строки. Мне нужно, чтобы они отображались как блокэлемент, чтобы я мог его стилизовать. 

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 ive уникальный идентификатор или класс.Идентификатор используется для выбора отдельного элемента.

Но если у вас много элементов, используется класс.

"#" для идентификаторов и "."Для занятий.

Пример: 

<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

0 голосов
/ 28 ноября 2011

Помимо удаления маркеров / точек в CSS, вы также можете сбросить поля на margin: 0px, если вы хотите, чтобы элементы списка верхнего уровня находились на одном уровне с левой стороной их контейнера.

В большинстве браузеров простое удаление маркеров все еще оставляет пустое пространство там, где они обычно находятся.

...