概述
HTML 和 CSS 是我們可以創(chuàng)建任何形狀和任何框架的技術(shù)。要?jiǎng)?chuàng)建一個(gè)填充顏色的框可以使用 HTML 來(lái)實(shí)現(xiàn),因?yàn)槲覀兛梢越柚?HTML 創(chuàng)建一個(gè)簡(jiǎn)單的框框架,并且可以使用 CSS 屬性來(lái)填充顏色。我們還可以使用 HTML“svg”(標(biāo)量矢量圖形)屬性來(lái)繪制一個(gè)框,還可以使用填充顏色屬性來(lái)填充框的顏色。
語(yǔ)法
使用 svg 創(chuàng)建盒子并填充顏色的語(yǔ)法如下所示。其中包含x、y、寬度、高度和填充四個(gè)屬性。因此,x 軸設(shè)置框相對(duì)于屏幕的水平位置,y 軸設(shè)置垂直位置,高度設(shè)置框的高度,寬度設(shè)置框的寬度,填充屬性設(shè)置框內(nèi)的顏色框。
<svg> <rect x=“” y=“” width=“” height=“” fill=“” /> </svg>
登錄后復(fù)制
算法1
在文本編輯器中創(chuàng)建一個(gè) HTML 文件,其中包含 HTML 樣板。
現(xiàn)在將 svg 標(biāo)記添加到 HTML 正文中。
<svg></svg>
登錄后復(fù)制
現(xiàn)在使用 語(yǔ)義標(biāo)記在 svg 標(biāo)記內(nèi)創(chuàng)建一個(gè)框。
<rect/>
登錄后復(fù)制
現(xiàn)在在 標(biāo)記中設(shè)置屬性,例如 x、y、寬度、高度和填充。
<rect width="100" height="100" fill="green" />
登錄后復(fù)制
現(xiàn)在打開(kāi)瀏覽器,您將看到一個(gè)填充顏色的框。
示例 1
在此示例中,我們將使用 HTML svg 標(biāo)簽在 屬性的幫助下繪制一個(gè)框。
<html> <head> <title> create box using svg </title> </head> <body> <h3> Created using svg </h3> <svg> <rect width="100" height="100" fill="green" /> </svg> </body> </html>
登錄后復(fù)制
算法2
在文本編輯器上創(chuàng)建一個(gè) index.html 文件,并向該文件添加 HTML 樣板
現(xiàn)在將 div 容器添加到 HTML 正文
<div></div>
登錄后復(fù)制
現(xiàn)在將內(nèi)部樣式標(biāo)記添加到 HTML 的 head 標(biāo)記中。
<style></style>
登錄后復(fù)制
現(xiàn)在使用 CSS 樣式屬性設(shè)置框的高度、寬度和顏色。
<style> div{ width: 10rem; height: 10rem; background-color: green; } </style>
登錄后復(fù)制
打開(kāi)瀏覽器,盒子創(chuàng)建成功,并填充顏色。
示例 2
在此示例中,我們將創(chuàng)建一個(gè)帶有 HTML div 容器的框,并將使用 CSS 樣式屬性來(lái)填充框中的顏色。
<html> <head> <title> create u=box using simple HTML and CSS</title> <style> div{ width: 10rem; height: 10rem; background-color: green; } </style> </head> <body> <div></div> </body> </html>
登錄后復(fù)制
結(jié)論
正如我們使用 svg(標(biāo)量矢量圖形)創(chuàng)建一個(gè)盒子一樣,我們也可以用它創(chuàng)建許多不同的形狀。創(chuàng)建填充顏色的框的最佳方法是使用帶有一些 CSS 樣式屬性的簡(jiǎn)單 div 容器,因?yàn)槭褂?CSS,您可以在單獨(dú)的樣式表中輕松自定義框。在小型項(xiàng)目中,使用 svg 似乎并不困難,但如果您必須多次構(gòu)建相同的盒子,那么多次編寫(xiě)相同的代碼是一項(xiàng)艱巨的任務(wù)。如果您不想更改框的位置,則不必將“x”和“y”屬性與“”一起使用。這些類(lèi)型的框用于加載動(dòng)畫(huà)或可以用作顯示信息的卡片
以上就是你如何在HTML/CSS中創(chuàng)建一個(gè)填充有顏色的盒子?的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章!