整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
水平条纹是最容易用代码写出来的，但用户在网页上看到的条纹图案很多都不是水平的。
有些条纹是垂直的（如图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>现在的页面，在手机上看起来是这样的效果：
需求是当用户点击网页右上角的太阳图标时，将网页变为深夜模式，即用深色背景、浅色字体来显示网页内容，同时太阳标记变为月亮标记。
这个任务很简单，你可能非常快的就写出以下代码：
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小时内与您取得联系。
