非常懂

  1. 非常懂首页
  2. 科技

HTML+CSS小案例之HTML結構佈局

箐聲挽摘星 • • 科技

#大有學問#

今天實際操作上手有一點小變更，就是將top中的nav-bottom模塊重劃分到main部分中。

這樣剛好是一個完整的main，不用重新切割測量大小。

今天寫一個大概的行模塊佈局，詳細部分下次再寫。

CSS公共屬性

/* 清除瀏覽器默認設置 */* {margin: 0;padding: 0;}/* 背景顏色 */body {background-color: #f3f6f6;}.bGW {background-color: white;}/* 添加浮動 */.fL {float: left;}.fR {float: right;}/* 清除浮動 */.clearF {overflow: hidden;}/* 版心寬度1200px,水平居中 */.bX {width: 1200px;margin: auto;}

top部分

.top {height: 101px;<!-- 臨時背景顏色，方便看清楚盒子位置，填充實際內容時會刪除掉該屬性 -->background-color: antiquewhite;}

<div class="top bX"></div>

top部分

nav部分

.nav {height: 420px;<!-- 這是吸取的真實背景顏色 -->background-color: #1c056c;}

<div class="nav"></div>

nav

main部分

.mB42 {margin-bottom: 42px;}.menu {height: 60px;/* 盒子陰影 */box-shadow: 1px 2px rgba(118, 118, 118, 0.2);margin-top: 8px;margin-bottom: 37px;}/* 初階段用於顯示模塊位置，實際佈局需刪除該選擇器 */.main-top,.main-center div,.main-bottom div {background-color:white;}.main-top {height: 603px;}.main-center {height: 923px;}.main-center-top,.main-center-bottom {height: 440px;}.main-bottom-top,.main-bottom-bottom {height: 318px;}

<div class="main bX"><!-- main可劃分為四個大的行模塊 --><!-- menu行模塊 --><div class="menu bGW">main-menu</div><!-- main-top行模塊 --><div class="main-top mB42">精品推薦</div><!-- main-center行模塊 --><div class="main-center mB42"><div class="main-center-top mB42">編程入門</div><div class="main-center-bottom mB42">數據分析師</div></div><!-- main-bottom行模塊 --><div class="main-bottom mB42"><div class="main-bottom-top mB42">機器學習工程師</div><div class="main-bottom-bottom">前端開發工程師</div> </div></div>

menu行模塊和main-top行模塊

main-center行模塊

main-bottom行模塊

footer部分

.footer {height: 417px;}

<div class="footer bGW"><div class="bX">footer</div></div>

footer部分

下次更新完整代碼。拜拜

版权声明：HTML+CSS小案例之HTML結構佈局内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请联系 删除。

本文链接：https://www.fcdong.com/f/f3e06a081d95a61d7bb365bd349e35db.html

0

相关推荐