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