在本文中，將介紹如何使用純HTML打造屬于自己的實(shí)用網(wǎng)頁效果。

1. 折疊手風(fēng)琴使" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 不寫JavaScript，教你只用純HTML做出幾個(gè)實(shí)用網(wǎng)頁效果

不寫JavaScript，教你只用純HTML做出幾個(gè)實(shí)用網(wǎng)頁效果

時(shí)間：2023-07-05 18:48:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-07-05 18:48:02 來源：網(wǎng)站運(yùn)營

不寫JavaScript，教你只用純HTML做出幾個(gè)實(shí)用網(wǎng)頁效果：在我們以往看到的頁面效果中，很多是需要JS搭配使用的，那如果不寫JS你知道如何實(shí)現(xiàn)嗎？

在本文中，將介紹如何使用純HTML打造屬于自己的實(shí)用網(wǎng)頁效果。

1. 折疊手風(fēng)琴

使用Details和Summary標(biāo)簽可以創(chuàng)建沒有JavaScript代碼的可折疊手風(fēng)琴。

效果：

HTML

<details><summary>Languages Used</summary><p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p></details><details><summary>How it Works</summary><p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p></details>CSS

* { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0;}summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em;}details[open] { padding: .5em;}details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;}瀏覽器支持：

2. 進(jìn)度條

該Meter和Progress 的元素標(biāo)簽的基礎(chǔ)上，你可以調(diào)整屬性呈現(xiàn)在屏幕上的進(jìn)度條。進(jìn)步有兩個(gè)屬性：max和value校準(zhǔn)進(jìn)度條，而Meter標(biāo)簽提供了更多的定制屬性。

效果：

HTML:

<label for="upload">Upload progress:</label><meter id="upload" name="upload" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100</meter><hr/><label for="file">File progress:</label><progress id="file" max="100" value="70"> 70% </progress>CSS:

body { margin: 50px;}label { padding-right: 10px; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}瀏覽器支持：

3. 更多輸入類型

在定義輸入元素時(shí)，您要知道現(xiàn)代瀏覽器已經(jīng)允許您指定足夠多的輸入類型了。除了你應(yīng)該已經(jīng)知道text，email，password，number這些類型外，還有下面的這些。

效果：

HTML:

<label for="date">Enter date:</label><input type="date" id="date"/><label for="datetime">Enter date & time:</label><input type="datetime-local" id="datetime"/><label for="month">Enter month:</label><input type="month" id="month"/><label for="search">Search for:</label><input type="search" id="search"/><label for="tel">Enter Phone:</label><input type="tel" id="tel">CSS:

input, label {display:block; margin: 5px;}input {margin-bottom:18px;}各種新輸入類型的MDN文檔非常廣泛且信息量很大。此外，檢查移動輸入類型以了解用戶在移動瀏覽器上時(shí)這些輸入元素的鍵盤行為。

4. 視頻和音頻

video和audio元素雖然現(xiàn)在已經(jīng)成為HTML規(guī)范的一部分，但是你一樣會驚訝于你可以使用video標(biāo)簽在屏幕上渲染出一個(gè)體面的視頻播放器。

<video controls> <source src="https://addpipe.com/sample_vid/short.mp4" poster="https://addpipe.com/sample_vid/poster.png"> Sorry, your browser doesn't support embedded videos.</video controls>視頻標(biāo)記中值得注意的一些屬性包括：

瀏覽器支持：

5. 校對文本

當(dāng)你想顯示歷史編輯及校對的情況時(shí)，blockquote，del和ins元素標(biāo)簽可以派上用場了。

示例：

HTML：

<blockquote> There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.</blockquote>CSS：

del { text-decoration: line-through; background-color: #fbb; color: #555;}ins { text-decoration: none; background-color: #d4fcbc;}blockquote { padding-left: 15px; line-height: 30px; border-left: 3px solid #d7d7db; font-size: 1rem; background: #eee; width: 200px;}

6.更統(tǒng)一的引號

由于中英文引號的不同，使用<q>標(biāo)記可以讓您很好的解決這個(gè)問題，它可使你的內(nèi)容在大多數(shù)瀏覽器上更一致地呈現(xiàn)引號。

HTML：

Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p><hr/>Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>CSS：

body { margin: 50px;}q { font-style: italic; color: #000000bf;}

7. 鍵盤標(biāo)簽

<kbd>標(biāo)簽應(yīng)該是一個(gè)少為人知的冷門標(biāo)簽，但這個(gè)能使用更好的方式來說明組合鍵的樣式。

HTML：

<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>CSS：

body { margin: 50px;}kbd { display: inline-block; margin: 0 .1em; padding: .1em .6em; font-size: 11px; line-height: 1.4; color: #242729; text-shadow: 0 1px 0 #FFF; background-color: #e1e3e5; border: 1px solid #adb3b9; border-radius: 3px; box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset; white-space: nowrap;}

8.使用HTML共享代碼

使用figcaption pre code標(biāo)簽，您可以使用純HTML和CSS呈現(xiàn)出不錯(cuò)的代碼片段。

HTML：

<figure> <figcaption> Defining a css <code>color</code> property for a class called 'golden' </figcaption> <pre> <code> .golden { color: golden; } </code> </pre></figure>CSS：

pre { background-color: #ffbdbd;}這篇文章也只是拋磚引玉，如果您有更多私藏的使用技巧，不妨也貼出來分享給大家。同時(shí)歡迎訪問葡萄城的原博客與我交流。

另外，如果您不僅僅限于以上的效率，希望有更完整的動態(tài)功能。如：您希望在您的頁面中加入Excel功能，不妨嘗試純前端表格控件SpreadJS，相信它能為您的應(yīng)用增色不少。

原文出處：https://blog.bitsrc.io/pure-html-widgets-for-your-web-application-c9015563af7a

關(guān)鍵詞：實(shí)用,效果

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉