HTML / CSS: горизонтальная полоса / дизайн на сайтах, таких как jQuery

Question

Я уверен, что это просто html / css, но я не знаю, как вызывать панель (поиск по горизонтали в виде горизонтальной полосы всегда приводит к горизонтальному правилу).

http://jquery.com/ имеет один - сероватая полоса, проходящая через верх, отделяющая меню от содержимого страницы. Я хотел бы сделать один из моих собственных.

Answer 1

Есть несколько способов сделать это.

На jquery.com это часть фонового изображения с нанесенным тегом body.

У вас может быть раздел заголовка с фоном, выровненным по низу в виде изображения и нижнего отступа, который предотвращает наложение текста / содержимого этой части. Наконец, вы можете использовать толстую рамку, если вы хотите иметь простой цвет. Я уверен, что есть множество других способов сделать это.

Answer 2

Самое простое решение:

<!-- content above bar goes here -->
<div style="height:30px;background-color:lightgray;clear:both;" ></div>
<!-- content below bar goes here -->

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

Answer 3

Наилучшим способом (на мой взгляд) является метод фонового изображения страницы, если ваш дизайн достаточно статичен. В противном случае создайте div с правильной высотой, установите его фоновое изображение на очень тонкое (1 или 2 пикселя) изображение с правильными свойствами высоты / цвета / градиента и поместите его по оси x.

Я бы избегал метода толстой границы, поскольку он может отображаться по-разному в разных браузерах.

Answer 4

Это BG изображение , которое применяется к тегу body.

body {
    background: #2a3139 url(../images/bg_home_tile_sml.jpg) repeat-x 50% 0;
}

ИМО, это лучший способ добиться этого эффекта.