CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

🔍 搜尋結果：縮圖

🚀 5 個專業技巧，打造無與倫比的 GitHub 自述文件！ 🥊

0個讚 0留言 103瀏覽

小編精選 - 技術文章翻譯 · 11月12日

使用 CSS 建立漂亮的 HTML 表格

原文出處：https://dev.to/dcodeyt/creating-beautiful-html-tables-with-css-428l 讓您的 HTML 表格看起來很棒很容易 - 在今天的帖子中，我們將看看大約 30 行 CSS 來做到這一點！ https://www.youtube.com/watch?v=biI9OFH6Nmg ### 寫 HTML 讓我們為該表編寫一些樣板 HTML 程式碼。 ``` <table class="styled-table"> <thead> <tr> <th>Name</th> <th>Points</th> </tr> </thead> <tbody> <tr> <td>Dom</td> <td>6000</td> </tr> <tr class="active-row"> <td>Melissa</td> <td>5150</td> </tr>  </tbody> </table> ``` 請注意，我們有兩個類別： * `.styled-table` 這樣我們就不會竄改網站上的每個 `<table>` * `.active-row` 將是「活動」行 - 這個類別用於突出顯示特定行並將獲得它自己的 CSS，我們很快就會看到 ### 表格樣式讓我們先定位主要的「<table>」元素： ``` .styled-table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 400px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } ``` 其中大部分都是不言自明的，但讓我們來看看主要的： * `box-shadow` 在桌子周圍加入微妙的透明陰影 * `border-collapse` 確保單元格邊框之間沒有空格 ### 設定標題樣式對於標題，我們可以簡單地更改背景顏色並對文字應用一些基本樣式： ``` .styled-table thead tr { background-color: #009879; color: #ffffff; text-align: left; } ``` ### 移至表格儲存格讓我們把事情分開一點： ``` .styled-table th, .styled-table td { padding: 12px 15px; } ``` ### 以及表格行... 為此，我們要做三件事： 1. 為每行新增下邊框進行分隔 2. 每隔一行新增淺色背景以提高可讀性 3. 在最後一行加上深色邊框以表示表格的結尾 ``` .styled-table tbody tr { border-bottom: 1px solid #dddddd; } .styled-table tbody tr:nth-of-type(even) { background-color: #f3f3f3; } .styled-table tbody tr:last-of-type { border-bottom: 2px solid #009879; } ``` ### 最後，讓活動行看起來有所不同為此，我們只需對文字進行更改： ``` .styled-table tbody tr.active-row { font-weight: bold; color: #009879; } ``` **就是這樣！** 如果您有任何改進建議，請在下面的回覆中告訴我 😁 ## [立即報名👉 JavaScript DOM 速成課程](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1) 如果您正在學習 Web 開發，您可以在下面的連結中找到有關 JavaScript DOM 的完整課程👇 [https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1](https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1) ![課程縮圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2z3timz15pb93howzzk.jpg)

0個讚 0留言 250瀏覽

我愛JS · 10月17日

JS教學-文章縮圖預覽，夢幻連動的腳本教學！

## 前情提要常常寫文章的時候都會運用到圖文並茂，如果可以設定文章的圖片封面就是一個很棒的設計。今天的JS腳本教學已經夢幻連動！原本IT幫的文章與codeLove像是平行宇宙，只有偶爾轉載，現在，教學內容直接來針對codelove來寫一個小小有趣小功能XD ## 目標設計今天以codelove這個論壇為例，讓我們來手動創造一個小腳本：分析文章內容，以正則去匹配圖片網址，然後透過create的API寫出div，並且監聽事件，當點擊圖片的時候，把圖片網址放到封面圖片的input欄位。 ## 效果會根據textArea change的時候來匹配出網址。並且創建div與img元素去放入網頁。 ![](https://i.imgur.com/sHcMDU8.png) 點圖片後會把圖片網址丟入。 ![](https://i.imgur.com/MWhkOB7.png) ## 程式碼內容 ``` // 獲取textarea元素 var textarea = document.querySelector("body > div.container.px-0 > div > div.col-12.col-lg-9 > div > div > form > textarea"); var featuredImageInput = document.querySelector('input[name="featured_image"]'); textarea.addEventListener('change', function(event) { // 檢查是否存在imgBox元素 let imgBoxCheck = document.querySelector('.imgBox'); if (imgBoxCheck) { // 如果存在，則刪除imgBox元素 imgBoxCheck.parentNode.removeChild(imgBoxCheck); } // 獲取文本框的內容 var ContentText = textarea.value; // 創建一個空數組來存儲圖片鏈接 var imgArray = []; // 使用正則表達式查找圖片鏈接 var urlRegex = /https?:\/\/[^\s/$.?#].[^\s]*/gi; // 匹配以http或https開頭的鏈接 var matches = ContentText.match(urlRegex); if (matches) { // 疊代所有匹配項並篩選出以.png或.jpg結尾的鏈接 for (var i = 0; i < matches.length; i++) { if (matches[i].match(/\.(png|jpg)$/i)) { imgArray.push(matches[i]); } } } // 使用正則表達式匹配鏈接部分 var regex = /!\[\]$([^)]+)$/g; var match; while ((match = regex.exec(ContentText)) !== null) { imgArray.push(match[1]); } // 創建一個包含圖片的容器div（imgBox）並設置為display: flex let imgBox = document.createElement('div'); imgBox.className = 'imgBox'; // 添加類名 imgBox.style.display = 'flex'; // 平均分配圖片大小 var imageSize = 100 / imgArray.length; // 假設100%寬度，根據圖片數量計算每張圖片的寬度 // 將圖片鏈接轉換為img元素並插入到imgBox imgArray.forEach(function (imgUrl) { var imgDiv = document.createElement('div'); var img = document.createElement('img'); img.src = imgUrl; img.className = 'imgCover'; img.addEventListener('click', function () { // 設置name="featured_image"的輸入框的值為被點擊圖片的src屬性 featuredImageInput.value = img.src; }); // 設置img的寬度為100% img.style.width = '100%'; img.style.height = '100%'; imgDiv.appendChild(img); imgBox.appendChild(imgDiv); }); // 將imgBox插入到textarea後面 h5.insertAdjacentElement('afterend', imgBox); textarea.style.overflow = 'auto'; imgBox.style.border="5px solid gray" imgBox.style.marginTop="5px" }); // 創建一個包含CSS規則的<style>元素 var style = document.createElement('style'); style.type = 'text/css'; style.textContent = '.imgBox:hover .imgCover:not(:hover) { filter: grayscale(100%); opacity: 0.75; }'; // 將<style>元素添加到<head>中 document.head.appendChild(style); h5= document.createElement('h5') h5.innerText='請選擇你的文章縮圖：' h5.style.marginTop="50px" h5.style.fontSize="16px" textarea.insertAdjacentElement('afterend', h5); ``` ## 觀念筆記這次的腳本內容其實沒有太多新的知識點，算是一個很好的複習。 querySelector addEventListener insertAdjacentElement forEach 以及正則表達式的使用。 ## 心得後記網頁上的功能，其實就是這些基礎的運用配合起來！(°ཀ°) 所以不用擔心前端沒有東西練習，其實點子四處都有，練習也都很實用。而不是每次都在重複輪迴相同的東西、感到疲倦！這次的前端小試身手就帶來一個回鍋菜，下次敬請期待更有趣的變化。喜歡記得追蹤或留言唷。還沒挑戰過此系列其他內容的，可以試著去挑戰看看◑ω◐

2個讚 1留言 263瀏覽

小編精選 - 技術文章翻譯 · 12月15日

36 個免費、漂亮的 React UI 模板與主題套件

0個讚 0留言 2,566瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）