整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML是超文本標(biāo)記語言。
web標(biāo)準(zhǔn)是由W3C和其它標(biāo)準(zhǔn)化組織制成集合。
結(jié)構(gòu)（對(duì)網(wǎng)頁元素進(jìn)行整理和分類-HTML）
表現(xiàn)（設(shè)置網(wǎng)頁元素的版式，顏色，大小等外觀樣式-CSS）
行為（模型的定義及交互的表現(xiàn)-JS）
加粗:<strong>和<b>
傾斜：<em>和<i>
刪除線：<del>和<s>
下劃線：<ins>和<u>
<div>分割分區(qū)<span>跨度跨距
圖片標(biāo)簽<img/>
屬性: src圖片路徑
alt替換文本，圖片無法正常顯示
title提示文本，鼠標(biāo)放到圖像顯示
width寬度，height高度（只需要修改其中一個(gè)）
border邊框（無需單位直接寫數(shù)值）
注意：
①圖像標(biāo)簽可以擁有多個(gè)屬性，必須寫在標(biāo)簽名后面
②屬性之前不分先后順序，標(biāo)簽名與屬性，屬性與屬性之間需要空格分開
③屬性采取鍵值對(duì)的格式
相對(duì)路徑：以引用文件所在位置為參考基礎(chǔ)
（同一級(jí)路徑，下一級(jí)路徑/，上一級(jí)路徑../）
絕對(duì)路徑：從盤符開始的路徑（\）
常用屬性
img ——vspace垂直邊距 ，hspace水平邊距 align對(duì)齊
details,summary，鼠標(biāo)點(diǎn)擊時(shí)顯示或隱藏
mark 文本中高亮顯示，和strong相似
cite 用于引用標(biāo)記，斜體顯示
draggable true選中后可以拖動(dòng)操作
font定義 font-style font-weight font-size/line-height font-family 順序不能改變
word-wrap break-word長單詞或url地址自動(dòng)換行
letter-spacing字間距
word-spacing單詞間距
line-height行間距
text-decorantion文本裝飾unline下劃線，overline上劃線，line-through刪除線
text-indent 2em 首行縮進(jìn)兩個(gè)字符
white-space空白符處理 pre
box-sizing:content-box當(dāng)widthh和height的時(shí)候不包括margin和panding
更換圖層位置，z軸偏移z-index:-10
align-items:center居中對(duì)齊
align-self:center
超鏈接標(biāo)簽<a>
href鏈接目標(biāo)地址
target鏈接頁面打開的方式（_self當(dāng)前窗口打開,_blank新窗口中打開方式）
外部鏈接，內(nèi)部鏈接，空鏈接，下載鏈接，網(wǎng)頁元素鏈接，錨點(diǎn)鏈接（快速定位到頁面的某個(gè)位置- 添加id屬性）
去除超鏈接樣式:text-decoration:none
特殊字符
空格符
小于號(hào)< 大于號(hào)>
表格標(biāo)簽
align對(duì)齊方式
bolder表格邊框
cellpadding單元格與內(nèi)容之間空白
cellspacing單元格與單元格之前空白
合并單元格：rowspan colspan
列表標(biāo)簽
無序列表：ul li
有序列表：ol li
自定義列表：dl dt dd
表單標(biāo)簽
完整表單：表單域<form>，表單控件，提示信息
<form>
——action（指定接受并處理表單數(shù)據(jù)的服務(wù)器程序的url地址）
——method（get/post設(shè)置表單數(shù)據(jù)的提交方式）
——name（指定表單名稱）
<input>輸入元素
type屬性：button（點(diǎn)擊按鈕）checkbox（復(fù)選框）file（輸入字段和“瀏覽”按鈕）hidden（隱藏輸入字段）image（圖片形式提交按鈕）password（密碼字段）radio（單選按鈕）reset（重置按鈕）sumbit（提交按鈕）text（單行輸入字段，默認(rèn)20個(gè)字符）
name屬性：（相同的名字——單選框和復(fù)選框）區(qū)別不同表單元素
value屬性：定義input元素值
checked屬性：頁面首次加載是否選中
maxlength屬性：輸入字段的最大值
<lable>標(biāo)簽
用于綁定一個(gè)表單元素，當(dāng)點(diǎn)擊<lable>標(biāo)簽內(nèi)的文本時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到或者選擇對(duì)應(yīng)的表單元素上，用來增加用戶體驗(yàn)。
<lable>標(biāo)簽的for屬性與相關(guān)元素的id屬性相同
<select>下拉列表元素
-<option>
-selected="selected"默認(rèn)選中
<textarea>文本域
-cols rows （每行每列字?jǐn)?shù)）
者：薔薇Nina
原文：https://www.cnblogs.com/wcwnina/p/11297630.html
在CSS里，標(biāo)簽位置居中一直是困擾Web前端的難題。在本文中，我對(duì)這類問題進(jìn)行了探究和給出了幾點(diǎn)建議，供讀者參考。
在父級(jí)標(biāo)簽中使用 text-align: center。
效果：
如果是單行，則為該標(biāo)簽設(shè)置行高（line-height）且與其父級(jí)標(biāo)簽 height 相等即可。
效果：
如果是多行，稍微有點(diǎn)麻煩，需要在該標(biāo)簽設(shè)置 display: table-cell 和 vertical-align: middle，在其父級(jí)標(biāo)簽設(shè)置 display: table。
效果：
方法一：在父級(jí)標(biāo)簽中使用 flex 彈性盒子。
效果：
方法二：在該標(biāo)簽中使用 margin 屬性。
效果：
在父級(jí)標(biāo)簽中使用 flex 彈性盒子。
效果：
總結(jié)：對(duì)于行內(nèi)標(biāo)簽居中，優(yōu)先考慮文本對(duì)齊（text-align）和顯示單元格（table-cell）；對(duì)于塊標(biāo)簽居中，優(yōu)先考慮顯示彈性盒子（flex）。
SS 浮動(dòng)屬性一直是網(wǎng)站上排列元素的主要方法之一，但是當(dāng)實(shí)現(xiàn)復(fù)雜布局時(shí)，這種方法不總是那么理想。幸運(yùn)的是，在現(xiàn)代網(wǎng)頁設(shè)計(jì)時(shí)代，使用 Flexbox 和 CSS Grid 來對(duì)齊元素，變得相對(duì)容易起來。
使用 Flexbox 可以使元素對(duì)齊變得容易，因此 Flexbox 已經(jīng)被廣泛使用了。
同時(shí)，CSS Grid 布局也為網(wǎng)頁設(shè)計(jì)行業(yè)帶來了很大的便利。雖然 CSS Grid 布局未被廣泛采用，但是瀏覽器逐漸開始增加對(duì) CSS Grid 布局的支持。
雖然 Flexbox 和 CSS Grid 可以完成類似的布局，但是本次，我們學(xué)習(xí)的是如何組合使用這兩個(gè)工具，而不是只選擇其中的一個(gè)。在不久的將來，當(dāng) CSS Grid 布局獲得完整的瀏覽器支持時(shí)，設(shè)計(jì)人員就能夠利用每個(gè) CSS 組合的優(yōu)勢，來創(chuàng)建最有效和最有趣的布局設(shè)計(jì)。
我們從一個(gè)很簡單且熟悉的布局類型開始，包括標(biāo)題，側(cè)邊欄，主要內(nèi)容和頁腳等部分。通過這樣一個(gè)簡單的布局，來幫助我們快速找到各種元素的布局方法。
下面是需要?jiǎng)?chuàng)建的內(nèi)容：
要完成這個(gè)基本布局， Flexbox 需要完成的主要任務(wù)包括以下方面：
創(chuàng)建完整寬度的 header 和 footer
將側(cè)邊欄放置在主內(nèi)容區(qū)域左側(cè)
確保側(cè)邊欄和主內(nèi)容區(qū)域的大小合適
確保導(dǎo)航元素定位準(zhǔn)確
<div class="container"> <header> <nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> <button></button> </header> <div class="wrapper"> <aside class="sidebar"> <h3></h3> </aside> <section class="main"> <h2></h2> <p></p> </section> </div><!-- /wrapper --> <footer> <h3></h3> <p></p> </footer></div><! -- /container -->
Header 樣式
我們從外到內(nèi)，逐層開始設(shè)計(jì)，首先將 display: flex; 添加到 container，這也是所有 Flexbox 布局的第一步。接著，將 flex-direction 設(shè)置為 column，確保所有部分彼此相對(duì)。
.container {
display: flex;
flex-direction: column;
}通過 display: flex; 自動(dòng)創(chuàng)建一個(gè)全寬的 header（header 默認(rèn)情況下是塊級(jí)元素）。通過這個(gè)聲明，導(dǎo)航元素的放置會(huì)變得很容易。
導(dǎo)航欄的左側(cè)有一個(gè) logo 和兩個(gè)菜單項(xiàng)，右側(cè)有一個(gè)登錄按鈕。導(dǎo)航位于 header 中，通過 justify-content: space-between; 可以實(shí)現(xiàn)導(dǎo)航和按鈕之間的自動(dòng)間隔。
在導(dǎo)航中，使用 align-items: baseline; 能夠?qū)崿F(xiàn)所有導(dǎo)航項(xiàng)目與文本基線的對(duì)齊，這樣也使得導(dǎo)航欄看起來更加統(tǒng)一。
代碼如下:
header{
padding: 15px;
margin-bottom: 40px;
display: flex;
justify-content: space-between;
}header nav ul {
display: flex;
align-items: baseline;
list-style-type: none;
}頁面內(nèi)容樣式
接下來，將側(cè)邊欄和主內(nèi)容區(qū)域使用一個(gè) wrapper 包含起來。具有 .wrapper 類的 div，也需要設(shè)置 display: flex; 但是 flex 方向與上述不同。這是因?yàn)閭?cè)邊欄和主內(nèi)容區(qū)域彼此相鄰而不是堆疊。
.wrapper {
display: flex;
flex-direction: row;
}主內(nèi)容區(qū)域和側(cè)邊欄的大小設(shè)置非常重要，因?yàn)橹匾男畔⒍荚谶@里展示。主內(nèi)容區(qū)域應(yīng)該是側(cè)邊欄大小的三倍，使用 Flexbox 很容易實(shí)現(xiàn)這點(diǎn)。
.main {
flex: 3;
margin-right: 60px;
}.sidebar {
flex: 1;
}總的來說，F(xiàn)lexbox 在創(chuàng)建這個(gè)簡單的布局時(shí)，十分高效。尤其在控制列表元素樣式和設(shè)置導(dǎo)航與按鈕之間的間距方面，特別有用。
為了測試效率，接下來使用 CSS Grid 創(chuàng)建相同的基本布局。
Grid 模板區(qū)域
CSS Grid 的方便之處在于，可以指定模板區(qū)域，這也使得定義布局變得非常直觀。采取這種方法，網(wǎng)格上的區(qū)域可以命名并引用位置項(xiàng)。對(duì)于這個(gè)基本布局，我們需要命名四個(gè)項(xiàng)目：
header
main content
sidebar
footer
基本 HTML 結(jié)構(gòu)
<div class="container"> <header> <nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> <button></button> </header> <aside class="sidebar"> <h3></h3> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </aside> <section class="main"> <h2></h2> <p></p> <p> </p> </section> <footer> <h3></h3> <p></p> </footer></div>
我們按照順序在 grid container 中定義這些區(qū)域，就像繪制它們一樣。
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
當(dāng)前側(cè)邊欄位于左側(cè)，主區(qū)域內(nèi)容位于右側(cè)，如果需要，也可以輕松更改順序。
有一件事要注意：這些名字需要“連接”到樣式上。所以需要在 header block 中，添加 grid-area: header;。
header{
grid-area: header;
padding: 20px 0;
display: grid;
grid-template-columns: 1fr 1fr;
}HTML 結(jié)構(gòu)與 Flexbox 示例中的相同，但 CSS 與創(chuàng)建網(wǎng)格布局完全不同。
.container{
max-width: 900px;
background-color: #fff;
margin: 0 auto;
padding: 0 60px;
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-gap: 50px;
}使用 CSS Grid 布局時(shí)，在 container 中設(shè)置 display: grid; 非常重要。此處聲明 grid-template-columns，是為了確保頁面的整體結(jié)構(gòu)。這里 grid-template-column 已將側(cè)邊欄和主內(nèi)容區(qū)域大小設(shè)置為 1fr 和 3fr。fr 是網(wǎng)格的分?jǐn)?shù)單位。
接下來，需要調(diào)整 header 容器中的 fr 單元。將 grid-template-columns 設(shè)置為 1fr 和 1fr。這樣 header 中就有兩個(gè)相同大小的列，放置導(dǎo)航項(xiàng)和按鈕會(huì)很合適。
header{
grid-area: header;
display: grid;
grid-template-columns: 1fr 1fr;
}要放置按鈕，我們只需要將 justify-self 設(shè)置為 end。
header button {
justify-self: end;
}導(dǎo)航的位置按照以下方式設(shè)置：
header nav {
justify-self: start;
}最后，我們通過組合 Flexbox 和 CSS Grid 來創(chuàng)建更復(fù)雜的布局。
基本的布局如下圖所示：
這種布局需要在行和列兩個(gè)方向上保持一致，所以使用 CSS Grid 實(shí)現(xiàn)整體布局十分有效。
規(guī)劃對(duì)于布局的實(shí)現(xiàn)來說，十分重要。
接下來看看代碼如何一步步實(shí)現(xiàn)。首先 display: grid; 是基本設(shè)置，其次內(nèi)容塊之間的間距，可以通過 grid-column-gap 和 grid-row-gap 實(shí)現(xiàn)。
.container {
display: grid;
grid-template-columns: 0.4fr 0.3fr 0.3fr;
grid-column-gap: 10px;
grid-row-gap: 15px;
}列和行布局
Header 部分橫跨所有的列。
.header {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
background-color: #d5c9e2;
}也可以使用簡寫，起始值和結(jié)束值位于同一行上，并用斜杠分隔。就像這樣：
.header {
grid-column: 1 / 4;
grid-row: 1 / 2;
background-color: #55d4eb;
}完成網(wǎng)格布局的構(gòu)建之后，微調(diào)內(nèi)容就是下一步。
導(dǎo)航
Flexbox 非常適合放置 header 元素。基本的 header 布局需要設(shè)置 justify-content: space-between。
上面的 CSS Grid 布局示例中，需要在導(dǎo)航欄設(shè)置 justify-self：start;，在按鈕設(shè)置 justify-self: end;，但是如果使用 Flexbox，導(dǎo)航的間距會(huì)變得很容易設(shè)置。
.header {
grid-column: 1 / 4;
grid-row: 1 / 2;
color: #9f9c9c;
text-transform: uppercase;
border-bottom: 2px solid #b0e0ea;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}列內(nèi)容網(wǎng)格
將所需的元素排列在一個(gè)方向上，意味所有元素都處在同一橫向維度，通常Flexbox是實(shí)現(xiàn)這種布局的更好選擇。此外，F(xiàn)lexbox 可以動(dòng)態(tài)調(diào)整元素。使用 Flexbox，可以將所有元素連成一條直線，這也確保了所有元素都具有相同的高度。
帶有文本和按鈕的行內(nèi)容
下圖是包含了“額外”文本和按鈕的三個(gè)區(qū)域。Flexbox 可以輕松設(shè)置三列的寬度。
.extra {
grid-column: 2 / 4;
grid-row: 4 / 5;
padding: 1rem;
display: flex;
flex-wrap: wrap;
border: 1px solid #ececec;
justify-content: space-between;
}以上的布局設(shè)計(jì)中，使用了 CSS Grid 來進(jìn)行整體布局（以及設(shè)計(jì)中的非線性部分）。對(duì)于網(wǎng)格內(nèi)容區(qū)域的設(shè)計(jì)，使用 Flexbox 進(jìn)行樣式的排序和微調(diào)會(huì)更容易實(shí)現(xiàn)。
原文鏈接：https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/
轉(zhuǎn)載請(qǐng)注明出自：葡萄城控件
葡萄城是全球控件行業(yè)領(lǐng)導(dǎo)者，世界領(lǐng)先的企業(yè)應(yīng)用定制工具、企業(yè)報(bào)表和商業(yè)智能解決方案提供商，為超過75%的全球財(cái)富500強(qiáng)企業(yè)提供服務(wù)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
