整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          零基礎教你學前端-89、CSS表格

          零基礎教你學前端-89、CSS表格

          次,我們來講解應用 CSS 來裝飾表格。

          如何制作一個表格,我們在HTML課程中已經學習過了。現在,我們通過樣式,讓表格變得更加美觀易用。

          首先來學習如何定義表格邊框。

          要在CSS中指定表格的邊框,可以使用 border 屬性。我們來舉個例子。

          創建 tables.html 文件和 tables-style.css 文件。在 html 里構建基礎代碼,引入外部樣式。

          在 body 里編寫 emmet 命令:table>(tr>th*2)+(tr>td*2)*3,填入一些文本。

          HTML
          <table>
              <tr>
                <th>千鋒名師</th>
                <th>最新作品</th>
              </tr>
              <tr>
                <td>浠浠呀</td>
                <td>《HTML+CSS前端入門》</td>
              </tr>
              <tr>
                <td>陸榮濤</td>
                <td>《Vite學習指南》</td>
              </tr>
              <tr>
                <td>Kerwin</td>
                <td>《Vue2+Vue3全套教程》</td>
              </tr>
            </table>

          在瀏覽器里預覽效果:表格的結構有了,還沒有邊框。大家還記得如何通過 html 屬性定義邊框嗎?可以評論上告訴我。

          現在,我們通過樣式來給表格添加邊框。定義群組選擇器 table, th, td,聲明樣式:border: 1px solid。

          再看效果,表格線出現了,可是外觀上看,線條有點粗。是因為 table、th和td元素都有獨立的邊框。

          CSS
          table, th, td {
            border: 1px solid;
          }

          可以應用 border-collapse 屬性,把表格的邊框折疊成一個單一的邊框。

          回到 CSS,再給 table 元素聲明樣式:border-collapse: collapse。

          此時,表格線變細了。

          CSS
          table {
            border-collapse: collapse;
          }

          當前表格看起來很小,如果我們需要一個橫跨整個屏幕的表格,該如何實現呢?

          回到CSS,再給 table 添加樣式 width: 100%。

          再看一下效果,表格橫向撐滿了整個屏幕。

          接下來,我們來定義表格的寬度和高度。

          width 和 height 屬性用來定義表格的寬度和高度。我們來實驗一下。

          將 table 的 width 屬性修改為 50%,再給 th 聲明樣式 height: 70px。

          我們看,表格寬度縮小了一半,同時表頭的高度也變大到 70px 了。

          接下來,我們來設置表格的對齊方式。

          text-align 屬性用來設置 th 或 td 中內容的水平對齊方式,如居左、居右或居中對齊。默認情況下,th 元素的內容是居中對齊的,td 元素的內容是左對齊的。要使 td 元素的內容也居中對齊,可以使用text-align: center。舉個例子:

          回到CSS,給 td 添加樣式:text-align: center。

          此時,全部 td 里的內容在單元格里水平居中顯示了。

          要使內容左對齊,可以使用 text-align: left 屬性。

          比如將 th 元素的對齊方式改為左對齊。

          CSS
          th {
            height: 70px;
            text-align: left;
          }

          vertical-align 屬性用來設置 th 或 td 中內容的垂直對齊方式。如頂部對齊、底部對齊或中間對齊。默認情況下,對于 th 和 td 元素,表格中內容的垂直對齊方式是中間對齊。舉個例子:

          回到 CSS,給 td 添加樣式:height: 50px,vertical-align: bottom。

          我們看, td 單元格里的內容垂直底部對齊了。

          接下來,給表格添加內填充、水平分隔線、鼠標滑過高亮及顏色等樣式。

          要控制表格中邊框和內容之間的空間,可以給 td 和 th 元素設置 padding 屬性。

          回到 CSS,先注釋掉 th 和 td 的樣式。定義選擇器 th, td,聲明樣式:padding: 15px,text-align: left。

          CSS
          th, td {
            padding: 15px;
            text-align: left;
          }

          看一下效果,內容和邊框線之間就具有了 15px 的填充。

          接下來通過給 th 和 td 添加 border-bottom 屬性,實現表格的水平分隔線效果。

          注釋掉原有的 border 屬性,給 th 和 td 添加樣式:border-bottom: 1px solid #ddd。

          CSS
          table, th, td {
            /* border: 1px solid; */
          }
          th, td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
          }

          我們看,水平分隔線的表格效果就實現了。

          在 tr 上使用 :hover 選擇器,在鼠標移過時突出顯示表格的行。

          回到CSS,定義選擇器 tr:hover,聲明樣式:background-color: coral。kerou

          當鼠標滑過每一行時,當前行就高亮顯示了。

          我們也可以專門給某一行添加背景色,比如給 th 添加一個綠色背景。

          再單獨給 th 定義樣式:background-color: #04AA6D,color: white;

          CSS
          th {
            background-color: #04AA6D;
            color: white;
          }

          這樣,通過給 th 添加背景色,使表頭的顯示更加醒目了。

          本文配套教程鏈:https://www.bilibili.com/video/BV1oU4y1278g?p=101

          果想開發一個網站,除了要精通后端開發語言(如:php)外,還要精通HTML代碼。那么,什么是HTML呢?HTML是一種超文本標記語言,它包含有眾多的標簽,我們可以通過這些標簽,把不同的internet資源(如:文字、圖片、視頻、音頻、表單等等)整合在一個統一的文檔中,這就形成了我們可以看得見的網頁。那么,HTML都有哪些常用的標簽呢?

          一、文檔類型聲明。

          html5文檔類型聲明:<!doctype html>

          html4文檔類型聲明:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          二、html主標簽。

          這個標簽是html最外層的標簽,所有其它的HTML標簽都要放在這個標簽的內部。

          <html>

          <head></head>

          <body></body>

          </html>

          三、雙標簽和單標簽。

          在HTML標簽中,有的標簽是成雙成對的,如:<html></html>(如下圖);而有的標簽是單個的,如:<hr>橫線標簽。

          四、head頭部標簽。

          head頭部有以下幾種常用標簽:

          meta:主要提供有關頁面的元信息。

          link:用來定義文檔與外部資源的關系,最常用的是調用CSS樣式文件。

          title:頁面標題的標簽。

          script:用來調用JS文件或JS代碼。當然,script標簽也可以在body主體中使用。

          五、body主體標簽。

          1、塊級標簽。

          塊級標簽的特性是:獨自占有一行;標簽的高與寬、邊距可以修改;沒有設置寬與高時,默認繼承父標簽。例如:


          <div>div1</div>

          <div>div2</div>

          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>


          前端頁面顯示的效果如下圖:

          常用的塊級標簽有:div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

          2、內聯標簽。

          內聯標簽與塊級標簽不同,它不能獨自占有一行,會與其它內聯標簽在同一樣展示;內聯標簽的高與寬、上下邊距是不能修改的,它里面的文字或圖片有多高,它就是多高。例如如下代碼:


          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>

          <span>span1</span>

          <span>span2</span>


          CSS樣式代碼跟塊級標簽的例子是一樣的,而顯示的效果就不一樣了,寬與高、上下邊距沒有效果。如下圖:

          常用的內聯標簽有:span、a、b、strong、i、em 。

          3、內聯塊級標簽。

          內聯塊級標簽,既有一些內聯標簽的特性,也有一些塊級標簽的特點:它不能獨自占有一行,但是可以修改它的寬度和高度。例如下面這段代碼:


          <style>

          .aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          .aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }

          </style>

          <img src="w5.jpg" alt="">

          <img src="w5.jpg" alt="">


          CSS樣式代碼跟塊級標簽的那個例子仍然是一樣的,圖片的寬和高、上下邊距修改成功,而2個圖片不能獨自占有一行,而是在同一行。如下圖:

          常用的內聯塊級標簽有:img、input、textarea。

          4、區域標簽。

          所謂區域標簽,就是主要用來劃分布局頁面區域的。如:頭部、主體內容、側邊欄、底部。這樣劃分的好處是:讓頁面布局更加清晰明了。

          常用的區域標簽有:header(頭部)、footer(底部)、nav(導航)、aside(側邊欄)、section(主體)、article(獨立內容)。

          5、表單標簽。

          這個表單標簽我們也是會經常用到的,如:登錄網站的時候、提交數據的時候。如下圖的評論表單:

          ?表單常用的標簽有:form、input、select、option、textarea 。

          以上就是我們開發網頁時,會常用到的HTML標簽。當然,HTML標簽遠不止這些,尤其是html5出來后,新增了許多的新標簽。但是,有些標簽在我們開發中很少用到,所以,這里就沒有做相應的介紹。

          OCTYPE(文檔類型聲明)是放置于HTML或XHTML文檔開頭的指令,用于指示瀏覽器使用哪種解析模式來渲染頁面。它告訴瀏覽器使用的是哪個HTML或XHTML版本的規范,并且幫助瀏覽器正確地渲染和解析當前頁面內容。

          在HTML5中,DOCTYPE聲明相對簡潔,通常只需要寫<!DOCTYPE html>。這是因為HTML5引入了更寬松的解析模式,使得開發者不再需要嚴格地遵循XHTML那樣的規則。而在過去的HTML或XHTML版本中,DOCTYPE聲明可能會更加復雜。

          在XHTML 1.0 Strict規范中,DOCTYPE聲明需要包含<IDOC TYPE html PUBLIC-// W3C//DTD XHTML 1.0 Strict// EN ttp:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>。

          DOCTYPE的作用包括:

          1. 渲染模式指定:DOCTYPE聲明決定了瀏覽器選擇使用哪種渲染模式,如標準模式(Artist Mode)或怪異模式。

          2. DOCTYPE聲明指示了頁面使用的是哪個HTML或XHTML版本的規范,從而幫助瀏覽器正確地解析頁面。

          3. 瀏覽器兼容性:DOCTYPE聲明有助于確保頁面在不同瀏覽器中以一致的方式渲染,從而提高跨瀏覽器兼容性。

          總的來說,DOCTYPE聲明是確保你的網頁在各種瀏覽器中正確顯示的關鍵。在現代Web開發中,隨著HTML5的普及,簡潔的<!DOCTYPE html>成為了主流,使得開發更加方便。


          主站蜘蛛池模板: 国产成人精品一区在线| 日韩视频免费一区二区三区| 中文字幕一区日韩精品| 一区二区三区在线|日本| 97久久精品无码一区二区天美| 熟女性饥渴一区二区三区| 日本一区中文字幕日本一二三区视频| 日韩精品乱码AV一区二区| 中文字幕在线无码一区二区三区| 福利一区国产原创多挂探花| 欧洲精品免费一区二区三区| 在线一区二区三区| 国产主播一区二区三区 | 一区二区三区四区在线视频| 亚洲欧洲无码一区二区三区| tom影院亚洲国产一区二区| 免费无码VA一区二区三区| 精品无码AV一区二区三区不卡| 精品无码一区二区三区爱欲九九| 色婷婷一区二区三区四区成人网| 日韩精品一区二区亚洲AV观看| 久久国产免费一区| 亚洲国产视频一区| 色噜噜狠狠一区二区| 男插女高潮一区二区| 日韩在线视频一区| 精品不卡一区中文字幕| 一区二区免费在线观看| 久久久久久一区国产精品| AV无码精品一区二区三区宅噜噜| 上原亚衣一区二区在线观看| 国产探花在线精品一区二区| 人妻AV中文字幕一区二区三区| 精品少妇人妻AV一区二区三区| 亚洲av日韩综合一区久热| 国产一区二区三区小向美奈子| 国产一区三区三区| 人妻体体内射精一区二区| 国产成人精品一区二区A片带套| 国产伦精品一区二区三区免.费| 好湿好大硬得深一点动态图91精品福利一区二区 |