整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS:cascading style sheets層疊樣式表 語法:選擇符{屬性:屬性值;屬性:屬性值;} 外部樣式表鏈接方式 或者 @inport url(路徑名) 不常用，沒那個好 內聯樣式表優先級最高 *{margin: 0 ;padding:0;} li{list-style:none;} 去掉無序列表的列表符號 a{text-decoration:none;}去掉超鏈接下劃線，寫導航的時候會用到，所以提前寫 包含選擇器選擇符1 選擇符2{屬性:屬性值;} 偽類選擇器a:link{屬性:屬性值;}超鏈接的初始狀態 a:visited{屬性:屬性值;}超鏈接被訪問后的狀態 a:hover{屬性:屬性值;}鼠標劃過超鏈接時的狀態 a:active{屬性:屬性值;}鼠標按下時超鏈接的狀態
元素選擇符權重0001 class選擇符權重0010 id選擇符權重0100 繼承樣式權重0000 包含選擇符權重為包含選擇符權重之和
font屬性簡寫:字號/行高 字體 加粗{font-weight:bolder/bold/normal/100-900;} 傾斜{font-style:normal/italic/obique;} 文本修飾{text-decoration:none/underline/overline/line-through}下劃線/上劃線/刪除線 首行縮進text-indent可以取負值，只對第一行起作用 text-indent:-999px; color:transparent; fong-size:0; 三種方法都可以設置文字不顯示/透明
定義列表符號樣式list-style-type:disc(實心圓)/circle(空心圓)/square(實心方塊)/none去掉列表符號 使用圖片作為列表符號：list-style-image:url(所使用圖片的路徑及全稱); 定義列表符號位置：list-style-position:outside/inside; list-style:none;簡寫 border:5px solid #000;現在很常用 dashed虛線 dotted點狀線double雙線none沒有邊框 background: url(路徑) no-repeat right top; CSS繼承 內聯元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-weight、text- decoration、text-transform. 塊狀元素可繼承：text-indent和text-align。 列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image。 表格元素可繼承：border-collapse。 ? 版權符號 << >> 溢出（設置滾動條） overflow:visible/hidden/scroll/auto/inherit; visible:默認值，內容不會被修剪，會成現在元素框之外； hidden：內容會被修剪，并且其余內容是不可見的； scroll：內容會被修剪，但是瀏覽器會顯示滾動條，以便查看其余的內容; auto：如果內容被修剪，則瀏覽器會顯示滾動條，以便查看其他的內容; inherit：規定應該從父元素繼承overflow屬性的值
white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit 該屬性用來設置如何處理元素內的空白；
文本溢出:text-overflow:clip/ellipsis clip：不顯示省略號（…），而是簡單的裁切; ellipsis：當對象內文本溢出時，顯示省略標記； 前提是：定義 1、容器寬度：width：value； 2、強制文本在一行內顯示:white-space：nowrap; 3、溢出內容為隱藏：overflow：hidden； 4、溢出文本顯示省略號：text-overflow：ellipsis;
元素類型分類：塊狀元素，內聯元素，可變元素
常用的塊狀元素包塊div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等； 默認情況下，塊狀元素都會占據一行，通俗地說，兩個相鄰塊狀元素不會出現并列顯示的現象；默認情況下，塊狀元素會按順序自上而下排列。
常見的內聯元素如：a,span,i,em,strong,b,del,br,img,input,a,u等
display屬性與屬性值 (18個屬性值) 屬性值：block/inline/inline-block/none/list-item/table-header-group/table-footer-group/table-cell/table….
1)Block塊狀顯示：類似在元素后面添加換行符，也就是說其他元素不能在其后面并列顯示。 2)inline內聯顯示：在元素后面刪除換行符，多個元素可以在一行內并列顯示。 3)當元素設置了float屬性后，就相當于給該元素加了display:block;屬性； 4)Inline-block行內塊元素顯示：元素的內容以塊狀顯示，行內的其他元素顯示在同一行。（只有這一個元素類型支持vertical-align屬性）img,input。 5)none 此元素不會被顯示。 6)list-item:將元素轉換成列表。li的默認類型
大部分塊元素display屬性值默認為block，其中li默認值為list-item。 大部分內聯元素的display屬性值默認為inline,其中img,input，默認為inline-block。
———-定位屬性 position：static /absolute/relative/fixed固定定位
absolute：絕對定位，將對象從文檔流中拖離出來，使用left/right/top/bottom等屬性相對其最接近的一個并有定位設置的祖籍元素進行絕對定位；如果不存在這樣的祖籍對象，則依據瀏覽器窗口，而其層疊通過z-index屬性定義
relative ：相對定位，對象不可層疊，將依據right，top，left，bottom（相對定位）的屬性在正常文檔流中偏移位置(相對自己原來的位置偏移)。 包含塊 是給絕對定位元素的父元素添加聲明position：relative 透明屬性 IE8以下瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100 兼容其他瀏覽器寫法：opacity:.value;(value的取值范圍0-1,0.1,0.2,0.3—–0.9) css3新增寫法：background:rgba(255,0,0,0.5)
錨點的作用：在同一頁面內的不同位置進行跳轉 <標記 id=”命名錨記名”>
網絡上看到的每個網站都是使用HTML構建的，因為它具有許多有用而強大的功能，作為開發人員，你可以從中受益以創建網頁。話雖如此，HTML還具有可以附加到元素或標簽的屬性，以便向HTML元素添加某些交互功能。
1<html></html>表示文檔的開始和結束
2<head></head>表示文檔頭的開始和結束
3<title></title>文檔的標題開始及結束
4<body></body>文檔正文的開始及結束
1backgroundcolor背景顏色
2background背景圖片
3text正文文字的顏色
4link鏈接文字的顏色
5alink正被單擊鏈接文字的顏色
6vlink已被單擊過鏈接文字的顏色
7leftmargin網頁左邊空白
8topmargin網頁上邊空白
1<ahref=”URL”target=”打開方式”>文字或圖片</a>
2“URL”代表網址或本站某頁面，
3“打開方式”兩個基本選項：1“_blank”在新窗口中打開2“_self在本窗口中打開”
1字號<fontsize=n>n={1——7}
2字體<fontface=X>X=隸書、黑體、楷體_gb2312、仿宋_gb2312、Arial等
3顏色<fontcolor=X>
4文字特殊效果<b></>
5<i>斜體</i>
6<u>下劃線</u>
7<s>刪除線</s>
8<big>這是大號字體</big>
9<small>這是小號字體</small>
1插入圖象<imgsrc=”url”>url=絕對路徑或相對路徑及文件名
2圖像超鏈接<ahref=”URL”><imgsrc=”url”></a>
3圖象與文字對齊<imgsrc=”url”align=”Y”>Y=top(頂部),middle(中部),botton(底部)
4圖象與周圍文字間距<imgsrc=”url”vspace(垂直)=”像素”hspace（水平）=”像素>
5圖象大小及邊框寬度<imgsrc=”url”width=”像素”height=“像素”border=”像素”>
1表格
<table>...</table>:定義表格<表格的開始和結束>
<tr>...</tr>定義表行（每一行都需定義）
<th>...</th>定義表頭(一般指第一行，因為很多表格沒有表頭，所以其常常省略)
<td>...</td>定義表元（表格的具體數據）
2跨行列表格
跨多列的表元<thcolspan=#>或<tdcolspan=#>
跨多行的表元<throwspan=#>或<tdrowspan=#>
3表格外觀
設置表格邊框：<tableborder=#>
設置表格尺寸：<tablewidth=#height=#>
4單元格間距及內容間距
單元格間距<tablecellspacing=#>
內容與單元格間距<tablecellpadding=#>
5表格邊框色<tablebordercolor=#>
開課吧廣場-人才學習交流平臺
css grid 入門：看這一篇就夠了
---
**開篇：擁抱CSS Grid，重塑網頁布局**
CSS Grid Layout（簡稱CSS Grid）作為一項革命性的網頁布局技術，徹底改變了我們構建網頁布局的方式。它為我們提供了精確的二維布局系統，使得復雜的網頁布局變得更加容易和靈活。不論你是初學者還是經驗豐富的開發者，只要掌握了CSS Grid，就能輕松應對各種復雜的網頁布局需求。接下來，本文將帶領你從零開始，全面掌握CSS Grid的入門知識，讓你在實踐中感受其魅力。
---
**【第一部分】初識CSS Grid：基本概念與術語**
**標題：網格容器(Grid Container)與網格項目(Grid Item)**
- **網格容器**：通過在父元素上設置`display: grid;`，將其轉變為一個網格容器，以便對其子元素進行網格布局。
```css
.container {
display: grid;
/* 更多grid屬性配置 */
}
```
- **網格項目**：網格容器的直接子元素會被視為網格項目，它們會在網格容器內按照指定規則排列。
```html
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<!-- 更多網格項目 -->
</div>
```
---
**【第二部分】CSS Grid核心屬性解析**
**標題：網格線(Grid Lines)與網格單元格(Grid Cells)**
1. **網格線**：定義網格布局的行和列，可以通過`grid-template-columns`和`grid-template-rows`屬性設定。
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 定義三列 */
grid-template-rows: 50px 100px; /* 定義兩行 */
}
```
2. **網格單元格**：由網格線交叉形成的區域，網格項目可以放置在其中。
---
**【第三部分】網格項目定位與布局**
**標題：grid-column 和 grid-row 屬性**
- **網格線編號**：通過網格線名稱或編號來定位網格項目。
```css
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
```
或者使用簡寫形式：
```css
.item1 {
grid-area: 1 / 1 / 3 / 3;
}
```
- **auto-fit/auto-fill**：自動填充整個網格容器的剩余空間。
```css
.container {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
```
---
**【第四部分】神奇的網格模板區域(Grid Template Areas)**
**標題：通過模板區域布局網格項目**
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 100px;
grid-template-areas:
"header header header"
"main main sidebar";
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
```
---
**【第五部分】動態網格與響應式布局**
**標題：媒體查詢與CSS Grid的結合**
```css
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"main"
"sidebar";
}
}
```
通過媒體查詢，可以在不同屏幕尺寸下應用不同的網格布局。
---
**結語：**
CSS Grid的出現，無疑為前端開發者帶來了前所未有的布局自由度和靈活性。通過深入理解和熟練掌握CSS Grid，你將能夠更加輕松、高效地設計和實現各種復雜的網頁布局。本文只是CSS Grid世界的冰山一角，但已足夠你入門并開始實踐。繼續深入探索，你會發現CSS Grid的無窮魅力和無限可能。別忘了，實踐是最好的老師，動手試試吧，用CSS Grid改變你的網頁布局世界！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
