整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
在網(wǎng)頁(yè)中將 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 屬性。以下是一種常用的實(shí)現(xiàn)方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Centering</title>
<style>
.center {
width: 300px; /* 設(shè)置元素寬度 */
margin: 0 auto; /* 水平居中 */
background-color: lightblue;
padding: 20px;
}
</style>
</head>
<body>
<div class="center">
<p>This element is horizontally centered.</p>
</div>
</body>
</html>
在上面的示例中， center 類的元素使用了 width: 300px; 來(lái)設(shè)置寬度，然后通過(guò) margin: 0 auto; 來(lái)實(shí)現(xiàn)水平居中。這樣，無(wú)論屏幕寬度如何變化，元素都會(huì)始終水平居中顯示。
您也可以將此樣式應(yīng)用到任何 HTML 元素（例如 div 、 span 、 p 等），以實(shí)現(xiàn)水平居中效果。
網(wǎng)頁(yè)布局有很多種方式，一般分為以下幾個(gè)部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。
頭部區(qū)域位于整個(gè)網(wǎng)頁(yè)的頂部，一般用于設(shè)置網(wǎng)頁(yè)的標(biāo)題或者網(wǎng)頁(yè)的 logo：
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項(xiàng)目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區(qū)域</h1>
</div>
</body>
</html>菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶瀏覽其他頁(yè)面：
例
/* 導(dǎo)航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導(dǎo)航鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 修改顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}內(nèi)容區(qū)域一般有三種形式:
不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容，這三列加起來(lái)的寬度是 100％。
例：
.column {
float: left;
}
/* 左右側(cè)欄的寬度 */
.column.side {
width: 25%;
}
/* 中間列寬度 */
.column.middle {
width: 50%;
}
/* 響應(yīng)式布局 - 寬度小于600px時(shí)設(shè)置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
底部區(qū)域在網(wǎng)頁(yè)的最下方，一般包含版權(quán)信息和聯(lián)系方式等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}通過(guò)以上等學(xué)習(xí)我們來(lái)創(chuàng)建一個(gè)響應(yīng)式等頁(yè)面，頁(yè)面的布局會(huì)根據(jù)屏幕的大小來(lái)調(diào)整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項(xiàng)目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 頭部標(biāo)題 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 導(dǎo)航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導(dǎo)航條鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接顏色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創(chuàng)建兩列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右側(cè)欄 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 圖像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮動(dòng) */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時(shí)，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 響應(yīng)式布局 -屏幕尺寸小于 400px 時(shí)，導(dǎo)航等布局改為上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的網(wǎng)頁(yè)</h1>
<p>重置瀏覽器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#" style="float:right">鏈接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章標(biāo)題</h2>
<h5>xx 年xx月 xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
<p>文本...</p>
<p>當(dāng)熱誠(chéng)變成習(xí)慣，恐懼和憂慮即無(wú)處容身。缺乏熱誠(chéng)的人也沒(méi)有明確的目標(biāo)。熱誠(chéng)使想象的輪子轉(zhuǎn)動(dòng)。一個(gè)人缺乏熱誠(chéng)就象汽車沒(méi)有汽油。
善于安排玩樂(lè)和工作，兩者保持熱誠(chéng)，就是最快樂(lè)的人。熱誠(chéng)使平凡的話題變得生動(dòng)。！</p>
</div>
<div class="card">
<h2>文章標(biāo)題</h2>
<h5>xx 年 xx 月xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
<p>文本...</p>
<p>一切事無(wú)法追求完美，唯有追求盡力而為。這樣心無(wú)壓力，出來(lái)的結(jié)果反而會(huì)更好！</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>關(guān)于我</h2>
<div class="fakeimg" style="height:100px;"></div>
<p>6666</p>
</div>
<div class="card">
<h3>熱門(mén)文章</h3>
<div class="fakeimg"><img src="img/fy2_wp.png">\</div>
</div>
<div class="card">
<h3>關(guān)注我</h3>
<p>本站發(fā)布的系統(tǒng)與軟件僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，
不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買正版軟件！如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們,我們會(huì)及時(shí)處理。
聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部區(qū)域</h2>
</div>
</body>
</html>本文主要介紹了Html的網(wǎng)頁(yè)布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見(jiàn)的移動(dòng)設(shè)備的三種網(wǎng)頁(yè)模式，最后通過(guò)一個(gè)小項(xiàng)目，總結(jié)之前講解的內(nèi)容。
代碼很簡(jiǎn)單，希望可以幫助你學(xué)習(xí)。
者 | Adam Giese
譯者 | 王強(qiáng)
CSS 中有兩種顏色模型 RGB 和 HSL，如何用 JavaScript 控制它們？
點(diǎn)開(kāi)這篇文章的你，肯定是想要學(xué)習(xí)怎樣控制顏色的——我們后面就會(huì)講具體操作。但首先，我們需要對(duì) CSS 如何標(biāo)記顏色有一個(gè)基本的認(rèn)識(shí)。CSS 使用的是兩種顏色模型：RGB 和 HSL，我們先簡(jiǎn)單了解一下。
1、RGB
RGB 就是“紅色，綠色，藍(lán)色”的簡(jiǎn)稱。這個(gè)模型由三個(gè)數(shù)字組成，每個(gè)數(shù)字表示其所代表的顏色在最終生成的顏色中有多高的亮度。在 CSS 中，每個(gè)數(shù)值的范圍都是 0-255，三個(gè)數(shù)值間用逗號(hào)分隔，作為 CSS rgb 函數(shù)的參數(shù)，例如：rgb（50,100,0）。
RGB 是一種“增量”顏色系統(tǒng)。這意味著每個(gè)數(shù)字越高，最終生成的顏色就越亮。如果所有值都相等就生成灰度顏色；如果所有值都為零，結(jié)果為黑色；如果所有值都是 255，則結(jié)果為白色。
此外你也可以使用十六進(jìn)制表示法來(lái)標(biāo)記 RGB 顏色，其中每種顏色的數(shù)值從 10 進(jìn)制轉(zhuǎn)換為 16 進(jìn)制。例如，rgb（50,100,0）用 16 進(jìn)制就寫(xiě)成＃326400。
雖然我個(gè)人比較習(xí)慣使用 RGB 模型（特別是十六進(jìn)制），但我也經(jīng)常發(fā)現(xiàn)它不易閱讀，也不容易操作。下面來(lái)看 HSL 模型。
2、HSL
HSL（https://codepen.io/AdamGiese/full/989988044f3b8cf6403e3c60f56dd612）是“色調(diào)，飽和度，光線”的簡(jiǎn)稱，HSL 也包含三個(gè)值。色調(diào)值對(duì)應(yīng)于色輪上的點(diǎn)，由 CSS 角度值表示，最常用的是度數(shù)單位。
飽和度以百分比表示，是指顏色的強(qiáng)度。當(dāng)飽和度為 100％時(shí)顏色最深，飽和度越低，顏色越淺，直到灰度為 0％。
亮度也以百分比表示，指的是顏色有多亮。“常規(guī)”的亮度是 50％。無(wú)論色調(diào)和飽和度值如何，100％的亮度都是純白色，0％的亮度就是純黑色。
我覺(jué)得 HSL 模型更直觀一些，顏色之間的關(guān)系更加明顯，控制顏色時(shí)只要簡(jiǎn)單地調(diào)整幾個(gè)數(shù)字就可以了。
3、顏色模型之間的轉(zhuǎn)換
RGB 和 HSL 顏色模型都將顏色分解為各種屬性。要在不同模型之間進(jìn)行轉(zhuǎn)換，我們首先需要計(jì)算這些屬性。
除了色調(diào)，上面提到的所有數(shù)值都可以表示為百分比。就連 RGB 值也是用字節(jié)表示的百分比。在下面提到的公式和函數(shù)中，這些百分比將由 0 到 1 之間的小數(shù)來(lái)表示。
這里提一下，我并不會(huì)深入探討這些數(shù)學(xué)知識(shí)；相比之下，我將簡(jiǎn)要介紹一遍原始數(shù)學(xué)公式，然后將其轉(zhuǎn)換為 JavaScript 格式。
4、從 RGB 模型中計(jì)算亮度
亮度是三個(gè) HSL 值中最容易計(jì)算的一個(gè)。其數(shù)學(xué)式如下，其中 M 是 RGB 值的最大值，m 是最小值：
亮度的數(shù)學(xué)式
用 JavaScript 函數(shù)寫(xiě)成下面的形式：
const rgbToLightness =（r，g，b）=> 1/2 *（Math.max（r，g，b）+ Math.min（r，g，b））;
5、從 RGB 模型中計(jì)算飽和度
飽和度僅比亮度稍微復(fù)雜一些。如果亮度為 0 或 1，則飽和度值為 0；否則，它基于下面的數(shù)學(xué)公式計(jì)算得出，其中 L 表示亮度：
飽和度的數(shù)學(xué)式
寫(xiě)成 JavaScript：
const rgbToSaturation = (r,g,b) => {
const L = rgbToLightness(r,g,b);
const max = Math.max(r,g,b);
const min = Math.min(r,g,b);
return (L === 0 || L === 1)
? 0
: (max - min)/(1 - Math.abs(2 * L - 1));
};
6、從 RGB 模型中計(jì)算色調(diào)
從 RGB 坐標(biāo)中計(jì)算色調(diào)角度的公式有點(diǎn)復(fù)雜：
色調(diào)的數(shù)學(xué)式
寫(xiě)成 JavaScript：
const rgbToHue = (r,g,b) => Math.round( Math.atan2( Math.sqrt(3) * (g - b), 2 * r - g - b, ) * 180 / Math.PI );
最后 180 / Math.PI 的算法是將結(jié)果從弧度轉(zhuǎn)換為度。
7、計(jì)算 HSL
上面這些函數(shù)都可以包含在同一個(gè)功能函數(shù)里：
const rgbToHsl = (r,g,b) => {
const lightness = rgbToLightness(r,g,b);
const saturation = rgbToSaturation(r,g,b);
const hue = rgbToHue(r,g,b);
return [hue, saturation, lightness];
}
8、從 HSL 模型中計(jì)算 RGB 值
開(kāi)始計(jì)算 RGB 之前，我們需要一些前提值。
首先是“色度”值：
色度的數(shù)學(xué)式
還有一個(gè)臨時(shí)的色調(diào)值，我們將用它來(lái)確定我們所屬的色調(diào)圈的“段”：
色調(diào)區(qū)間的數(shù)學(xué)式
接下來(lái)，我們?cè)O(shè)一個(gè)“x”值，它將用作中間（第二大）組件值：
臨時(shí)“x”值的數(shù)學(xué)式
我們?cè)僭O(shè)一個(gè)“m”值，用于調(diào)整各個(gè)亮度值：
亮度匹配的數(shù)學(xué)式
根據(jù)色調(diào)區(qū)間值，r，g 和 b 值將映射到 C，X 和 0：
RGB 值的數(shù)學(xué)式，不考慮亮度
最后，我們需要映射每個(gè)值以調(diào)整亮度：
用 RGB 來(lái)解釋亮度的數(shù)學(xué)式
將上面這些都寫(xiě)到 JavaScript 函數(shù)中：
const hslToRgb = (h,s,l) => {
const C = (1 - Math.abs(2 * l - 1)) * s;
const hPrime = h / 60;
const X = C * (1 - Math.abs(hPrime % 2 - 1));
const m = l - C/2;
const withLight = (r,g,b) => [r+m, g+m, b+m];
if (hPrime <= 1) { return withLight(C,X,0); } else
if (hPrime <= 2) { return withLight(X,C,0); } else
if (hPrime <= 3) { return withLight(0,C,X); } else
if (hPrime <= 4) { return withLight(0,X,C); } else
if (hPrime <= 5) { return withLight(X,0,C); } else
if (hPrime <= 6) { return withLight(C,0,X); }
}
9、創(chuàng)建顏色對(duì)象
為了便于在操作屬性時(shí)訪問(wèn)，我們將創(chuàng)建一個(gè) JavaScript 對(duì)象。把前面提到的這些函數(shù)打包起來(lái)就能創(chuàng)建這個(gè)對(duì)象：
const rgbToObject = (red,green,blue) => {
const [hue, saturation, lightness] = rgbToHsl(red, green, blue);
return {red, green, blue, hue, saturation, lightness};
}
const hslToObject = (hue, saturation, lightness) => {
const [red, green, blue] = hslToRgb(hue, saturation, lightness);
return {red, green, blue, hue, saturation, lightness};
}
10、示例
我強(qiáng)烈建議你花些時(shí)間看看這個(gè)示例：
https://codepen.io/AdamGiese/full/86b353c35a8bfe0868a8b48683faf668
從中了解調(diào)節(jié)各個(gè)屬性時(shí)其它屬性如何發(fā)生變化，這樣能幫助你更深入地了解兩種顏色模型是如何對(duì)應(yīng)的。
現(xiàn)在我們已經(jīng)知道怎樣在顏色模型之間進(jìn)行轉(zhuǎn)換了，那么就來(lái)看看該如何控制這些顏色！
1、更新屬性
我們提到的所有顏色屬性都可以單獨(dú)控制，返回一個(gè)新的顏色對(duì)象。例如，我們可以編寫(xiě)一個(gè)旋轉(zhuǎn)色調(diào)角度的函數(shù)：
const rotateHue = rotation => ({hue, ...rest}) => {
const modulo = (x, n) => (x % n + n) % n;
const newHue = modulo(hue + rotation, 360);
return { ...rest, hue: newHue };
}
rotateHue 函數(shù)會(huì)接受一個(gè)旋轉(zhuǎn)參數(shù)并返回一個(gè)新函數(shù)，該函數(shù)接受并返回一個(gè)顏色對(duì)象。這樣就可以輕松創(chuàng)建新的“旋轉(zhuǎn)”函數(shù)：
const rotate30 = rotateHue(30);
const getComplementary = rotateHue(180);
const getTriadic = color => {
const first = rotateHue(120);
const second = rotateHue(-120);
return [first(color), second(color)];
}
用這種方式，你也可以編寫(xiě)加深或提亮顏色的函數(shù)——或者反過(guò)來(lái)，減淡或變暗也行。
const saturate = x => ({saturation, ...rest}) => ({
...rest,
saturation: Math.min(1, saturation + x),
});
const desaturate = x => ({saturation, ...rest}) => ({
...rest,
saturation: Math.max(0, saturation - x),
});
const lighten = x => ({lightness, ...rest}) => ({
...rest,
lightness: Math.min(1, lightness + x)
});
const darken = x => ({lightness, ...rest}) => ({
...rest,
lightness: Math.max(0, lightness - x)
});
2、顏色謂詞
除了顏色控制以外，你還可以編寫(xiě)“謂詞”——亦即返回布爾值的函數(shù)。
const isGrayscale = ({saturation}) => saturation === 0;
const isDark = ({lightness}) => lightness < .5;
3、處理顏色數(shù)組
過(guò)濾器
JavaScript [] .filter 方法會(huì)接受一個(gè)謂詞并返回一個(gè)新數(shù)組，其中包含所有“傳遞”的元素。我們?cè)谏弦还?jié)中編寫(xiě)的謂詞可以用在這里：
const colors = [/* ... an array of color objects ... */];
const isLight = ({lightness}) => lightness > .5;
const lightColors = colors.filter(isLight);
排序
要對(duì)顏色數(shù)組進(jìn)行排序，首先需要編寫(xiě)一個(gè)“比較器”函數(shù)。此函數(shù)接受一個(gè)數(shù)組的兩個(gè)元素并返回一個(gè)數(shù)字來(lái)表示“贏家”。正數(shù)表示第一個(gè)元素應(yīng)該先排序，而負(fù)數(shù)表示第二個(gè)元素應(yīng)該先排序。零值表示平局。
例如，這是一個(gè)比較兩種顏色亮度的函數(shù)：
const compareLightness = (a,b) => a.lightness - b.lightness;
這是一個(gè)比較飽和度的函數(shù)：
const compareSaturation = (a,b) => a.saturation - b.saturation;
為了防止代碼重復(fù)，我們可以編寫(xiě)一個(gè)高階函數(shù)來(lái)返回一個(gè)比較函數(shù)來(lái)對(duì)比各種屬性：
const compareAttribute = attribute =>
(a,b) => a[attribute] - b[attribute];
const compareLightness = compareAttribute('lightness');
const compareSaturation = compareAttribute('saturation');
const compareHue = compareAttribute('hue');
平均屬性
你可以搭配各種 JavaScript 數(shù)組方法來(lái)平衡顏色數(shù)組中的特定屬性。首先，你可以使用 reduce 求和并用 Array length 屬性分割來(lái)計(jì)算一個(gè)屬性的均值：
const colors = [/* ... an array of color objects ... */]; const toSum = (a,b) => a + b; const toAttribute = attribute => element => element[attribute]; const averageOfAttribute = attribute => array => array.map(toAttribute(attribute)).reduce(toSum) / array.length;
你可以用它來(lái)“規(guī)范化”一組顏色：
/* ... continuing */
const normalizeAttribute = attribute => array => {
const averageValue = averageOfAttribute(attribute)(array);
const normalize = overwriteAttribute(attribute)(averageValue);
return normalize(array);
}
const normalizeSaturation = normalizeAttribute('saturation');
const normalizeLightness = normalizeAttribute('lightness');
const normalizeHue = normalizeAttribute('hue');
4、結(jié)論
顏色是網(wǎng)絡(luò)不可或缺的一部分。將顏色分解為屬性就可以靈活控制它們，并創(chuàng)造出無(wú)限的可能。
查看英文原文：
https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8
福利推薦
前端領(lǐng)域的技術(shù)演進(jìn)一直要比其他技術(shù)快一些，這給前端工程師帶來(lái)持續(xù)的挑戰(zhàn)。這里整理了從 Vue 到 React、iOS 到 Andoid、再到前端架構(gòu)體系的干貨課程，帶你解讀從前端小工到專家的實(shí)戰(zhàn)心法，高效解決 80% 的開(kāi)發(fā)難題。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
