用 CSS 實現傾斜的背景顏色

們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。

在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：

首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。

我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 HTML 一起來理解。或者可以直接拿我的這個實例作為一個模板來使用。

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。

在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。

另外，如果想要實現傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：

當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區域。這是頁面上部區域的原理。

那么頁面底部也同樣需要實現這樣傾斜背景顏色的設計，這樣才能將風格一致，產生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。

最終的樣子在這篇 CSS 代碼的最后展示出來了。

CSS

TMl 的標簽可以分為單個標簽和成對標簽。

單個標簽：html4 規定單個標簽要有一個 / 表示結尾， html5 則不用

<!--單個標簽-->
<meta>
<!--成對標簽 -->
<div></div>

以下是HTMl中常用的一些標簽

div 標簽

div 標簽主要用來將相關的內容組合到一塊，就像菜市場把各個蔬菜分成不同種類區分擺放是一個道理。

div 是最常見也是比較重要的標簽，網頁布局中經常使用的一類標簽。通常布局被稱為 DIV + CSS 布局

<div>
  div 就是一個分類的存儲箱子
</div>

p標簽

p標簽表示段落，在網頁文字中應用的比較多

<!--段落和段落間會換行-->
<p>第一段</p>
<p>第二段</p>

H-標題標簽

h標簽分為六個

標簽	語義
h1	一級標題
h2	二級標題
h3	三級標題
h4	四級標題
h5	五級標題
h6	六級標題

引用標題標簽后，字體會加粗、字號一會變大

ul 無序標簽

無序標簽是沒有顯示順序的列表，無序列表前面通常會有一個“小點”，這個小點可以用type屬性控制。其中有三個展示方式（不過這種方式比較固定，不夠靈活和美觀，已經被CSS的效果代替），如下：

值（type屬性）	描述
disc	默認值，實心圓
circle	空心圓
square	實心方框

舉例:

<!--ul標簽內部只能放置li標簽-->
<!--li標簽內部可以放其他的標簽-->
<ul type=">
    <li>無序列表元素1</li> <!--列表項-->
    <li>無序列表元素2</li>
</ul>




實心圓
<ul type="disc">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
空心圓
<ul type="circle">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>
實心方框
<ul type="square">
  <li>西紅柿</li>
  <li>黃瓜</li>
</ul>

ol 有序標簽

ol 前面的標簽是有序的，可以是數字、字母、羅馬數字等。同樣控制這些樣式使用的是type屬性。

type屬性值	意義
a	小寫英文字母編號
A	大寫英文字母編號
i	小寫羅馬數字編號
I	大寫羅馬數字編號
1	數字編號（默認）

設置start屬性，表示從哪個編號開始
加 reversed 表示倒敘排列

有序列表, 從2開始
<ol start="2">
  <li>元素1</li>
  <li>元素2</li>
</ol>


小寫字母表示
<ol type="a">
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>


倒敘
<ol reversed>
  <li>元素1</li>
  <li>元素2</li>
  <li>元素3</li>
</ol>

dl 自定義列表

dl標簽表示自定義列表

dt表示數據項，dd表示數據定義， dd是dt標簽的解釋

<dl>
    <dt>西紅柿</dt>
    <dd>紅、酸</dd>
    <dt>黃瓜</dt>
    <dd>綠、澀</dd>
  </dl>

img標簽

img 用來插入圖片，包括但不限于以下圖片格式

圖片格式	備注
.jpg、.jpeg	通常用于照片，是一種有損壓縮格式
.png	通常用于logo、背景，支持透明和半透明。便攜式網絡圖像
.svg	矢量圖片

<!-- src(source)屬性， 圖片地址，可以為相對路徑，也可以為絕對路徑-->
<!-- alt 如果遇到圖片無法加載的情況，網頁上會展示 alt的 值 -->
<!-- width 和 height 表示 寬和高， 如果只設置一個， 那么另外一個就會跟著成比例縮放-->
<img src="./images/images.jpg" alt="星期一" width="120" height="20">

a 標簽

用a標簽來制作超級鏈接

<!-- href 屬性 表示 其他頁面的鏈接，支持相對路徑和絕對路徑，還可以鏈接到其它網站 -->
<!--target 屬性表示 打開其他鏈接的方式-->
<!-- title 屬性表示 鏈接的標題， 當鼠標移動到鏈接上，會展示出來-->
<a href="http://www.baidu.com" target="blank" title="文字標題">百度</a>






<!--也可以用a標簽作為錨點 錨點可以是本頁面的錨點，也可以是其他頁面的錨點-->
<h1 id="title">頭部標題</h1>
... 此處省略一些代碼
<a href="#title">返回標題</a>




<!--下載鏈接，指向 doc， zip， zip等文件格式時，a標簽將成為自動下載鏈接-->
<a href="./download/halou.zip">發郵件</a>
<!-- mailto:前綴的鏈接是郵件鏈接，系統將自動打開email相關軟件-->
<a href="mailto:halouworld@126.com">發郵件</a>
<!-- tel: 前綴鏈接是電話鏈接，系統將自動打開撥號鍵-->
<a href="tel:11111111111">打開撥號鍵盤</a>

audio標簽

audio標簽用來插入音頻標簽

<!--添加 controls 后才會顯示 播放控件-->
<!--常用音頻格式 mp3 和 ogg格式-->
<!--autoplay 自動播放屬性-->
<!--loop 屬性表示循環播放-->
<audio controls src="./video/demo.mp3">
       您的瀏覽器不支持 audio標簽，請升級
</audio>




<audio controls src="./video/demo.mp3" autoplay loop>
     您的瀏覽器不支持 audio標簽，請升級
</audio>

video標簽

video 標簽用于插入一段視頻

<!--有的視頻不能播放 ，詳見 https://blog.csdn.net/weixin_34272308/article/details/94614657 -->
<!-- controls 顯示視頻播放控件  -->
<!-- autoplay 自動播放 -->
<!-- loop 循環播放 -->
<!-- 常見的 視頻格式 mp4 ogv webm 等-->
<video controls autoplay loop src="./video/5-4 RDB2.mp4" >
    您的瀏覽器不支持 video標簽，請升級
</video>

其它區塊標簽

以前的區塊標簽只有div，現在為了更好的方便搜索引擎抓取網站，因此有了以下語義更加明確的區塊標簽

<section>	文檔的區域，比div語義上還要大一點
<header>	頁頭
<main>	網頁核心部分
<footer>	頁腳

其他的語義標簽

span 標記文本標記區域，沒有特殊效果，結合CSS使用

b 標簽加粗文章（可以使用CSS實現同樣效果）

u 加下換線文字

br 換行

i 傾斜文字（可以使用CSS實現同樣效果）

strong 代表特別重要的文字

em 需要強調的文字，有一定的傾斜，也可以用其配置CSS做表情文字

mark 高亮文字

figure 和 figcaption 。figure - 一段獨立的內容 figcaption- figure 內部元素的說明性內容

表單

表單用來收集信息并且可以完成和后端的數據傳輸

表單中大致可以分為三種標簽

form標簽，標識表單區域，內部的元素都可能被表單提取信息
input 標簽，標識輸入、點擊等需要和用戶交互的場景
datalist 下拉框，支持搜索，通常和input一塊使用

一些表單的示例

<!--action 表示要提交到后端的網址-->
<!--method 表示表單提交的方式，通常有 get 、 post 、put、delete等-->


<form action="/save" meththo="post"></form>


<!--<form> 標簽中 input 文本框 type="text" 表示文本框-->
<!-- value 表示文本框中的值 -->
<!--planceholder表示提示文字，在沒任何輸入值的情況下，作為提示信息-->
<!--disabled 表示禁用-->
<input type="text" value="123" planceholder="提示文字" disabled>


<!---單選按鈕，name相等，表示選擇了一個，另一個就不能選擇了-->
<!--checked 表示默認被選中-->
<!-- value 屬性表示要提交到后端服務器的值-->
<input type="radio" name="radio_group" checked>
<input type="radio"  name="radio_group">




<label>
    <input type="radio" name="sex"> 男
</label>
<label> 
    <input type="radio" name="sex"> 女
</label>




<!--html4 中的標簽 通過for 屬性 和 其他標簽的id屬性進行綁定-->


<input type="radio" name="sex" id="nan"> 
<label for="nan">男</label>


<input type="radio" name="sex"   id="nv">
<label for="nv">女</label>


<!--復選框 type="checkbox" 同一組的的復選框，name值應該相同 ，復選框也有value值， 用于向服務器提交數據-->
<input type="checkbox" name="hobby" value="soccer" > 足球
<input type="checkbox" name="hobby" value="basket" > 籃球


<!--密碼框-->
<input type="password" placeholder="請輸入密碼">


<!-- 下拉菜單 -->
<select>
  <option value="alipay">支付寶</option>
  <option value="wxpay">微信支付</option>
</select>


<!--多文本框 rows 和  clos 分別用于設置 行數 和 列數-->
<textarea rows="3" cols="5"></textarea>


<!--三種按鈕 submit 提交按鈕  button 普通按鈕 可以簡寫為  <button></button> reset 按鈕 重置按鈕-->
<input type="button" value="普通按鈕">
    <input type="reset" value="重置按鈕"> 
    <input type="submit" value="提交表單">




<!--像 email 和 url 等格式，如果點擊提交按鈕，不符合格式，會有提示-->
<form>
    日期空間: <input type="date">  <br/>
    時間空間: <input type="time">  <br/>
    日期時間空間 <input type="datetime-local">  <br/>


    文件:<input type="file"> <br/>  <br/>
    數字控件: <input type="number"> <br/>
    拖拽條: <input type="range"> <br/>
    搜索框: <input type="search"> <br/>
    網址控件: <input type="url"> <br/>
    郵箱控件: <input type="email" >
    <input type="submit" value="提交">
</form>




<!-- datalist 備選項示例 -->
<input type="text" list="province">
<datalist id="province">
  <option value="陜西"></option>
  <option value="山西"></option>
  <option value="河北"></option>
  <option value="山東"></option>
</datalist>

表格

可以用html渲染表格

table 標簽表示表格

tr 表示行
td 表示單元格
caption 表格的標題，通常放在表格的第一行
th 表示列標題

<!--表格示例-->
<table border="1">
  <caption>我是標題</caption>
  <tr>
      <th>第一列標題</th>
      <th>第二列標題</th>
  </tr>
  <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
  </tr>
  <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
  </tr>
</table>

單元格的合并, clospan 用來設置td 或者th的列跨度， rowspan屬性用來設置td或者th的行跨度

<!--跨列示例-->
<table border="1">
    <caption>我是標題</caption>
    <tr>
        <th>第一列標題</th>
        <th>第二列標題</th>
    </tr>
    <tr>
        <td colspan="2">跨兩行</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>


<!--跨行示例-->
<table border="1">
        <caption>我是標題</caption>
        <tr>
            <th>第一列標題</th>
            <th>第二列標題</th>
        </tr>
        <tr>
            <td rowspan="2">第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
            <td>第三行第二列</td>
        </tr>
  </table>

表格的其他標簽， thead 定義表頭， tbody 定義表格的主題內容， tfoot 標簽定義表格底部，通常用來匯總等

/一、html

//a、HTML語法規范

//a.1基本語法概述

1、HTML標簽是由尖括號包圍的關鍵字，例如,

2、HTML標簽通常是成對出現的，例如和,我們成為雙標簽，標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。

3、有些特殊的標簽是單個標簽（極少情況），例如

，我們稱為單標簽

//a.2標簽關系

雙標簽關系可以分為兩類：包含關系和并列關系。

//b、HTML基本結構標簽

//b.1第一個HTML網頁

每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上寫的。

HTML頁面也稱為HTML文檔

標簽名	定義	說明
<html></html>	HTML標簽	頁面中最大的標簽，我們稱為根標簽
<head></head>	文檔的頭部	注意在head標簽中我們必須要設置的標簽是title
<title></title>	文檔的標題	讓頁面擁有一個屬于自己的網頁標題
<body></body>	文檔的主體	元素包含文檔的所有內容，頁面內容，基本都是放到body里面的

必須是.html或.htm,瀏覽器的作用是讀取HTML文檔，并以網頁的形式顯示出它們。

此時，用瀏覽器打開這個網頁，我們就可以預覽我們寫的第一個HTML文件了。

//c、開發工具vscode

1、<!DOCTYPE>標簽
文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁

<!DOCTYPE html>這句代碼的意思是：當前頁面采用的是HTML5來顯示頁面。

2、lang語言

用來定義當前文檔顯示的語言：

a、en定義語言為英語

b、zh-CN定義語言為中文

簡單來說定義為en就是英文網頁，定義為zh-CN就是中文網頁

其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義zh-CN的文檔也可以顯示英文

這個屬性對于瀏覽器和搜索引擎（百度、谷歌等）還是有作用的

3、charset字符集

字符集是多個字符的集合，以便計算機能夠識別和存儲各種文字

在標簽內，通過標簽的charset屬性來規定HTML文檔應該使用哪種字符編碼。

charset常用的值：GB2312、BIG5、GBK和UTF-8,其中UTF-8也稱為萬國碼，基本包含了全世界所有國家需要用到的字符。

注意：上面語法是必須寫的代碼，否則可能引起亂碼的情況，一般情況下，統一使用"UTF-8"編碼，盡量統一寫成標準的"UTF-8",不要寫成"utf-8"或"UTF8"。

//d、HTML常用標簽

//d.1標簽語義

學習標簽是有技巧的，重點是記住每個標簽的語義，簡單理解就是指標簽的含義，即這個標簽是用來干嘛的

根據標簽的語義，在合適的地方給一個最為合理的標簽，可以讓頁面結構更清晰。

//d.2標題標簽

(重要)

為了使網頁更具有語義，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的網頁標題集

特點：

1、加了標題的文字會變得更加粗，字號也會依次變大。

2、一個標題獨占一行。

//d.3段落和換行標簽（重要）

在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在HTML標簽中，

標簽用于定義段落，它可以將整個網頁分為若干段落。

<p>我是一個段落標簽</p>標簽語義：可以把HTML文檔分割為若干段落。

特點：
1、文本在一個段落中會根據瀏覽器窗口的大小自動換行。
2、段落和段落之間保有一個較大的空隙。

在HTML中，一個段落中的文字從左到右依次排列，直到瀏覽器的右端，然后自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽

<br />

單詞break的縮寫，意為打斷，換行。

特點：

1、單標簽

2、

標簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。

//d.4文本格式標簽

在網頁中，有時需要為文字設置粗體，斜體或下劃線等效果，這時就需要用到HTML中的文本格式標簽，使文字以特殊的方式顯示

標簽語義：突出重要性，比普通文字更重要。

語義	標簽	說明
加粗	<strong></strong>或者<b></b>	更推薦使用<strong></strong>標簽加粗，語義更強烈
傾斜	<em><em> 或者<i><i>	更加推薦使用<em><em>標簽，語義更加強烈
刪除線	<del><del>或者<s><s>	更加推薦使用<del><del>標簽，語義更加強烈
下劃線	<ins><ins>或者<u><u>	更加推薦<ins><ins>標簽，語義更加強烈

//d.5<div>和<span>標簽
<div>和<span>是沒有語義的，它們就是一個盒子，用來裝內容。

<div>這是頭部</div>
<span>今日價格</span>

div是division的縮寫，表示分割，分區，span意為跨度，跨距。

特點：

1、<div>標簽用來布局，但是現在一行只能放一個<div>，大盒子。

2、<span>標簽用來布局，一行上可以有多個<span>,小盒子

//d.6圖像標簽和路徑（重點）

1、圖像標簽

在HTML標簽中，<img>標簽用于定義HTML頁面中的圖像。

<img src="圖像url"/>

單詞image的縮寫，意為圖像

src是<img>標簽的必須屬性，它用于指定圖像文件的路徑和文件名。

所謂屬性：簡單理解就是屬于這個圖像標簽的特性。

圖像標簽的其他屬性：

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本，圖像不能顯示的文字
title	文本	提示文本，鼠標放到圖像上，顯示文字
width	像素	設置圖像的寬度
height	像素	設置圖像的高度
border	像素	設置圖像的邊框粗細

在線咨詢

上一篇：「HTML」什么是 HTML 中的 div 標簽
下一篇：「Html」王者榮耀排位代練接單網站源碼HTML帶手機版

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商