怎么在百度首頁做網(wǎng)站百度的特點(diǎn)和優(yōu)勢(shì)
html5&css&js代碼 039 元素尺寸
- 一、代碼
- 二、解釋
使用CSS來定義HTML元素的尺寸，并通過不同的計(jì)量單位來設(shè)置元素的大小。
一、代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>CSS定義元素尺寸示例</title><style>body {background-color: #1e1e1e; /* 頁面背景色 */color: #e0e0e0; /* 文本色 */font-family: "Microsoft YaHei", Arial, sans-serif; /* 字體 */padding: 20px;margin: 0; /* 移除默認(rèn)邊距 */}.container {max-width: 800px; /* 容器最大寬度 */margin: auto; /* 容器居中 */background-color: #282c34; /* 容器背景色 */padding: 20px; /* 容器內(nèi)邊距 */border-radius: 8px; /* 容器圓角 */overflow: hidden; /* 清除浮動(dòng) */}h1 {text-align: center; /* 標(biāo)題居中 */color: #61afef; /* 標(biāo)題顏色 */margin-bottom: 20px; /* 增加標(biāo)題下方的間距 */}.example {margin-bottom: 30px; /* 示例間距 */}.example-title {font-size: 1.2em; /* 標(biāo)題字體大小 */color: #c5c5c5; /* 標(biāo)題顏色 */margin-bottom: 15px; /* 增加標(biāo)題下方的間距 */}.尺寸示例 {border: 2px solid #61afef; /* 邊框樣式，藍(lán)色 */padding: 20px; /* 內(nèi)邊距 */text-align: center; /* 文本居中 */margin: 0 auto 15px; /* 間距，自動(dòng)水平居中 */display: block; /* 塊級(jí)元素 */border-radius: 6px; /* 圓角邊框 */background-color: #3c3f42; /* 背景顏色 */width: 100px; /* 示例寬度 */height: 200px; /* 示例高度 */}#百分比示例 {width: 50%; /* 寬度為父容器的50% */height: 25%; /* 高度為父容器的25% */}#視口示例 {width: 30vw; /* 寬度為視口寬度的30% */height: 20vh; /* 高度為視口高度的20% */}#em示例 {width: 10em; /* 寬度為當(dāng)前字體大小的10倍 */height: 5em; /* 高度為當(dāng)前字體大小的5倍 */}#rem示例 {width: 5rem; /* 寬度為根元素字體大小的5倍 */height: 3rem; /* 高度為根元素字體大小的3倍 */}</style>
</head>
<body><div class="container"><h1>CSS定義元素尺寸示例</h1><div class="example"><div class="尺寸示例" id="像素示例">像素(px) 示例</div><div class="example-title">像素(px) 示例</div></div><div class="example"><div class="尺寸示例" id="百分比示例">百分比(%) 示例</div><div class="example-title">百分比(%) 示例</div></div><div class="example"><div class="尺寸示例" id="視口示例">視口單位(vw, vh) 示例</div><div class="example-title">視口單位(vw, vh) 示例</div></div><div class="example"><div class="尺寸示例" id="em示例">em 示例</div><div class="example-title">em 示例</div></div><div class="example"><div class="尺寸示例" id="rem示例">rem 示例</div><div class="example-title">rem 示例</div></div></div></body>
</html>
二、解釋
這個(gè)HTML示例頁面展示了如何使用CSS來定義HTML元素的尺寸，并通過不同的計(jì)量單位來設(shè)置元素的大小。頁面采用了深色調(diào)的設(shè)計(jì)風(fēng)格，以黑色和灰色為主色，以增強(qiáng)視覺效果和對(duì)比度。下面是對(duì)示例中每個(gè)部分的文字說明：
- 頁面整體樣式：
- 頁面背景色設(shè)置為深灰色（#1e1e1e），文字顏色為淺灰色（#e0e0e0），以便在深色背景上清晰可見。
- 頁面中的主要容器（.container）背景色為更深的灰色（#282c34），并設(shè)置了圓角邊框，以提供一致的視覺效果。
- 標(biāo)題（h1和h2）顏色設(shè)置為亮藍(lán)色（#61afef），以吸引注意力并突出顯示。
- 尺寸示例元素：
- 每個(gè)尺寸示例元素（尺寸示例）都有一個(gè)藍(lán)色的邊框（2px solid #61afef），以便直觀地展示元素的邊界。
- 元素內(nèi)部填充（padding）為20px，確保內(nèi)容與邊框之間有足夠的空間。
- 文本居中對(duì)齊，以便在頁面上整潔地展示。
- 元素水平居中顯示，并設(shè)置了圓角邊框，增強(qiáng)了視覺效果。
- 不同計(jì)量單位的演示：
- 像素(px) 示例：展示了如何使用像素作為尺寸單位，定義了一個(gè)100像素寬、200像素高的元素。
- 百分比(%) 示例：演示了如何使用百分比來設(shè)置元素的寬度和高度，這里元素寬度為父容器寬度的50%，高度為父容器高度的25%。
- 視口單位(vw, vh) 示例：介紹了視口單位的使用，元素寬度設(shè)置為視口寬度的30%，高度為視口高度的20%。
- em 示例：展示了em單位的使用，元素寬度為當(dāng)前字體大小的10倍，高度為5倍。
- rem 示例：演示了rem單位的使用，元素寬度和高度分別為根元素字體大小的5倍和3倍。
這個(gè)示例頁面不僅展示了如何使用CSS來設(shè)置元素的尺寸，還通過實(shí)際的視覺效果幫助理解不同計(jì)量單位的工作原理。通過這種方式，開發(fā)者和設(shè)計(jì)師可以更好地掌握如何在實(shí)際項(xiàng)目中應(yīng)用這些單位來創(chuàng)建響應(yīng)式和適應(yīng)不同屏幕尺寸的設(shè)計(jì)。