整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。
在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：
首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。
我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 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 代碼的最后展示出來了。
局一張圖
上圖是京東的登錄頁面，這和我們接下來要學習的東西有關系。
form表單就是專門用來實現用戶登錄、用戶注冊、信息收集之類的頁面的。
日常網購一般都要求我們先登錄，輸入用戶名和密碼，點擊登錄后才可以進行物品的購買，那我們就用form表單來實現一下登錄。
form表單中包含了input標簽，input標簽屬于單標簽。單標簽是相對于雙標簽來講的。以前的a標簽、p標簽、span標簽等，都屬于雙標簽，它們的特點是一對一對的，比如a標簽，要寫成<a></a>。比如p標簽，要寫成<p></p>，它們都是有一個開始，有一個結束。都是成雙入對的。
單標簽則沒有結束標簽，比如上面的input標簽，它就沒有</input>這樣的結束。單標簽還有我們之前學的img圖片標簽，br換行標簽等。
input標簽只能包含在form標簽中，也就是說只要有input出現的地方，必定會有一個form標簽包圍著它。
而上一篇中的tr和td標簽只能包含在table表格標簽中，它們是組合。不能分開單獨使用。
同樣的情況還有li標簽，只能包含在ul無序列表標簽，ol有序列表標簽中，dt標簽和dd標簽只能包含在dl標簽中。
上面代碼在瀏覽器中的效果：
這樣一個簡易的登錄頁面就做出來了，是不是很簡單啊，我們試著填寫用戶名和密碼來嘗試一下登錄。
你會發現，你輸入的密碼并不是明文的，也就是說你輸入的密碼會以黑點的形式呈現，這是為了安全，如果不這樣，你輸密碼的時候很可能會被你背后的人看到。
那這個是怎么實現的呢？其實你應該已經發現了，input標簽里面有個type屬性，type設置為password就是以密碼形式呈現。type設置為text就是以明文顯示，type設置為submit就是一個按鈕。
提交按鈕的input里面我們還設置了一個value屬性，這個屬性用來設置，按鈕的文字，我們這里設置的是登錄，為了加深理解，我們給它改為登入。
瀏覽器中就會相應地顯示為登入：
form表單中除了可以寫input外，還可以有select下拉選擇標簽、textarea文本域標簽、button按鈕標簽（這個按鈕和<input type="submit">都是按鈕，用的時候看你自己喜好）。
下面通過一個例子來了解上面的各種標簽的使用。
案例：添加一篇文章，要求填寫文章標題、文章分類、發表頻道、文章內容。
瀏覽器中的效果：
上述代碼中form標簽中有select標簽，這個的作用是產生一個下拉框，供用戶選擇。
select里面包含option標簽，這個就是具體可以選擇項。我們這里設置了三個：財經、教育、歷史。 同我們前面講的一樣，option必須包含在select里面，而select必須包含在form表單標簽中，它們是組合，不能打單獨使用。
在這個例子中，我們還是用到了單選。
紅框框住的就是我們設置的單選，具體對應代碼中的：
單選也是用的input標簽，只不過它的type是radio，還有一個要注意的地方就是name屬性，我們這里可以選擇的項是：新視覺、獵奇、雜說，它們三個的name屬性都設置為了：channel。只有設置name都一樣，才能單選，否則就成了多選了。
文章內容我們使用到了textarea文本域標簽，它和<iniput type="text">的區別是，textarea可以放更多的文字。
textarea標簽有兩個屬性需要說一下，cols代表的是列，rows代表的是行，cols設置的值越大，textarea的框越寬，rows的值設置的越大，textarea的框越高。我們來嘗試一下：
先把cols設置成60，textarea就會變寬。
rows設置為30，textarea就會變高 :
form表單中還可以設置多選，我們也來嘗試一下：
瀏覽器中的效果：
紅框框住的部分就是我們實現的多選，多選用的也是input標簽，type為checkbox
你可以自己動手嘗試一下
我們整體的需求都實現了，但是整個頁面看起來很不美觀，所以我們需要調整一下，我決定采用table表格來調整，把文章標題、請選擇分類、內容這些文字性的東西放到一列，input、select等標簽放在另一列里面，使整個頁面看起來更加整齊。
瀏覽器中的效果：
經過調整以后，看起來已經不那么丑了，在《做網站需要學習哪些知識》中，我們介紹過美化頁面需要用Css和JavaScript，光用html是不可能做到很美觀的。
在講完html后，我們就會講Css和JavaScript。
們在瀏覽網頁的時候，可以看到頁面上有導航欄，逛商城的時候會看到商品的詳情頁里有商品的簡介，以及在注冊或者申請一個網站會員的時候會讓我們填寫各種各樣的信息，這些分別由列表、表格、表單來完成的，今天我學習了這些知識，下面我把我學到的知識梳理一下，以及在學習中遇到的坑總結一下，希望能給其他初學者一些幫助，同時，如有不足之處，也請各位大神指出來，我也好學習學習，提升自我。
網站導航欄
HTML列表在網站頁面中使用的是相當廣泛。如上圖的網站導航欄，就是使用了列表實現的，再比如說，一個欄目的文章列表等等，都是使用了列表功能，根據我今天學到的內容，我總結了一下，總共三大知識點：
1.無序列表：
可以在<ul>標簽中使用type屬性來控制每一項前面的圓點的樣式:
<h3>商品列表</h3>
<ul start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ul>2.有序列表：
<h3>商品列表</h3>
<ol>
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>有序列表
可以在<ol>標簽中使用start屬性來控制第一項數字起始值：
<h3>商品列表</h3>
<ol start="2">
<li>iPhone 12</li>
<li>MacBook Air</li>
<li>AirPods Pro</li>
</ol>效果如圖：
start=2
可以使用type規定在列表中使用的標記類型，type值有五種：
不過我個人感覺，這個type屬性的作用貌似不多大，基本上都是以默認值，就是數字來作為每一項的標記了吧。
3.自定義列表：
<dl>
<dt>名稱：</dt>
<dd>小白學編程</dd>
<dt>地址：</dt>
<dd>河南省鄭州市二七區</dd>
<dt>聯系</dt>
<dd>電話：<a href="tel:189****1122">189****1122</a></dd>
<dd>郵箱：<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>自定義列表
備注：根據本小白查的文檔，a標簽的href屬性，不僅可以填寫鏈接，還可以用：
【tel:電話號碼】的格式點擊進行撥號，只不過是在電腦上需要有能撥號的軟件；
撥號
【mailto:郵箱地址】的格式可以快速拉起發送郵件的軟件。
發送郵件
不過我不知道這個的兼容性怎么樣，如果有知道的大佬，可以在評論區指導一下，跪謝！
一個表格的基本結構：
<table class="table">
<!-- caption：表格標題 -->
<caption>
商品信息表
</caption>
<!-- 表頭 -->
<thead>
<!-- 添加表格數據的時候必須先添加一行 -->
<tr>
<td>ID</td>
<td>商品名稱</td>
<td>單價</td>
<td>單位</td>
<td>數量</td>
<td>金額</td>
</tr>
</thead>
<!-- 一個表格可以有多個tbody，但是只能有一個thead -->
<tbody>
<tr>
<td>1</td>
<td>iPhone 12 mini</td>
<td>5499</td>
<td>部</td>
<td>100</td>
<td>549900</td>
</tr>
</tbody>
</table>Excel里的表格可以進行行與列的合并，單元格直接也能合并，那么HTML表格也是可以的，可以使用colspan進行列合并，rowspan進行行的合并。利用這兩個屬性，我們可以使用<table>標簽寫一個課程表。
HTML表單是用于搜集用戶輸入的不同類型數據的，它包含了不同類型的<input>元素，如:文本框、單選框、復選框、提交按鈕等等。因此可以看出，<input>元素是表單中最重要的元素。
表單的基本格式：
<form action="" method="POST" class="register">
<!-- 這里面可以放input元素 -->
</form>根據我學習的成果，我總結出了input元素的七種type類型并一一做了記錄：
1.type="text" 單行文本框
<label for="username">賬號：</label>
<input type="text" name="username" id="username" value="admin" required>單行文本框
2.type="email" 郵箱型文本框
<label for="email">郵箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>郵箱型文本框還會對輸入的內容進行校驗，如果不符合郵件地址的格式會彈出如上圖提示。
3.type="password" 密碼型文本框/非明文
<label for="password">密碼：</label>
<input type="password" name="password" id="password" value="" placeholder="密碼不少于6位" required>密碼型文本框
輸入內容
值得注意的是，密碼型文本框在輸入密碼的時候都是以小黑點進行替換的，并不會顯示我們輸入的內容。
4.type="radio" 單選框
<label for="">性別：</label>
<div>
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">女</label>
<input type="radio" name="gender" value="male" id="male" checked>
<label for="secret">保密</label>
</div>單選框
單選框（radio）的name值必須都相同才能保證值的唯一性，默認選中使用checked屬性。
5.type="checkbox" 復選框
<label for="#">興趣：</label>
<div>
<input type="checkbox" name="hobby[]" value="basketball" id="basketball">
<label for="basketball">籃球</label>
<input type="checkbox" name="hobby[]" value="game" id="game">
<label for="game">游戲</label>
<input type="checkbox" name="hobby[]" value="travel" id="travel">
<label for="travel">旅游</label>
<input type="checkbox" name="hobby[]" value="program" id="program">
<label for="program">編程</label>
</div>復選框
復選框的name值一定要用數組表示，否則，服務器在接收數據的時候不能獲取所有選中的值。
6.type="file" 文件域
<label for="user-pic">頭像：</label>
<input type="file" name="user_pic" id="user-pic" />上傳文件
7.type="hidden" 隱藏域
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />隱藏域在頁面是看不到的，是服務器端進行處理的一項數據。
通過上述的七種<input>元素類型，我得出一個結論就是一個<input>元素至少包含有三個屬性：
除了上述的<input>元素的7種標簽類型，還有下拉列表、文本域這些常用的控件。
<label for="">學歷：</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司機">博士</option>
</select下拉列表/下拉框
<label for="">學歷：</label>
<select name="edu" id="eud">
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3" selected>本科</option>
<option value="4">研究生</option>
<option value="5" label="老司機">博士</option>
</select>multiple、size用法
<label for="comment">備注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>上傳文件需要注意兩點：
<form action="" method="POST" class="register" enctype="multipart/form-data">
<label for="user-pic">頭像：</label>
<!-- 隱藏域在頁面是看不到的，是服務器端進行處理的一項數據。 -->
<input type="hidden" name="MAX_FILE_ZIE" value="80000" />
<input type="file" name="user_pic" id="user-pic" />
<div class="user-pic" style="grid-column: 2;"></div>
<button>提交</button>
</form>enctype有3個值：
<form action="check.php" method="get" id="register">
<div class="box">
<label for="email">郵箱:</label>
<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
<label for="password">密碼:</label>
<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
<button form="register">提交</button>
</div>
</form>
<label for="username">帳號:</label>
<input type="text" name="username" id="username" placeholder="不能為空" />注冊表單
例如：以下情況就是沒有在空間中寫form屬性的情況，我們可以看到，在瀏覽器里沒有獲取到密碼password的值，只獲取到了username和email的值：
沒有獲取到password的值
我個人的理解是：如果不把表單控件寫到form內部，這樣會方便js獲取表單元素的值，但是這樣寫會容易影響布局，造成布局混亂，建議還是按照標準的寫法，把所有的控件都寫到form表單內部。
至于什么時候使用GET方法，什么時候使用POST方法呢？通過今天的學習，我做了如下總結：
<!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="css/table.css">
<title>表格：行與列的合并</title>
</head>
<body>
<table class="lesson">
<caption>
xxxx小學課程表
</caption>
<thead>
<tr>
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>語文</td>
<td>數學</td>
<td>音樂</td>
<td>社會</td>
<td>科學</td>
</tr>
<tr>
<td>2</td>
<td>數學</td>
<td>語文</td>
<td>音樂</td>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td>3</td>
<td>美術</td>
<td>音樂</td>
<td>音樂</td>
<td>數學</td>
<td>音樂</td>
</tr>
<tr>
<td>4</td>
<td>社會</td>
<td>體育</td>
<td>音樂</td>
<td>體育</td>
<td>語文</td>
</tr>
<tr class="rest">
<td colspan="7">中午休息</td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>語文</td>
<td>數學</td>
<td>音樂</td>
<td>社會</td>
<td>科學</td>
</tr>
<tr>
<td>6</td>
<td>數學</td>
<td>語文</td>
<td>音樂</td>
<td>語文</td>
<td>數學</td>
</tr>
<tr>
<td>7</td>
<td>課外活動：</td>
<td colspan="4">各班自行組織，自愿參加</td>
<td>數學</td>
<td>音樂</td> -->
</tr>
</tbody>
</table>
</body>
</html>效果：
用HTML表格寫一個課程表
個人總結：為了學習這些表單知識，真真的是看了一天，頭都懵了，還有不少內容沒有記住，還是需要多寫多練，其中我認為比較坑的幾個地方是：
在看視頻教程的過程中，我看到好多大佬在用VS Code的時候都是使用了快捷鍵，后來網上搜了一下，原來官方給的就有一個PDF文檔，從VS里就可以進去，在工具的頂部導航欄幫助里，如下圖：
快捷鍵
為了方便大家快速找到，我把官方地址貼出來吧，VS Code快捷鍵PDF文檔：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
VS Code快捷鍵
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
