想做和別人一樣的網頁元件功能，但css好像都讀不到。

html5 元件複製 css

jbuduoo 2020-09-02 10:59:17 ‧ 1782 瀏覽

分享至

請問一下，我想做出左邊的表格效果，我用chrome的檢查找到那一段代碼，複製那一段代碼，和最右邊相關的css

https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element

但做出來的東西卻如下圖

請問一下要怎麼做才能完美複製那一段代碼及css?

我的代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="abc.css">
    <title>Document</title>
</head>

<body>
    <table class="standard-table">
        <thead>
         <tr>
       
          <th scope="col">Element</th>
          <th scope="col">Description</th>
         </tr>
        </thead>
        <tbody>
        
         <tr>
       
          <td style="vertical-align: top;"><a class="new" href="/zh-TW/docs/Web/HTML/Element/base" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><base></code></a></td>
          <td></td>
         </tr>
       
         <tr>
       
          <td style="vertical-align: top;"><a class="new" href="/zh-TW/docs/Web/HTML/Element/head" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><head></code></a></td>
          <td></td>
         </tr>
       
         <tr>
       
          <td style="vertical-align: top;"><a class="new" href="/zh-TW/docs/Web/HTML/Element/link" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><link></code></a></td>
          <td></td>
         </tr>
       
         <tr>
       
          <td style="vertical-align: top;"><a class="new" href="/zh-TW/docs/Web/HTML/Element/meta" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><meta></code></a></td>
          <td></td>
         </tr>
       
         <tr>
       
          <td style="vertical-align: top;"><a class="new" href="/zh-TW/docs/Web/HTML/Element/style" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><style></code></a></td>
          <td></td>
         </tr>
       
         <tr>
       
          <td style="vertical-align: top;"><a class="new" href="/zh-TW/docs/Web/HTML/Element/title" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code><title></code></a></td>
          <td></td>
         </tr>
       
        </tbody>
       </table>
</body>

</html>

我的css

element.style {
}
.text-content table.standard-table:not(.learn-box) {
    border: 2px solid #fff;
}
.text-content table {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: solid #e0e0dc;
    border-width: 1px 0 0 1px;
}
table {
    margin-bottom: 24px;
}
a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
}
user agent stylesheet
table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    border-spacing: 2px;
    border-color: grey;
}
body {
    line-height: 1.6;
    font-family: Arial,x-locale-body,sans-serif;
    letter-spacing: -.00278rem;
    font-size: 18px;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    background: #fff;
    color: #333;
}

japhenchen iT邦超人 1 級 ‧ 2020-09-02 11:30:52 檢舉

css要對應到你自己的HTML的TAG上啊......，複制來的是別人的網頁裡的對應啊

Zed_Yang iT邦新手 3 級 ‧ 2020-09-02 11:36:16 檢舉

額外推薦這個CSS學習遊戲
http://flukeout.github.io/
可以大概了解一下CSS階層關係跟綁定關係
某些關卡不只一種解法
滿有趣的

CSScoke iT邦新手 3 級 ‧ 2020-09-02 16:44:28 檢舉

提到CSS選取器的話，個人推薦『金魚都能懂的CSS選取器』這本書，讓你可以把一些必備的觀念都學起來
https://www.tenlong.com.tw/products/9789864344994?list_name=i-c

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-09-02 15:50:32

最佳解答

沒人這樣copy的。
在debug模式下的css，只會顯示當下選擇對應到的css而已。並非是全部。

正常來說。你該去找標頭查看對應的css檔直接copy下來用就好。
或是直接另存網頁，一般如果是簡單的靜態網頁。會幫你存對應的html、js跟css
在自行研究也是一種方式。

回應
分享
檢舉

登入發表回應

listennn08

iT邦高手 5 級 ‧ 2020-09-02 11:14:41

你從 html 結構下只有擷取部分資料
所以你的 css 也要改變寫法或者在 html 新增父層
舉個例子你複製的 css

.text-content table {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: solid #e0e0dc;
    border-width: 1px 0 0 1px;
}

代表的是在 class 為 text-content下的table
但你 table 外層並沒有 class 為 text-content 的 element
要嘛把 css 裡的 .text-content 拿掉
要嘛在 html 新增 class 為 text-content 的標籤
而 a 標籤的 css 你也並沒有複製到
要用複製的完美複製你就整個 html 都複製下來就好