新建一個html文件 ， 定名為test.html ， 用于講解div+css結構的根基流程 。

2在test.html文件內 ， 對body進行樣式初始化 ， 設置外邊距margin為0 ， 內邊距padding為0 ， 同時利用text-align設置文字居中 。





3在test.html文件內 ， 為了講解便利 ， 設置所有的div高度為200px ， 內容的顏色為紅色 。





4在test.html文件內 ， 利用div建立網頁的頭部 ， 利用margin:0 auto設置div居中 ， 同時設置其寬度為800px ， 布景顏色為灰色 。





5【div+css布局的基本流程】在test.html文件內 ， 利用div建立網頁的中部 ， 利用margin:0 auto設置div居中 ， 同時設置其寬度為800px 。




6在test.html文件內 ， 在網頁的中部 ， 建立兩個div ， 用于將中部為兩部門 ， 每一個部門寬度為50% ， 左部門利用float:left設置左浮動 ， 右部門利用float:right設置右浮動 。




7在test.html文件內 ， 利用div建立網頁的底部 ， 利用clear:both斷根上面div的浮動 ， 避免影響底部的結構 。 同時 ， 利用margin:0 auto設置div居中 ， 同時設置其寬度為800px ， 布景顏色為#000fff 。




8在瀏覽器打開test.html文件 ， 查看實現的結果 。





以上內容就是div+css布局的基本流程的內容啦 ， 希望對你有所幫助哦！

猜你喜歡

• 如何用手機遙控電視
• NSSD篇 免費的學術期刊搜索平臺
• 微信小程序的JS 交互邏輯該如何處理
• Excel INT函數的使用方法
• Windows10系統電腦畫圖3D繪制傾斜的箭形圖標
• 為ppt添加自己的專用logo
• 我的世界青金石獲得
• 新注冊的微軟賬戶首次開啟Windows 預覽體驗計劃
• 怎樣搜索電腦中的文件
• win10系統最簡單有效的C盤系統清理辦法?。?！