大家用CSS寫一個極簡風格的小鍵盤，和之前做擬態風格按鈕的思路是一樣的，都是通過多層陰影疊加起來形成這種立體感。元素非常簡單，現在寫了一些基本的樣式，其它樣式重新來寫。

·現在是一個帶有圓角和漸變色的小方塊，就這樣子在這里。接下來把它的陰影一層一層的畫出來，繼續。現在疊加了右下角的這塊陰影，看起來就有一種懸浮的感覺了。

·接下來寫個偽元素，通過定位配合一下inset，把它的盒子大小撐開，同樣也是給個漸變顏色，再加一點圓角來看一下。

·接下來寫偽元素的陰影，這一層也是比較淡的，在右下角的一層陰影來看一下，沒有問題，右下角這些地方加了一層。

·接下來給偽元素的上邊、下邊和左邊都加一點邊框，看起來更加有質感一點。這里放大給大家看，加了一點邊框，這三個方向都加了。

·接下來再給外面span加兩層內陰影，現在這個是加在右邊了，刷新沒有問題，相當于在這個按鍵的底部又加了一層，這樣這個按鍵的樣式就寫好了。

·接下來就多寫幾個按鍵，都是套用這個樣式，再把上面的字母寫上去就可以了。C這個字母出來了，剩下幾個都是一樣的，直接寫出來，沒問題。

·在CSS這里換一下行，再來個空格鍵，最后一個讓它的寬度撐滿。

這個視頻就到這里，感謝大家的收看。

.字符串replaceAll()方法

要在 JavaScript 中從字符串中刪除所有空格，請在字符串上調用 replaceAll() 方法，將包含空格的字符串作為第一個參數傳遞，將空字符串 ('') 作為第二個參數傳遞。 例如， str.replaceAll(' ', '') 從 str 中刪除所有空格。

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC

String replaceAll() 方法返回一個新字符串，其中模式的所有匹配項都被替換替換。 第一個參數是要匹配的模式，第二個參數是替換。 因此，將空字符串作為第二個參數傳遞會用空替換所有空格，從而將它們刪除。

筆記

JavaScript 中的字符串是不可變的，replaceAll() 返回一個新字符串而不修改原始字符串。

const str = 'A B C';
const allSpacesRemoved = str.replaceAll(' ', '');console.log(allSpacesRemoved); // ABC// Original not modified
console.log(str); // A B C

2.字符串replace()方法和正則表達式

或者，我們可以通過調用字符串的 replace() 方法從字符串中刪除所有空格，將匹配任何空格的正則表達式作為第一個參數傳遞，并將空字符串 ('') 作為第二個參數。

const str = 'A B C';
const allSpacesRemoved = str.replace(/ /g, '');console.log(allSpacesRemoved); // ABC

我們使用 g 正則表達式標志來指定字符串中的所有空格都應該匹配。 如果沒有這個標志，只有第一個空格會被匹配和替換：

const str = 'A B C';// No 'g' flag in regex
const spacesRemoved = str.replace(/ /, '');// Only first space removed
console.log(spacesRemoved); // AB C

String replace() 方法返回一個新字符串，其中所有匹配項都替換為傳遞給它的第二個參數。 我們傳遞一個空字符串作為第二個參數，以將所有空格替換為空，從而將它們刪除。

筆記

與 replaceAll() 一樣，replace() 返回一個新字符串而不修改原始字符串。

const str = 'A B C';
const spacesRemoved = str.replace(/ /g, '');console.log(spacesRemoved); // ABC// Original not modified
console.log(str); // A B C

小費

我們指定的正則表達式只匹配字符串中的空格。 要匹配和刪除所有空白字符（空格、制表符和換行符），我們必須使用不同的正則表達式：

const str = 'A B C \t D \n E';
const whitespaceRemoved = str.replace(/\s/g, '');console.log(whitespaceRemoved); // ABC

關注七爪網，獲取更多APP/小程序/網站源碼資源！

天的主題是網頁編程中的水平線。

同學們好，今天我來分享一些免費的少兒編程知識。只要每天堅持學習一行代碼，你也可以成為編程高手！今天我們要學習如何在HTML中插入一條水平線，使用的是HR標簽。HR是一個自閉合標簽，雖然它沒有標準的屬性，但我們可以通過CSS來控制它的外觀。

先來看看我們的實例效果。在頁面上，兩行文字被一條直線分開。這條直線就是HR標簽，效果已經展示出來了。現在我們來看看實現的代碼。HR標簽的寫法非常簡單，但在最開始的時候，它有四個屬性，現在已經不被標準支持了。盡管如此，我們仍然可以使用它。

今天的實例中，我們已經將這些標簽加入到了代碼中。如果你感興趣，可以查看下方的代碼。按下空格鍵可以看到過時的屬性不會被智能提示，但這并不影響代碼的正確性。將注釋取消后保存，然后回到瀏覽器刷新，可以看到屬性仍然有效。線條的高度為3，寬度為400，并且居中顯示。取消陰影后，線條將變為純色。

這只是一個演示，你可以參考一下。從這個示例中，我們可以看到，HR標簽的寬度是根據頁面寬度自動調整的。當它的寬度達到整個瀏覽器時，它會自動換行。既然屬性已經過時了，那么我們如何通過HTML來控制外觀呢？CSS是我們今天要學習的內容。

先取消注釋的代碼，讓HTML失效，然后保存。回到瀏覽器刷新，就可以看到線條變成了藍色。

今天的分享就到這里，希望各位同學可以試著寫三遍，不需要看視頻也可以掌握這個技巧。如果你需要案例和相關文檔，可以向我咨詢。

我們下期再見，想學習編程的同學記得關注哦。