blocks|key|4685806|text|Fiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4685807|HTML|4685808|<div+id="rectangle"></div>|code-block|syntax|javascript|4685809|CSS|4685810|#rectangle{
++++width:200px;
++++height:100px;
++++background:blue;
}|4685811|我强烈建议您阅读有关CSS+selectors和the+basics+of+HTML的内容。|4685812|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/brMPs/|1|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors|2|https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction^0|0|6|0|0|0|0|0|0|A|D|1|O|I|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|18|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]|$A|1E|B|1F|1|1G]]|C|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]|10|$5|T|U|V|C|$W|11]]]]

<p><a href="http://jsfiddle.net/brMPs/">Fiddle</a></p>

<p>HTML</p>

<pre><code>&lt;div id="rectangle"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#rectangle{
    width:200px;
    height:100px;
    background:blue;
}
</code></pre>

<p>I strongly suggest you read about <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors">CSS selectors</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">the basics of HTML</a>.</p>


blocks|key|4685843|text|使用<div+id="rectangle"+style="width:number+px;+height:number+px;+background-color:blue"></div>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4685844|这将创建一个蓝色矩形。|4685845|entityMap^0|2|2J|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

<p>Use <code>&lt;div id="rectangle" style="width:number px; height:number px; background-color:blue"&gt;&lt;/div&gt;</code> </p>

<p>This will create a blue rectangle.</p>


blocks|key|179970|text|SVG|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179971|建议对图形元素使用svg。同时使用css设置元素的样式。|179972|​|179973|#box+{
++fill:+orange;
++stroke:+black;
}|code-block|syntax|javascript|179974|<svg>
++<rect+id="box"+x="0"+y="0"+width="50"+height="50"/>
</svg>|179975|179976|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<h1>SVG</h1>

<p>Would recommend using svg for graphical elements.
While using css to style your elements.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#box {
  fill: orange;
  stroke: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg&gt;
  &lt;rect id="box" x="0" y="0" width="50" height="50"/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|179770|text|您显示的css必须应用于块元素，如div。所以：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179771|<div+id="#rectangle"></div>|code-block|syntax|javascript|179772|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>the css you are showing must be applied to a block element, like a div.
So :</p>

<pre><code>&lt;div id="#rectangle"&gt;&lt;/div&gt;
</code></pre>


blocks|key|179908|text|我在我的eBay清单中执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179909|<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;">|code-block|syntax|javascript|179910|这会产生一个方框边框，带有圆角的corners.You可以玩的变量。|179911|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I do the following in my eBay listings:</p>

<pre><code>&lt;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;"&gt;
</code></pre>

<p>This produces a box border with rounded corners.You can play with the variables. </p>


blocks|key|179895|text|在HTML页面中，你必须把你的css代码放在标签之间，而在正文中，有一个div，它有一个id矩形。代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179896|<!doctype>
<html>
<head>
<style>
#rectangle+
{
+++all+your+css+code
}
</style>
</head>
<body>
<div+id="rectangle"></div>
</body>
</html>|code-block|syntax|javascript|179897|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In the HTML page you have to to put your css code between the  tags, while in the body a div which has as id rectangle. Here the code:</p>

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


blocks|key|179994|text|css：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179995|.example+{
++++display:+table;
++++width:+200px;
++++height:+200px;
++++background:+#4679BD;
}|code-block|syntax|javascript|179996|html：|179997|<div+class="retangulo">
  +
</div>|179998|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>css:</p>

<pre><code>.example {
    display: table;
    width: 200px;
    height: 200px;
    background: #4679BD;
}
</code></pre>

<p>html:</p>

<pre><code>&lt;div class="retangulo"&gt;
   
&lt;/div&gt;
</code></pre>


blocks|key|4685891|text|您需要确定您的部分，然后使用CSS设置它们的样式。在这种情况下，这可能会起作用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4685892|HTML|4685893|<div+id="blueRectangle"></div>|code-block|syntax|javascript|4685894|CSS|4685895|#blueRectangle+{
++++background:+#4679BD;
++++min-height:+50px;
++++//width:+100%25;
}|4685896|http://jsfiddle.net/7PJ5q/|offset|length|4685897|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|12|8|@]|9|@$O|13|P|14|1|15]]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|N]]]]

<p>You need to identify your sections and then style them with CSS.  In this case, this might work:</p>

<p>HTML</p>

<pre><code>&lt;div id="blueRectangle"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

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

<p><a href="http://jsfiddle.net/7PJ5q/" rel="nofollow">http://jsfiddle.net/7PJ5q/</a></p>


<p>I am trying to draw a rectangle and I found the website for css code(<a href="http://css-tricks.com/examples/ShapesOfCSS/">http://css-tricks.com/examples/ShapesOfCSS/</a>). How do I put together in HTML? In other words, how do I define #rectangle in HTML.</p>

<p>Facebook always has blue rectangle at the top of each page. What is the best way to achieve like them?</p>

<p>I appreciate if someone could help me.</p>


how to draw a rectangle in HTML or CSS?

我正在尝试画一个矩形，我找到了css代码的网站()。如何在HTML中组合在一起？换句话说，我如何在HTML中定义#rectangle。Facebook总是在每个页面的顶部显示蓝色矩形。什么是实现这些目标的最好方法？如果有人能帮我，我将不胜感激。

问如何在HTML或CSS中绘制矩形？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML或CSS中绘制矩形？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML或CSS中绘制矩形？
EN