Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
【Bootstrap4前端框架+MySQL數(shù)據(jù)庫(kù)】前后端綜合實(shí)訓(xùn)【10天課程 博客匯總表 詳細(xì)筆記】
目 ? 錄
實(shí)訓(xùn)安排
日常要求、項(xiàng)目要求
項(xiàng)目開發(fā)流程
HTML+CSS+JavaScript 基礎(chǔ)回顧
國(guó)產(chǎn)編譯工具——HBuilder
Hbuilder官網(wǎng)：https://www.dcloud.io
基本使用
新建基本HTML項(xiàng)目
HBuilder快捷鍵
頁(yè)面排版——flex彈性盒子布局【雙飛翼布局（圣杯布局）】
min-height: 100vh; /*設(shè)置body邊框：擴(kuò)展到整個(gè)頁(yè)面*/
box-sizing: border-box;?? ?/*頁(yè)面擴(kuò)展到整個(gè)頁(yè)面時(shí)，去掉滑動(dòng)條*/
flex-direction: column;?? ?/*靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。*/
flex-shrink: 0;?? ?/*禁止左右兩側(cè)內(nèi)容往中間擠壓*/
CSS在線手冊(cè)——http://css.cuishifeng.cn/index.html
flex布局中的對(duì)齊方式
案例——文本基準(zhǔn)線
案例——justify-content、align-items屬性
實(shí)訓(xùn)安排
日常要求、項(xiàng)目要求
項(xiàng)目開發(fā)流程
??
HTML+CSS+JavaScript 基礎(chǔ)回顧
html5標(biāo)簽：<header></header>、<footer></footer>、<nav></nav>【在合適的地方（語(yǔ)境），用合適的標(biāo)簽。】
內(nèi)容表現(xiàn)相分離：引用css、js文件。
國(guó)產(chǎn)編譯工具——HBuilder
Hbuilder官網(wǎng)：https://www.dcloud.io
基本使用
新建基本HTML項(xiàng)目
HBuilder快捷鍵
- Ctrl+K：快速格式化代碼
- Ctrl+Shift+R：快速?gòu)?fù)制當(dāng)前行
頁(yè)面排版——flex彈性盒子布局【雙飛翼布局（圣杯布局）】
? ?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">body { /*flex布局：body作為容器。*/margin: 0px;padding: 0px;background-color: #FAEBD7;border: 3px deepskyblue solid;min-height: 100vh; /*設(shè)置body邊框：邊框擴(kuò)展到整個(gè)頁(yè)面*/box-sizing: border-box; /*頁(yè)面擴(kuò)展到整個(gè)頁(yè)面時(shí)，去掉滑動(dòng)條*/display: flex; /*display：默認(rèn)從左到右橫向排列元素。*/flex-direction: column; /*靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。*/}header,footer {height: 100px;background-color: cadetblue;}#main {flex-grow: 1;display: flex;}#left,#right {width: 100px;background-color: brown;flex-shrink: 0; /*禁止左右兩側(cè)內(nèi)容往中間擠壓*/}#content {flex-grow: 1; /*有空間就放大，占據(jù)剩余空間。flex-grow 屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率。*/}</style></head><body><header>頭部</header><div id="main"><div id="left">左側(cè)</div><div id="content">散文，漢語(yǔ)詞匯，拼音是sǎn wén。一指文采煥發(fā)；二指猶行文； [1] 三指文體名。隨著時(shí)代的發(fā)展，散文的概念由廣義向狹義轉(zhuǎn)變，并受到西方文化的影響。散文是一種抒發(fā)作者真情實(shí)感、寫作方式靈活的記敘類文學(xué)體裁。“散文”一詞大概出現(xiàn)在北宋太平興國(guó)(976年12月-984年11月)時(shí)期。《辭海》認(rèn)為：中國(guó)六朝以來，為區(qū)別韻文與駢文，把凡不押韻、不重排偶的散體文章(包括經(jīng)傳史書)，統(tǒng)稱“散文”。后又泛指詩(shī)歌以外的所有文學(xué)體裁。</div><div id="right">右側(cè)</div></div><footer>底部</footer></body> </html>min-height: 100vh; /*設(shè)置body邊框：擴(kuò)展到整個(gè)頁(yè)面*/
body：body高度默認(rèn)為內(nèi)容的高度。設(shè)置背景顏色后，背景顏色會(huì)覆蓋整個(gè)頁(yè)面。
box-sizing: border-box; /*頁(yè)面擴(kuò)展到整個(gè)頁(yè)面時(shí)，去掉滑動(dòng)條*/
flex-direction: column; /*靈活的項(xiàng)目將垂直顯示，正如一個(gè)列一樣。*/
flex-shrink: 0; /*禁止左右兩側(cè)內(nèi)容往中間擠壓*/
CSS在線手冊(cè)——http://css.cuishifeng.cn/index.html
flex布局中的對(duì)齊方式
案例——文本基準(zhǔn)線
- vertical-align: middle; /* baseline 文本基準(zhǔn)線 居中 */
- height: 300px; /* 盒子高度height、行高line-height一致，內(nèi)容會(huì)垂直居中 */
案例——justify-content、align-items屬性
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">.parent {height: 200px;width: 200px;background-color: #5F9EA0;border: 15px outset dimgray;border-radius: 20px;box-shadow: 0px 0px 10px 10px lightgray;display: flex; /**設(shè)置成為flex容器**/justify-content: flex-start; /*設(shè)置主軸的對(duì)齊方式 默認(rèn)水平方向?yàn)橹鬏S*/align-items: center; /*設(shè)置交叉軸上對(duì)齊方式 默認(rèn)為垂直軸*/}.children {height: 30px;width: 30px;background-color: black;margin: 10px;border-radius: 50%;}</style></head><body><div class="parent"><div class="children"></div></div></body> </html>多謝觀看~
總結(jié)
以上是生活随笔為你收集整理的Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 英语作文万能句子总结版
- 下一篇： Bootstrap4+MySQL前后端综