整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
方建筑史對于網(wǎng)頁設(shè)計的進(jìn)化有重大參考意義。作為一種藝術(shù)形式，兩者都遵循以下事實：
- 它們是人們前往的地方。
- 它們都承擔(dān)著這件務(wù)實的工作。
- 科技的演進(jìn)在限制著工程技術(shù)。
- 還有，它們至今絕對仍屬于藝術(shù)范疇。
在這些限制條件下，兩者的演化路徑驚人相似，都建立在過去的基礎(chǔ)上，以近似的方式產(chǎn)生影響。如果想知道網(wǎng)頁設(shè)計將去向何方，可以看看建筑領(lǐng)域發(fā)展到了什么地步。
簡單、有限的結(jié)構(gòu)
巨石陣，公元前3000-2000年；W3.org，1992年
除了稍微調(diào)整了尺寸和位置，它只是把東西擺在相應(yīng)的地方。
秩序與均衡，略帶修飾
巴特農(nóng)神廟，公元前437年；Yahoo.com，1996年
古典建筑時代精煉了對稱與層級，采用了涇渭分明的區(qū)域劃分，承擔(dān)不同的用途。所用媒介（石頭、像素）的外觀也效仿先前的材質(zhì)：石質(zhì)的三豎線裝飾象征著木質(zhì)橫梁，就像用3D按鈕表現(xiàn)物理按鍵。
更厚重的形式與更圓潤的邊緣
瑪麗亞拉赫修道院，公元1093年；Apple.com，2000年
柔化邊緣的同時，羅馬式建筑時期也加厚了隔墻——菜單和按鈕也一樣——創(chuàng)造更龐大、厚重、易點擊的形式。
華麗、令人著迷
蘭斯大教堂，公元1211年；Maroon5.com，2005年
CSS和FLash就是網(wǎng)頁設(shè)計中的彩色玻璃。基本元素到位，我們就開始選用看似不可能的材料。哥特式建筑將石頭變?yōu)榉粗亓Φ膲雅e，令人屏息。雖然如今難以記得，那些早年的Flash和CSS網(wǎng)站，僅憑像素就使我們驚異不已。
沒錯，我將早期的Maroon 5網(wǎng)站與蘭斯大教堂進(jìn)行了對比。
干凈、精確、合乎邏輯
維琴察圓頂別墅，公元1567年；Rdio.com，2012年
這就是我們?nèi)缃竦碾A段，近年來的“扁平式設(shè)計”趨勢，與文藝復(fù)興時期建筑驚人相似。文藝復(fù)興建筑呼吁古典邏輯的回歸。簡單的幾何學(xué)形式取代了華麗的復(fù)雜度。設(shè)計變得更干凈。人們開始發(fā)表新準(zhǔn)則的論述，一切都在變化。
接下來，我開始走進(jìn)未來…
扭曲一切準(zhǔn)則
羅馬圣卡羅教堂，公元1638年；未定義，2017年
合乎邏輯、保持精確的樂趣只持續(xù)了這么久。最終我們開始打破規(guī)則。在建筑設(shè)計中，這意味著真正打破部分古典元素，將他們扭曲成某種復(fù)雜的形式。與文藝復(fù)興時期的理性主義相比，巴洛克式設(shè)計更富于情感和戲劇性。
我們在網(wǎng)頁設(shè)計上會怎么做？這很難說。只要再等等，它幾年內(nèi)就會顯現(xiàn)。
Harkening back to the past
聆聽過去
先賢祠（巴黎），公元1790年；未定義，2022年
一切周而復(fù)始。一旦獲得足夠的進(jìn)展，我們會開始贊美最初的經(jīng)典，全面復(fù)古。只要一定時間。新古典主義網(wǎng)頁設(shè)計就在遙遠(yuǎn)的前方——雖然舊時代的Yahoo網(wǎng)站在我們看來很遜，并不莊嚴(yán)。但是6、7年后呢？它可能又很酷了。
我們大概知道了。它會類似于新羅馬主義或是新哥特式的形式。總之是某些新形式。藝術(shù)會持續(xù)以復(fù)活重生的形式延續(xù)自身。最終呢？新的科技和新世界觀會到來，我們?nèi)缃袷菬o法想象的。
然后一切開始變得神奇超然。
可樂橙，微信公眾號：可樂橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專欄作家，UI/UX設(shè)計師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技。現(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中。或許不是一名優(yōu)秀的設(shè)計師，至少是個快樂的設(shè)計師。
轉(zhuǎn)載請保留上述作者信息并附帶本文鏈接
作者信息：Mike Sall
Product Science at @Medium
ypeScript 是 JavaScript 的一個超集，它添加了靜態(tài)類型檢查功能。這不僅可以提高開發(fā)效率，還能在編寫代碼階段發(fā)現(xiàn)潛在錯誤，為大型項目或團(tuán)隊協(xié)作提供更強(qiáng)的規(guī)模化支持。本文將詳細(xì)介紹 TypeScript 中的數(shù)據(jù)類型，包括基礎(chǔ)類型、任意類型、聯(lián)合類型、類型別名、枚舉、數(shù)組、元組、高級類型及示例。
最基本的數(shù)據(jù)類型是簡單的 true/false 值，它在 TypeScript 里叫做 boolean。
let isDone: boolean=false;
與 JavaScript 一樣，TypeScript 里的所有數(shù)字都是浮點數(shù)。這些數(shù)字的類型是 number。
let decimal: number=6;
let hex: number=0xf00d;
let binary: number=0b1010;
let octal: number=0o744;
另一種基礎(chǔ)部分是字符串。如同 JavaScript，TypeScript 也使用雙引號 (") 或單引號 (') 表示字符串。
let color: string="blue";
color='red';
TypeScript 像 JavaScript 一樣可以操作數(shù)組元素。有兩種方式可以定義數(shù)組。第一種，可以在元素類型后面接上 []，表示由此類型元素組成的一個數(shù)組：
let list: number[]=[1, 2, 3];
第二種方式是使用數(shù)組泛型，Array<元素類型>：
let list: Array<number>=[1, 2, 3];
元組類型允許表示一個已知元素數(shù)量和類型的數(shù)組，各元素的類型不必相同。
let x: [string, number];
x=["hello", 10];
enum 類型是對 JavaScript 標(biāo)準(zhǔn)數(shù)據(jù)類型的一個補(bǔ)充。使用枚舉類型可以為一組數(shù)值賦予友好的名字。
enum Color {Red, Green, Blue}
let c: Color=Color.Green;
有時候，我們會需要在編程階段還不清楚類型的變量指定一個類型。這些值可能來自于動態(tài)的內(nèi)容，比如來自用戶輸入或第三方庫。這種情況下，我們可以使用 any 類型來標(biāo)記這些變量。
let notSure: any=4;
notSure="maybe a string instead";
notSure=false; // okay, definitely a boolean
聯(lián)合類型表示一個值可以是幾種類型之一。用豎線（|）分隔每個類型，所以 number | string | boolean 表示一個值可以是 number，string，或 boolean。
let multiType: number | string | boolean;
multiType=20; // okay
multiType="hello"; // okay
multiType=false; // okay
你可以通過指定一個變量只能是幾個字面量之一來縮小它的范圍來進(jìn)一步控制類型。
let literalType: "hello" | "world" | 42;
literalType="hello"; // okay
literalType=42; // okay
// literalType="anythingElse"; // Error: Type '"anythingElse"' is not assignable to type '"hello" | "world" | 42'.
類型別名用來給一個類型起一個新名字。類型別名有時和接口很像，但是可以作用于原始值，聯(lián)合類型，元組以及其它任何你需要手寫的類型。
type StringOrNumber=string | number;
function processValue(value: StringOrNumber) {
// ...
}
TypeScript 會在沒有明確的指定類型的時候推測出一個類型，即“類型推論”（Type Inference）。
let someValue="this is a string";
// `someValue` is inferred to be of type `string`
有時你會遇到這樣的情況，你會比 TypeScript 更了解某個值的詳細(xì)信息。通常這會發(fā)生在你清楚地知道一個實體具有比它現(xiàn)有類型更確切的類型。通過類型斷言這種方式可以告訴編譯器，“相信我，我知道自己在干什么”。類型斷言像是其他語言里的類型轉(zhuǎn)換，但是不進(jìn)行特殊的數(shù)據(jù)檢查和解構(gòu)。
let someValue: any="this is a string";
let strLength: number=(someValue as string).length;
在 TypeScript 的宏大世界中，了解不同的數(shù)據(jù)類型及其用法是構(gòu)建強(qiáng)健和類型安全應(yīng)用程序的基礎(chǔ)。本文提供了基礎(chǔ)類型和高級類型的詳細(xì)描述及充足的示例，希望能夠幫助您更好地理解和掌握 TypeScript 數(shù)據(jù)類型的使用。隨著 TypeScript 帶給我們的不斷創(chuàng)新和改進(jìn)，我們可以構(gòu)建更加健壯和維護(hù)性更強(qiáng)的代碼，最終提高我們軟件開發(fā)的效率和質(zhì)量。
他們是由W3C推薦的前端三件套，并且互相之間可以很好地配合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 關(guān)于網(wǎng)頁的一些屬性 -->
<!-- css樣式 -->
</head>
<body>
<!-- 主體內(nèi)容 -->
</body>
</html>
剛學(xué)半年web，只是寫個作業(yè)可以這么用吧(●’?’●)
前為名字，后為文件格式
項目名 文件夾
images 文件夾
css 文件夾
網(wǎng)站名1.css
...
html 文件夾 也可以直接把每個網(wǎng)站卸載更外面一層
網(wǎng)站名1.thml
...
html的內(nèi)容由一個個標(biāo)簽 嵌套或并列 組成
標(biāo)簽用 <標(biāo)簽名>內(nèi)容</標(biāo)簽名> 或者 <標(biāo)簽名/>
文字可以直接輸入，標(biāo)簽只不過是用來控制他們的 位置和顯示效果 的
通用的標(biāo)簽主要
前者較為普遍；后者教為特殊
主要用來定一個區(qū)域來 劃分更小的區(qū)域或者直接寫入內(nèi)容。
使用時用前者。
有許多特殊的標(biāo)簽，他們沒有特別之處，只是特別拎出來以方便理解文件的整個結(jié)構(gòu)
如
英文 | 通常的內(nèi)容 |
header | 頁眉 |
nav | 導(dǎo)航欄 |
main | 主要內(nèi)容 |
article | 與上下文無關(guān)的獨立內(nèi)容 |
section | 其中一個區(qū)域 |
aside | 側(cè)欄或邊欄 |
footer | 頁腳 |
detail | 某個細(xì)節(jié)的描述 |
summary | detail的標(biāo)題 |
最后兩個detail和summary通常是相互配合的。
上面這些都是有著特殊用處的標(biāo)題，可以用下面的這些替代，但使用時相對復(fù)雜一些
主要用來直接寫入內(nèi)容。
使用時前后使用方法的皆有
空行之前的表示重要
用前者的有
英文 | 含義 |
h1 | 標(biāo)題，字體最大的標(biāo)題 |
中間部分 | 字體依次減小的標(biāo)題 |
h6 | 標(biāo)題，字體最小的標(biāo)題 |
p | 段落 |
br | 換行 |
- | - |
hr | 水平線 |
sub | 下標(biāo)文本 |
sup | 上標(biāo)文本 |
ins | 插入文本 |
del | 刪除文本 |
wbr | 此處適合換行 |
pre | 預(yù)格式文本 |
address | 表示地址 |
bdo | 文字方向 |
blockauote | 長的引用語 |
q | 短的引用語 |
mark | 定義有記號的文本 |
table te td th是相互配合組成一個表格的,table>tr>td
表格 | |
table | 表格 |
tr | 行標(biāo)簽 |
td | 列標(biāo)簽 |
th | 標(biāo)題列 |
li必須在ol或ul內(nèi)。通常用ul li
列表 | |
ol | 有序列表 |
ul | 無序列表 |
li | 列表項 |
表單可以用作問卷等
input屬性typr value
表單 | |
form | 表單 |
label | 點擊時自動定位到里面的input |
input | 輸入 |
select | 多選 |
option | 多選的一個選項 |
用后者的有
英文 | 含義 |
br | 換行 |
img | 引入圖片 |
video | 引入視頻 |
audio | 引入 |
abbr | 此處適合換行 |
img video audio使用時需要更多的屬性，比如URL路徑等
以video為例：<video src="路徑" autoplay="autoplay" controls="controls"/>
依次表示 URL路徑 自動播放 顯示播放器控件
他們有各自的屬性
都必須有src屬性以表示路徑，img只需要src即可顯示
各自可以在屬性里選擇width和height以顯示寬度和高度（這兩個在css 屬性里介紹）
video和audio（他們有一樣的可選屬性）的其他可選屬性在下面顯示,一般一個只有一個可選擇的值，那個值就是名字自己(言下之意就是，只寫自己需要的屬性)
英文 | 作用 |
autoplay | 自動播放 |
controls | 顯示控件 |
loop | 循環(huán)播放 |
poster | 定義視頻下載時需要的圖像，值用路徑表示 |
preload | autoplay時無效，定義文件預(yù)加載的時機(jī)，有3個值，具體在下面介紹 |
muted | 靜音 |
preload的值
auto：默認(rèn)值，直接加載 音頻/視頻
metadata：僅加載 音頻/視頻 元數(shù)據(jù)
none：不加載 音頻/視頻
用于標(biāo)簽的定義
class表示類，可以用于很多類似的標(biāo)簽，以方便使用一樣的css樣式
id是唯一的，可以為獨特的標(biāo)簽單獨使用樣式
css一共有3段：選擇器{屬性:值;…}
樣式有3種添加的方法
常見的偽 選擇器/元素 | 表示方法 |
通用選擇器 | * |
標(biāo)簽選擇器 | 標(biāo)簽名 |
類選擇器 | .類名 前面是一個下點 |
ID選擇器 | #ID號 |
- | 以下選擇器用于分隔不同的選擇器 |
后代選擇器 | 一個空格，其實這不是個選擇器（但很像），可以選擇出所有的后代 |
分組選擇器 | , 逗號 |
子元素選擇器 | > |
- | 以下選擇器均需緊跟在最上面的選擇器后 |
相鄰兄弟選擇器 | + |
不相鄰兄弟選擇器 | ~ |
屬性選擇器 | [屬性值] 詳細(xì)介紹 |
偽類選擇器 | :單詞 詳細(xì)介紹 |
偽屬性 | ::單詞 詳細(xì)介紹 |
后一個選擇器不一定是前一個的子元素，也可以通過一些符號進(jìn)行兄弟之間的變化 |
div>p
選中選中div中的p子元素（沒有中間層的關(guān)系）
div+p
選中跟在div后的p
div~p
選中前面有相同父元素的div 的p
| 屬性選擇器 | 介紹，有紅字是因為|豎線在編輯器里是特殊字符，在代碼塊內(nèi)才能正常顯示 |
|–|–|
| [屬性] | 具有該屬性的 |
|[屬性=某值]|屬性=某值的|
|[屬性~=某值]|屬性=用空格分隔的字詞列表，某值是其中一個值
|[屬性|=某值]|屬性=用|分隔的字詞列表，某值是其中一個值
|[屬性^=某值]|具有該屬性，以 某值 開頭
|[屬性$=某值]|具有該屬性，以 某值 結(jié)尾
|[屬性*=某值]|具有該屬性，包含 某值
這類選擇器全部按前面（一部分）選擇器的介紹，緊跟在后面，以":"(冒號)為標(biāo)識符（即以它開頭，可以看成選擇器的一部分）
以下均不寫冒號
偽類選擇器 | 介紹 |
- | 下面定義的是應(yīng)用于超鏈接文本a的4種(鼠標(biāo)在該元素的)狀態(tài)， |
link | 正常狀態(tài)（未訪問） |
visited | 被訪問之后 |
hover | 經(jīng)過時 |
active | 單機(jī)被激活時 |
偽類選擇器也有一些分類，見下 | |
結(jié)構(gòu)偽類選擇器 | 介紹 |
– | – |
first-child | 第一個子元素 |
lastchild | 最后一個子元素 |
- | 注意以下4個帶()的，()內(nèi)可以是一個算式或數(shù)字，選中符合結(jié)果的(可以是多個) |
nth-child() | 正數(shù) 第()個子元素 |
nth-last-child() | 倒數(shù) 第()個子元素 |
nth-of-type() | 父元素的 第()個同類子元素 |
nth-last-of-type() | 父元素的 倒數(shù) 第()個同類子元素 |
first-of-type | 父元素的 第一個同類子元素 |
last-of-type | 父元素的 倒數(shù) 第一個同類子元素 |
only-child | 父元素的唯一的子元素，(當(dāng)然，)可能有很多子元素是唯一的 |
only-of-type | 父元素的唯一一個相同類型的子元素 |
empty | 沒有任何內(nèi)容的子元素 |
狀態(tài)偽類選擇器 | 介紹，UI元素一般指包含在form元素內(nèi)的表單元素 |
enabled | 范圍內(nèi)的所有可用UI元素 |
disabled | 范圍內(nèi)的所有不可用UI元素 |
checked | 范圍內(nèi)的所有可用UI元素 |
否定偽類選擇器 | |
not() | 不匹配該元素的選擇器，()里是一個選擇器的屬性，將選取 不符合該選擇器 的元素 |
目標(biāo)偽類選擇器 | |
target | 前面的匹配元素被相關(guān)URL指向，樣式效果才生效，是動態(tài)選擇器 |
用法：緊跟在后面，用兩個":“作為標(biāo)識符（也可以只用一個，但兩個更好）。css樣式里需包含content屬性，值為帶引號的字符（當(dāng)然也可以什么都不寫）
如：div:after{content=”";}
偽元素 | 介紹 |
before | 在前面插入一段文字 |
after | 在后面插入一段文字 |
用途：廣泛
用法：有數(shù)字和單位組成：200px
當(dāng)數(shù)字為0時，單位可有可無
使用頻率：px最常用，其次em
單位有絕對和相對之分
相對單位 | 單位長度的含義 |
px | 像素(Pixel) |
em | 相對于父元素字體大小的倍數(shù) |
ex | 相對于字符x的高度，通常為字體高度的一半 |
ch | 相對于數(shù)字0的寬度 |
rem | 相對于根元素(html)字體大小的倍數(shù)。若未被設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸（一般為16px） |
vw | 相對于視口的寬度（視口被均分為100vw） |
vh | 相對于視口的高度（視口被均分為100vw） |
xmin | 相對于視口的 高度或?qū)挾?中較小的那個（小的被均分為100vmin） |
vmax | 相對于視口的 高度或?qū)挾?中較大的那個（大的被均分為100vmax） |
– | – |
絕對單位 | 單位長度的含義 |
pt | 點(point) |
pc | 派卡(pica)，=我國新四號鉛字的尺寸 |
in | 英寸(inch) |
cm | 厘米(centimeter) |
mm | mm(millimeter) |
用途：屬性transition(變化時間)
用法：數(shù)字+單位：200ms
使用頻率：都常用
單位 | 含義 |
s | 秒 |
ms | 毫秒 |
用途：
用法：數(shù)字+單位：120deg
使用頻率：第一個deg最常用
單位 | |
deg | 角度(degrees) ，一個圓 360° |
grad | 梯度(gradians)，一個圓 400梯度 |
rad | 弧度(radians)，一個圓 PI |
turn | 轉(zhuǎn)、圈(turns) |
用途：color，background(-color)
用法：值
使用頻率：2和-1最為常用，-1代表最后一個
值 | 描述 |
white | 白色 |
具體英文單詞↑ | 代表這個單詞指代的顏色 |
rgb(r,g,b) | RGB值，rgb分別代表紅綠藍(lán)，[0,255] |
rgba(r,g,b,a) | 見上↑.a代表透明度 [0,1] |
rgb(r%,g%,b%) | RGB值(255*x%)，三個值[0,100] ,最后即為0%-100% |
#rrggbb | RGB值，每個值用 兩位 16進(jìn)制數(shù) 表示（大小寫不敏感），最后值在0-255 |
hsl(h,s,l) | hsl分別代表 色相(hue,[0,360])/飽和度(saturation,[0%,100%])/亮度(lightness,[0%,100%]) |
hsla(h,s,l,a) | ↑ a代表透明度 |
只在屬性font-family中用到，定義字體類型
{font-family="微軟雅黑"}
也可以不用雙引號
{font-family=微軟雅黑}
長度表示一欄：
1：值完全用長度表示，下面不再具體介紹
其他值的類型：值不能用長度表示，能用其他的較規(guī)范的表示表示
0：值不能用長度表示，也無法用其他規(guī)范的值表示
＞1：有多個值，都用長度表示（同時出現(xiàn)多個值：長度可變）
屬性 | 含義 | 長度表示 |
width | 寬度 | 1 |
height | 高度 | 1 |
position | 定位方式 | 字符 |
display | 顯示方式 | 字符 |
float | 浮動方式 | 字符 |
clear | 清除部分浮動 | 字符 |
margin | 外邊距 | 1-4 |
border | 邊框 | 1-4 |
padding | 內(nèi)邊距 | 1-4 |
text-align | 字體左右的對齊方式 | 字符 |
text-indent | 文字之前空多少長 | 1 |
background | 背景，包括背景圖，背景色，是否重復(fù) | 0 |
line-heignt | 行高 | 1 |
font-family | 字體 | 字符 |
font-size | 字的大小 | 1 |
font-weight | 字的粗細(xì) | 1 |
color | 字的顏色 | 顏色 |
opacity | 透明度0-1 | 0 |
z-index | 離屏幕遠(yuǎn)近，越大越顯示在上面 | 0 |
transition | 狀態(tài)變化的時間 | 時間 |
animation | 動畫 | 0 |
overflow | 溢出 | 字符 |
值 | 含義 |
absolute | 絕對定位，相對于最近的定位過的父元素偏移 |
relative | 相對定位，在文件流中，相對自生原本在的位置偏移 |
fixed | 絕對定位，相對視口偏移 |
這里提到了偏移，它相對于定位的位置進(jìn)行偏移 | |
relative在文件流中的意思是，在這個頁面中單獨占據(jù)一塊空間，原始位置不會與在文件流中的同級元素重疊 |
block，none，grid較為常用
值 | 含義 |
block | 塊狀元素 |
none | 不顯示 |
flex | flex布局 |
grid | grid布局 |
inline | 行內(nèi)元素 |
inline-block | 行內(nèi)塊元素 |
grid和flex可以去網(wǎng)上找資料學(xué)習(xí)
著重介紹一下grid布局
含義：可以方便地進(jìn)行網(wǎng)格狀的布局，而后可以隨意組合，分配給子元素
有許多屬性和它配合使用（前提：display:grid，至少與前3個一起使用，前4個可以更美觀地表示）
屬性 | 含義 | 用法與解釋 |
grid-template | 融合了下面上半部分的所有項 | 較為復(fù)雜，不講 |
grid-template-rows | 每行的寬度（單獨設(shè)置） | 多個 長度/auto/xfr 表示，有幾行寫幾個(空格分開) |
grid-template-colums | 每列的寬度（單獨設(shè)置） | ↑ 有幾列寫幾個 |
grid-template-areas | 給每個格子命名，名字一樣則合并 | 每行一對雙引號，（適當(dāng)使用回車） |
grid-gap | 行間距和列間距（統(tǒng)一設(shè)置） | 行間距 列間距 |
grid-row-gap | 行間距（統(tǒng)一設(shè)置） | 長度 |
grid-colum-gap | 列間距（統(tǒng)一設(shè)置） | 長度 |
place-items | 內(nèi)容的 左右和上下 位置情況 | ↓ start/end/center/stretch |
align-items | 內(nèi)容的 左右 位置情況 | ↑ 開頭/末尾/中間/拉伸以盛滿 |
justify-items | 內(nèi)容的 上下 位置情況 | ↑ 對align來說，左是開頭，右是末尾 |
place-content | 整個表格 左右和上下 位置情況 | ↑ 對juestify來說，上是開頭，下是末尾 |
align-content | 整個表格的 左右 位置情況 | ↑有兩個值的(place)，用空格分開 |
justify-content | 整個表格的 上下 位置情況 | ↑ |
– | – | 以下都是子元素獲得父元素分配的某個空間的語句 |
grid-template-area | 用指定的名字獲取父類給這個名字的空間 | 字符串 |
– | – | 以下用 起始/末尾 的(間隔,即gap) 行/列 獲得空間 |
grid-area | 起始/末尾 的 行/列 | 起始行/起始列/末尾行/末尾列 |
grid-row | 起始/末尾 的行 | 起始行/末尾行 |
grid-row-start | 起始 行 | 起始行 |
grid-row-end | 末尾行 | 末尾列 |
grid-column | 起始/末尾 的列 | 起始列/末尾列 |
grid-column-start | 起始列 | 起始列 |
grid-column-end | 末尾列 | 末尾列 |
著重介紹一下flex布局
含義：可以方便地進(jìn)行彈性布局，尤其是垂直對齊的問題
有許多屬性和它配合使用（前提：display:flex）
| 屬性 | 含義
|–|–|–|
|flex-direction| 決定主軸的方向
| justify-content | 子元素在主軸方向上的分布方式
| align-items | 子元素在副軸方向上的分布方式
flex-direction的值 | 含義 |
row | 從上到下 |
row-reserve | 從下到上 |
column | 從左到右 |
column-reserve | 從右到左 |
justify-content的值 | 含義 |
flex-start | 主軸起始除處 |
flex-end | 主軸末尾處 |
center | 主軸中間 |
space-around | 元素兩邊留空隙，每個元素各占一份，不會像magin一樣重合 |
space-between | 元素之間留空隙，這意味著最邊上沒有空隙 |
align-items的值 | 含義 |
flex-start | 副軸起始除處 |
flex-end | 副軸末尾處 |
center | 副軸中間 |
stretch | 全部占滿 |
不設(shè)置這個屬性，它可能會在區(qū)域之外顯示
值 | 含義 |
auto | 超出長度時，可滾動 |
hidden | 隱藏 |
其他 | - |
分別代表 外邊距/邊框/內(nèi)邊距
他們都可以用4個長度值表示，分別代表 上右下左 的長度
也可以有auto值，即自動，它會使兩邊相等
如 margin:0 auto;
它的左右兩邊是相等的
后面的值可以省略，但至少有第一個值
第4個值（左）省略，則=第2個值（右）
第3個值（下）省略，則=第1個值（上）
第2個值（右）省略，則=第1個值（上）
他們的四個值可以單獨設(shè)置，以margin為例子
margin-top，margin-right，margin-bottom，margin-left
值 | 含義（浮動方向/對齊方向） |
left | 左 |
center | 中 |
right | 右 |
先清除上一個區(qū)域來的浮動（float），而后可以設(shè)置自己的浮動
值 | 清除浮動 |
left | 左 |
right | 右 |
both | 左右 |
屬性自由書寫,其中的屬性可以缺少一些或調(diào)換順序
下面是兩個較頻繁使用的格式
有多個子屬性
子屬性 | 含義 | 值 |
background-image | 圖片鏈接 | url(“路徑”) |
background-repeat | 是否重復(fù) | repeat/no-repeat |
background-position | 背景圖的起始位置 | |
background-position-x | 離左邊距離 | 長度/x% |
background-position-y | 離上邊距離 | 長度/y% |
background-color | 背景色 | 顏色 |
background-size | 背景大小 | 長度 長度 |
background-attachment | 是否隨著滾動而滾動 | scroll(默認(rèn))/fixed(不會)/local(會) |
<script type="text/javascript">
變量及賦值
計算語句
函數(shù)
事件
</script>
一定有事件，因為沒有事件，js就沒有什么意義
所有類型的變量 都用 var 變量名=值; 來定義
數(shù)據(jù)類型 | 含義 | 值 |
Undefined | 定義但未賦值 | undefined |
Null | 未定義，由Undefined衍生而來，值==undef | null |
Boolean | 布爾類型 | true false |
Number | 數(shù)字，正數(shù)，浮點數(shù)等， | 數(shù)字 |
String | 字符串，用單引號或雙引號都可 | 字符串 |
Object | 項目，上面有屬性，如{name:“myname”,age:18} | |
Array | 數(shù)組可以混雜其他類型，如[1,“myname”] | |
DOM對象 | 一個具體的標(biāo)簽，如window, document,element |
可用數(shù)據(jù)類型 | 數(shù)據(jù)類型相關(guān)函數(shù) | 目的類型 | 含義與用法 |
Boolean Number | toString() | String | 變換成字符串 |
- | 下面兩個 String轉(zhuǎn)Number 的函數(shù) | - | 下面的都把源操作數(shù)放()里 |
String | praseInt() | 整數(shù)(Number) | 字符串變整數(shù) |
String | praseFloat() | 浮點數(shù)(Number) | 字符串變浮點數(shù) |
- | 下面的是三種強(qiáng)制類型轉(zhuǎn)換 | - | |
所有 | Boolean() | Boolean | 空字符串 0 undefined null 值為false，其他的true |
所有 | Number() | Number | 匹配整個數(shù)，fasle null為0，true為1 |
所有 | String() | String | 強(qiáng)制類型轉(zhuǎn)換，變成字符串 |
isNaN | 判斷是不是數(shù) |
賦值符 | 含義 |
= | 右邊賦給左邊 |
– | – |
運算符 | |
+ | 加 |
- | 減 |
* | 乘 |
/ | 除 |
% | 余 |
++ | 自增，放在數(shù)的 前/后 不一樣 |
? : | 三目運算符 |
( ) | 提高優(yōu)先級，左括號，右括號 |
- | - |
判斷符 | |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 值相等 |
!= | 值不相等 |
=== | 值和類型 都相等 |
!== | 值和類型 都不相等 |
- | - |
運算賦值符 | 左邊的值加上右邊的值，再賦值給左邊 |
+= | |
-= | |
*= | |
\= | |
%= |
語句 | 使用 |
定義及賦值 | var i=3;也可以單獨定義/賦值，定義統(tǒng)一用var |
選擇(分支) | if-else或switch–case-default-break |
循環(huán) | for或while或do-while |
跳出 | break或continue |
返回 | return |
一個事件只能綁定一個函數(shù)，如果一個事件要做多件事情，都放到一個函數(shù)里
表達(dá)形式：(被觸發(fā))對象.事件屬性=…
不只是a有事件屬性，其他的標(biāo)簽都有事件屬性
事件屬性有很多，根據(jù)可以觸發(fā)者（比如鼠標(biāo)，鍵盤，窗口）的不同分類
只列舉常用的
鼠標(biāo)觸發(fā)：onclick（點擊），onmouseover（鼠標(biāo)再其上，和選擇器hover有點像，但有不同）
窗口觸發(fā)（被觸發(fā)對象必須是window）：onload（窗口完成后）
動態(tài)綁定
寫在js樣式里，被包含在其他的事件的函數(shù)中綁定
對象需要給出
參照函數(shù)的三種綁定方式
靜態(tài)綁定
直接在標(biāo)簽里綁定，這時候?qū)ο缶褪亲约哼@個標(biāo)簽
參照函數(shù)的第2種
比如 <p onclick="函數(shù)名(參數(shù))">
函數(shù)里的組成與js的組成成分一致
函數(shù)定義的3種方式
參數(shù)可以有多個，定義時不需要聲明類型，只需要參數(shù)名即可
第2種定義方式可以讓定義在標(biāo)簽內(nèi)的事件連結(jié)到這個函數(shù)
事件綁定
前兩種定義方式
不需要 (參數(shù))
需要用到匿名函數(shù)
直接用 事件=函數(shù)名(參數(shù)); 的結(jié)果
是 直接觸發(fā)事件
第3種定義方式一般直接賦給內(nèi)部的事件，即 事件=function (){函數(shù)體}
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
