整合營銷服務商

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

          免費咨詢熱線:

          Html+CSS - 1段CSS讓表格更漂亮 建議收藏

          5行CSS樣式碼,讓你的表格更加漂亮,先放最終效果:


          最終樣式

          HTML表格代碼如下:

          <table class="style-table">
                  <thead>
                      <tr>
                          <th>序號</th>
                          <th>物品名稱</th>
                          <th>金額</th>
                          <th>備注</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr>
                          <td>1</td>
                          <td>洗衣粉</td>
                          <td>15.00</td>
                          <td>自己用</td>
                      </tr>
                      <tr class="active-row">
                          <td>2</td>
                          <td>潔爾陰</td>
                          <td>25.00</td>
                          <td>老婆用</td>
                      </tr>
                      <tr >
                          <td>3</td>
                          <td>搓衣板</td>
                          <td>5.00</td>
                          <td>自己用</td>
                      </tr>
                  </tbody>
              </table>

          CSS代碼如下:

          疊樣式表(Cascading Style Sheet,簡稱:CSS)是為網頁添加樣式的代碼。本節將介紹 CSS 的基礎知識,并解答類似問題:怎樣將文本設置為黑色或紅色?怎樣將內容顯示在屏幕的特定位置?怎樣用背景圖片或顏色來裝飾網頁?

          CSS 究竟什么來頭?

          和 HTML 類似,CSS 也不是真正的編程語言,甚至不是標記語言。它是一門樣式表語言,這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說,要選擇一個 HTML 頁面里所有的段落元素,然后將其中的文本改成紅色,可以這樣寫 CSS:

          p {
            color: red;
          }

          不妨試一下:首先新建一個 styles 文件夾,在其中新建一個 style.css 文件,將這三行 CSS 保存在這個新文件中。

          然后再將該 CSS 文件連接至 HTML 文檔,否則 CSS 代碼不會對 HTML 文檔在瀏覽器里的顯示效果有任何影響。(如果你沒有完成前幾節的實踐,請復習處理文件 和 HTML 基礎。在筆記本里有這個方面的內容!)

          1、打開 index.html 文件,然后將下面一行粘貼到文檔頭(也就是 <head></head> 標簽之間)。

          <link href="styles/style.css" rel="stylesheet">

          2、保存 index.html 并用瀏覽器將其打開。應該看到以下頁面:

          如果段落文字變紅,那么祝賀你,你已經成功地邁出了 CSS 學習的第一步。

          “CSS 規則集”詳解

          讓我們來仔細看一看上述CSS:

          整個結構稱為 規則集(通常簡稱“規則”),各部分釋義如下:

          • 選擇器(Selector
          • HTML 元素的名稱位于規則集開始。它選擇了一個或者多個需要添加樣式的元素(在這個例子中就是 p 元素)。要給不同元素添加樣式只需要更改選擇器就行了。
          • 聲明(Declaration
          • 一個單獨的規則,比如說 color: red; 用來指定添加樣式元素的屬性
          • 屬性(Properties
          • 改變 HTML 元素樣式的途徑。(本例中 color 就是 `` 元素的屬性。)CSS 中,由編寫人員決定修改哪個屬性以改變規則。
          • 屬性的值(Property value
          • 在屬性的右邊,冒號后面即屬性的值,它從指定屬性的眾多外觀中選擇一個值(我們除了 red 之外還有很多屬性值可以用于 color )。

          注意其他重要的語法:

          • 每個規則集(除了選擇器的部分)都應該包含在成對的大括號里({})。
          • 在每個聲明里要用冒號(:)將屬性與屬性值分隔開。
          • 在每個規則集里要用分號(;)將各個聲明分隔開。

          如果要同時修改多個屬性,只需要將它們用分號隔開,就像這樣:

          p {
            color: red;
            width: 500px;
            border: 1px solid black;
          }

          多元素選擇

          也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號分開。例如:

          p, li, h1 {
            color: red;
          }

          不同類型的選擇器

          選擇器有許多不同的類型。上面只介紹了元素選擇器,用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型:

          選擇器名稱

          選擇的內容

          示例

          元素選擇器(也稱作標簽或類型選擇器)

          所有指定(該)類型的 HTML 元素

          p 選擇 <p>

          ID 選擇器

          具有特定 ID 的元素(單一 HTML 頁面中,每個 ID 只對應一個元素,一個元素只對應一個 ID)

          #my-id 選擇 <p id="my-id"><a id="my-id">

          類選擇器

          具有特定類的元素(單一頁面中,一個類可以有多個實例)

          .my-class 選擇 <p class="my-class"><a class="my-class">

          屬性選擇器

          擁有特定屬性的元素

          img[src] 選擇 <img src="myimage.png"> 而不是 <img>

          偽(Pseudo)類選擇器

          特定狀態下的特定元素(比如鼠標指針懸停)

          a:hover 僅在鼠標指針懸停在鏈接上時選擇 <a>

          選擇器的種類遠不止于此,更多信息請參閱 選擇器。

          字體和文本

          譯注:再一次說明,中文字體文件較大,不適合直接用于 Web Font。

          在探索了一些 CSS 基礎后,我們來把更多規則和信息添加至 style.css 中,從而讓示例更美觀。首先,讓字體和文本變得更漂亮。

          第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進index.html文檔頭(<head></head>之間的任意位置)。代碼如下:

           <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css"> 

          以上代碼為當前網頁下載 Open Sans 字體,從而使自定義 CSS 中可以對 HTML 元素應用這個字體。

          第二步:接下來,刪除 style.css 文件中已有的規則。雖然測試是成功的了,但是紅字看起來并不太舒服。

          第三步:將下列代碼添加到相應的位置,用你在 Google Fonts 找到的字體替代 font-family 中的占位行。( font-family 意味著你想要你的文本使用的字體。)這條規則首先為整個頁面設定了一個全局字體和字號(因為 <html> 是整個頁面的父元素,而且它所有的子元素都會繼承相同的 font-sizefont-family):

          html {
            /* px 表示 “像素(pixels)”: 基礎字號為 10 像素 */
            font-size: 10px;
            /* Google fonts 輸出的 CSS */
            font-family: 'Open Sans', sans-serif;
          }

          注:CSS 文檔中所有位于 /**/ 之間的內容都是 CSS 注釋,它會被瀏覽器在渲染代碼時忽略。你可以在這里寫下對你現在要做的事情有幫助的筆記。

          譯注:/*``*/ 不可嵌套,/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。

          接下來為文檔體內的元素(<h1> (en-US)、<li><p>)設置字號。將標題居中顯示,并為正文設置行高和字間距,從而提高頁面的可讀性。

             h1 {
               font-size: 60px;
               text-align: center;
             }
             
             p, li {
               font-size: 16px;
               /* line-height 后而可以跟不同的參數,如果是數字,就是當前字體大小乘上數字 */
               line-height: 2;
               letter-spacing: 1px;
             }

          可以隨時調整這些 px 值來獲得滿意的結果,以下是大體效果:

          一切皆盒子

          編寫 CSS 時你會發現,你的工作好像是圍繞著一個一個盒子展開的——設置尺寸、顏色、位置,等等。頁面里大部分 HTML 元素都可以被看作若干層疊的盒子。



          并不意外,CSS 布局主要就是基于盒模型的。每個占據頁面空間的塊都有這樣的屬性:

          • padding:即內邊距,圍繞著內容(比如段落)的空間。
          • border:即邊框,緊接著內邊距的線。
          • margin:即外邊距,圍繞元素外部的空間。



          這里還使用了:

          • width :元素的寬度
          • background-color :元素內容和內邊距底下的顏色
          • color :元素內容(通常是文本)的顏色
          • text-shadow :為元素內的文本設置陰影
          • display :設置元素的顯示模式(暫略)

          開始在頁面中添加更多 CSS 吧!大膽將這些新規則都添加到頁面的底部,而不要糾結改變屬性值會帶來什么結果。

          更改頁面顏色

          html{
            background-color:#00539f;
          }

          這條規則將整個頁面的背景顏色設置為 所計劃的顏色。

          文檔體格式設置

          body{
             width:600px;
             margin:0 auto;
             background-color:#ff9500;
             padding:0 20px 20px 20px;
             border:5px solid black;
          }

          現在是 <body> 元素。以上條聲明,我們來逐條查看:

          • width: 600px; —— 強制頁面永遠保持 600 像素寬。
          • margin: 0 auto; —— 為 marginpadding 等屬性設置兩個值時,第一個值代表元素的上方下方(在這個例子中設置為 0),而第二個值代表左邊右邊(在這里,auto 是一個特殊的值,意思是水平方向上左右對稱)。你也可以使用一個,三個或四個值,參考 這里 。
          • background-color: #FF9500; —— 如前文所述,指定元素的背景顏色。我們給 body 用了一種略微偏紅的橘色以與深藍色的 `` 元素形成反差,你也可以嘗試其它顏色。
          • padding: 0 20px 20px 20px; —— 我們給內邊距設置了四個值來讓內容四周產生一點空間。這一次我們不設置上方的內邊距,設置右邊,下方,左邊的內邊距為20像素。值以上、右、下、左的順序排列。
          • border: 5px solid black; —— 直接為 body 設置 5 像素的黑色實線邊框。

          定位頁面主標題并添加樣式

          h1{
            margin: 0;
            padding:20px 0;
            color: #00539f;
            text-shadow:3px 3px 1px black
          }

          你可能發現頁面的頂部有一個難看的間隙,那是因為瀏覽器會在沒有任何 CSS 的情況下 給 <h1>en-US等元素設置一些默認樣式。但這并不是個好主意,因為我們希望一個沒有任何樣式的網頁也有基本的可讀性。為了去掉那個間隙,我們通過設置margin: 0;來覆蓋默認樣式。

          至此,我們已經把標題的上下內邊距設置為 20 像素,并且將標題文本與 HTML 的背景顏色設為一致。

          需要注意的是,這里使用了一個 text-shadow 屬性,它可以為元素中的文本提供陰影。四個值含義如下:

          • 第一個值設置水平偏移值 —— 即陰影右移的像素數(負值左移)。
          • 第二個值設置垂直偏移值 —— 即陰影下移的像素數(負值上移)。
          • 第三個值設置陰影的模糊半徑 —— 值越大產生的陰影越模糊。
          • 第四個值設置陰影的基色。

          不妨嘗試不同的值看看能得出什么結果。

          圖像居中

          img{
            display:block;
            margin:0 auto;
          }

          最后,我們把圖像居中來使頁面更美觀。可以復用 body 的margin: 0 auto,但是需要一點點調整。<body>元素是塊級元素,意味著它占據了頁面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內聯元素,不具備塊級元素的一些功能。所以為了使圖像有外邊距,我們必須使用display: block 給予其塊級行為。

          注:以上說明假定所選圖片小于頁面寬度(600 pixels)。更大的圖片會溢出 body 并占據頁面的其他位置。要解決這個問題,可以:

          1)使用 圖片編輯器 來減小圖片寬度; 2)用 CSS 限制圖片大小,即減小 <img> 元素 width 屬性的值(比如 400 px)。

          注:如果你暫時不能理解 display: block 和塊級元素與行內元素的差別也沒關系;隨著你對 CSS 學習的深入,你將明白這個問題。

          小結

          如果你按部就班完成本文的實踐,那么最終可以得到以下頁面


          相關推薦:

          前端新手看過來,手把手帶你輕松上手html的實操

          段時間做畢業設計的過程中,發現了兩個十分好看的前端頁面,利用HTML,CSS以及JS寫成的。

          第一個代碼點擊進入時有好看的進入動畫,旋轉轉圈之后,從中間向兩側緩緩打開:

          打開之后,首頁長這樣:

          點擊頭部的幾塊區域,有炫酷的滑動切換動畫:

          第二個頁面點擊進入之后,第一眼看到的頁面是這樣的:

          鼠標下拉可以繼續查看:

          是不是很好看呢?我的畢業設計頁面就是在第一個頁面的基礎上來設計實現的,哈哈,我的頁面長這樣:

          嗯,畢業設計做了一個簡單的圖像文字識別系統,在頁面上傳圖片后,系統識別出圖片中的文字,并在此基礎上衍生出身份證識別,銀行卡識別,駕駛證識別,傳圖識色等功能,整個系統涉及到圖像預處理,神經網絡等技術。

          可把我厲害壞了,哈哈,不過其實市面上有很多圖像識別方面的軟件啦。

          圖像預處理技術

          等改天有時間了,我準備把這個圖像文字識別系統從設計到實現的過程一步一步寫出來,屆時,歡迎大家前來圍觀啊!!

          想要前面兩個前端頁面代碼的小伙伴,可以私信我獲取哦~~


          主站蜘蛛池模板: 亚洲码欧美码一区二区三区| 久久精品无码一区二区app| 中文激情在线一区二区| 日本一区午夜艳熟免费| 国产成人午夜精品一区二区三区| 亚洲AV综合色区无码一区| 精品一区二区三区在线观看| 国产在线无码视频一区| 亚洲国产一区二区三区| 精品国产鲁一鲁一区二区| 国模无码人体一区二区| 亚洲熟女乱综合一区二区| 色综合久久一区二区三区| 蜜桃无码一区二区三区| 91精品一区二区三区在线观看| 日本中文字幕一区二区有码在线| 国产精品亚洲不卡一区二区三区| 三级韩国一区久久二区综合 | 一区二区三区观看免费中文视频在线播放 | 三上悠亚亚洲一区高清| 国产精品福利区一区二区三区四区| 国产精品日韩一区二区三区| 日本在线视频一区二区三区 | 无码日韩精品一区二区三区免费 | 国产欧美色一区二区三区| 精品少妇人妻AV一区二区| 亚洲AV网一区二区三区| 波多野结衣精品一区二区三区| 在线观看精品视频一区二区三区 | 后入内射国产一区二区| 日本一区免费电影| 日韩少妇无码一区二区三区| 精品一区二区三区在线观看l| 精品国产一区二区三区麻豆| 亚洲国产精品综合一区在线 | chinese国产一区二区| 又硬又粗又大一区二区三区视频| 中文字幕av无码一区二区三区电影| 久久青草精品一区二区三区| 无码精品一区二区三区在线| 免费无码毛片一区二区APP|