整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
水平條紋是最容易用代碼寫出來的，但用戶在網頁上看到的條紋圖案很多都不是水平的。
有些條紋是垂直的（如圖1-1），而且某些形態的斜條紋或許更受歡迎，看起來更有趣。
幸運的是，CSS 漸變同樣也能幫助我們創建出這些效果，只是難度稍有不同。
垂直條紋的代碼跟水平條紋幾乎一樣的，主要區別在于：我們需要在開頭加上一個額外的參數來指定漸變的方向。
在水平條紋的代碼中，我們其實也可以加上這個參數，只不過它的默認值 to bottom 本來就跟我們的意圖一致，于是就省略了。最后，我們還需要把 background-size 的值顛倒一下。
background:linear-gradient(to right,#fb3 50%,#58a 0);
background-size:30px 100%;圖1-1
在完成了水平和垂直條紋后，我們繼續思考：如果再次改變 backgroun-size 的值和漸變的方向，是不是就可以得到斜向（比如45度）的條紋圖案呢？（如圖1-2）
圖1-2
background: linear-gradient(45deg,#fb3 50%, #58a 0);
background-size: 30px 30px；可以發現，這個辦法行不通。
原因在于：我們只是把每個“貼片”內部的漸變旋轉 45 度，而不是把整個重復的背景都旋轉了。
試著回憶一下，我們以前用位圖來生成斜向條紋時是怎么做的？
做法類似 （圖1-3），單個貼片包含了四條條紋，而不是兩條，只有這樣才有可能做到無縫拼接。它正是我們需要在 CSS 代碼中重新實現的貼片，因此我們需要增加一些色標。
圖1-3
background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size:30px 30px;如圖1-4所見，我們成功創建了斜向條紋，但是這些條紋看起來比前面制作的水平條紋和垂直條紋更細一些。
為了理解其中的緣由，我們需要回憶勾股定理，計算直角三角形的斜邊：一個直角三角形。
圖1-4
幸運的是，linear-gradient() 和 radial-gradient() 還各有一個循環式的加強版：repeating-linear-gradient() 和 repeating-radial-gradient()。
它們的工作方式跟前兩者類似，只是色標是無限循環重復的，直到鋪滿整個背景。下面是一個重復漸變的例子（圖1-5）
圖1-5
background:repeating-linear-gradient(45deg,#fb3,#58a 30px);重復線性漸變完美適用于條紋效果，這得益于它可以無限循環色標。
現在就可以隨心所欲地改變漸變的角度了，但是請注意，在這個方法中，不論是什么角度，我們都需要用到四個色標。
這意味著，水平和垂直條紋還是用原來的方法——斜向條紋來實現。
在多數情況下，我們想要的條紋都不是由差異極大的顏色組成的，而是屬于同一色系的，在透明度上有一些差異的顏色，例如圖1-6。
圖1-6
background:repeating-linear-gradient(30deg,#79b,#79b 15px,#58a 0,#58a 30px);在圖中我們可以看到，條紋是由一個主色調 #58a 和它的淺色變體組成的。
但是，這兩種顏色之間的關系在代碼中并沒有體現出來，如果我們想要改變這個主色調，需要修改四處。
幸運的是，有一種更好的方法：不再為每種條紋單獨指定顏色，而是把最深的顏色指定為背景色，同時把半透明色的條紋疊加在背景色之上來得到淺色條紋。
background:#58a;
background-image:repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,transparent 0,transparent 30px);現在，我們只需要修改一個地方就可以改變所有顏色了。
以上就是本期使用 CSS 創建垂直、斜向、同色系等不同條紋背景的實踐分享，希望對大家有幫助。
下期給大家分享更多實戰中的點滴，如果大家對此感興趣，歡迎各位關注、留言，大家的支持就是我的動力！
WEB開發中，HTML負責網頁的結構，CSS負責網頁上各個元素的展示樣式，JS則負責網頁和用戶的交互。想要成為一名優秀的前端工程師，首先要做的就是遵守這三者各司其職的原則，讓我們的代碼易于維護和擴展。
但是，有時候我們常常一不小心就破壞了這個原則。又或者，我們為了實現業務需求，根本不管這個規則。這都會導致我們的代碼結構混亂，維護困難。
比如，我們有一個任務，它的具體需求是這樣的：給一個網頁實現一個深色系和淺色系主題的切換，以使得在夜晚訪問這個網頁的讀者能夠使用“夜間模式”。
這個網頁的HTML大概是這樣的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>深夜食堂</title>
<style>
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
body {
padding: 10px;
box-sizing: border-box;
}
div.pic img {
width: 100%;
}
#modeBtn {
font-size: 2rem;
float: right;
}
</style>
</head>
<body>
<header>
<button id="modeBtn"></button>
<h1>深夜食堂</h1>
</header>
<main>
<div class="pic">
<img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
</div>
<div class="description">
<p>
這是一間營業時間從午夜十二點到早上七點的特殊食堂。這里的老板，不太愛說話，卻總叫人吃得熱淚盈
眶。在這里，自卑的舞蹈演員偶遇隱退多年舞界前輩，前輩不惜講述自己不堪回首的經歷不斷鼓舞年輕人，最終令其重拾自信；輕言絕交的閨蜜因為吃到共同喜愛的美食，回憶起從前的友誼，重歸于好；樂觀的絕癥患者遇到同命相連的女孩，兩人相愛并相互給予力量，陪伴彼此完美地走過了最后一程；一味追求事業成功的白領，在這里結交了真正暖心的朋友，發現真情比成功更有意義。食物、故事、真情，匯聚了整部劇的主題，教會人們坦然面對得失，對生活充滿期許和熱情。每一個故事背后都飽含深情，情節跌宕起伏，令人流連忘返 [6] 。
</p>
</div>
</main>
</body>
</html>現在的頁面，在手機上看起來是這樣的效果：
需求是當用戶點擊網頁右上角的太陽圖標時，將網頁變為深夜模式，即用深色背景、淺色字體來顯示網頁內容，同時太陽標記變為月亮標記。
這個任務很簡單，你可能非?？斓木蛯懗鲆韵麓a：
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '';
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '';
}
});這個代碼當然是可以work的。
這是點擊按鈕后切換的網頁呈現效果：
看起來，我們完美地實現了產品的需求，可以交差了。但是實際上，上面的代碼存在以下三個問題：
那么，我們怎么實現以上需求更好呢？
大家可以思考一下，然后給我們留言。
以上內容的答案，在《前端進階十日談》中有詳細描述哦。
oundation 默認設置
Foundation 使用瀏覽器默認字體大小 (font-size:100%)。對于大多數桌面瀏覽器來說，字體默認為 16px。對于大多數移動端瀏覽器來說，字體默認為 12px。默認的字體為 "Helvetica Neue"， line-height 默認為 1.5。
以上默認的設置均是針對 <body> 元素。
Foundation 文字排列設計
我們將討論 Foundation 的文字排列設計。
以下實例的真實樣式請通過點擊"嘗試一下"按鈕查看。
<h1> - <h6>
Foundation 渲染的 HTML 標題 (<h1> 到 <h6>) 如下所示:
實例
<h1>h1 標題</h1><h2>h2 標題</h2><h3>h3 標題</h3><h4>h4 標題</h4><h5>h5 標題</h5><h6>h6 標題</h6>
嘗試一下 ?
提示： 如果需要創建一個淺色的標題，可以在元素上添加 .subheader 類:
實例
<h1class="subheader">h1.subheader</h1><h2class="subheader">h2.subheader</h2><h3class="subheader">h3.subheader</h3><h4class="subheader">h4.subheader</h4><h5class="subheader">h5.subheader</h5><h6class="subheader">h6.subheader</h6>
<small>
在 Foundation 中， HTML <small> 元素用于創建一個淺色的副標題：
實例
<h1>h1 heading <small>secondary text</small></h1><h2>h2 heading <small>secondary text</small></h2><h3>h3 heading <small>secondary text</small></h3><h4>h4 heading <small>secondary text</small></h4><h5>h5 heading <small>secondary text</small></h5><h6>h6 heading <small>secondary text</small></h6>
嘗試一下 ?
<a>
Foundation <a> 元素的樣式如下所示：
實例
<p>這是一個 <aclass="a"href="#">鏈接</a>。</p>
<abbr>
Foundation <abbr> 元素的樣式如下所示：
實例
<p>The <abbrtitle="World Health Organization">WHO</abbr> was founded in 1948.</p>
嘗試一下 ?
<blockquote>
Foundation <blockquote> 元素的樣式如下所示：
實例
<blockquote><p>學的不僅是技術，更是夢想！</p><cite>菜鳥教程</cite></blockquote>
嘗試一下 ?
<dl>
Foundation <dl> 元素的樣式如下所示：
實例
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl>
嘗試一下 ?
<code>
Foundation <code> 元素的樣式如下所示：
實例
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 是文檔的一部分。</p>
嘗試一下 ?
<kbd>
Foundation <kbd> 元素的樣式如下所示：
實例
<p>按下 <kbd>ctrl + p</kbd> 鍵打開打印窗口。</p>
嘗試一下 ?
<hr>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
