Как рисовать прямоугольник в HTML или CSS?

Я пытаюсь нарисовать прямоугольник, и я нашел сайт для кода css (http://css-tricks.com/examples/ShapesOfCSS/). Как мне составить HTML? Другими словами, как определить #rectangle в HTML.

Facebook всегда имеет синий прямоугольник в верхней части каждой страницы. Каков наилучший способ достижения таких результатов?

Я ценю, если кто-то может мне помочь.

Ответы

Ответ 1

Fiddle

HTML

<div id="rectangle"></div>

CSS

#rectangle{
    width:200px;
    height:100px;
    background:blue;
}

Я настоятельно рекомендую вам прочитать о селекторах CSS и основы HTML.

Ответ 2

Используйте <div id="rectangle" style="width:number px; height:number px; background-color:blue"></div>

Это создаст синий прямоугольник.

Ответ 3

SVG

Рекомендую использовать SVG для графических элементов. При использовании CSS для стилизации ваших элементов.

#box {
  fill: orange;
  stroke: black;
}

<svg>
  <rect id="box" x="0" y="0" width="50" height="50"/>
</svg>

Ответ 4

отображаемый css должен применяться к элементу блока, например div. Итак:

<div id="#rectangle"></div>

Ответ 5

Чтобы имитировать прямоугольник с фиксированным положением на facebook, попробуйте что-то вроде этого:

<div id="rectangle"></div>

CSS

#rectangle {
    width:100%;
    height:60px;
    background:#00f;
    position:fixed;
    top:0;
    left:0;
}

Ответ 6

В моих списках eBay я делаю следующее:

<p style="border:solid thick darkblue; border-radius: 1em; 
          border-width:3px; padding-left:9px; padding-top:6px; 
          padding-bottom:6px; margin:2px; width:980px;">

Это создает рамку с закругленными углами. Вы можете играть с переменными.

Ответ 7

На странице HTML вы должны поместить свой код css между тегами, а в теле - div, который имеет как прямоугольник id. Здесь код:

<!doctype>
<html>
<head>
<style>
#rectangle 
{
   all your css code
}
</style>
</head>
<body>
<div id="rectangle"></div>
</body>
</html>

Ответ 8

CSS

.example {
    display: table;
    width: 200px;
    height: 200px;
    background: #4679BD;
}

HTML:

<div class="retangulo">
   
</div>

Ответ 9

Вам нужно идентифицировать свои разделы, а затем стилизовать их с помощью CSS. В этом случае это может работать:

HTML

<div id="blueRectangle"></div>

CSS

#blueRectangle {
    background: #4679BD;
    min-height: 50px;
    //width: 100%;
}

http://jsfiddle.net/7PJ5q/