輸入

代碼

效果

設置單一邊距：padding-top(上內邊距)、padding-bottom(下內邊距)、padding-left(左內邊距)、padding-right(右內邊距)

修改文字字體

文字位置

效果

text-align 屬性規定元素中的文本的水平對齊方式。
和我們用word或者excel時的居中、左對齊、右對齊是一個意思

float使用方法

水平排列展示文本

輸出效果

position屬性規定元素的定位類型。

圖片位置

圖片位置覆蓋了文字

position: absolute 這句代碼的意思是給圖片設置為絕對定位。

說實在點就是我想讓它放在什么位置就什么位置
后面的top:100px;和left:200px;的作用就是我想讓它放在距離上邊100像素距離左邊200像素的地方。

<div>就是用來給網頁分塊布局的

div1

對div修改格式

Project:

width：1000px ;它的意思是給我們本網頁設置的寬度為1000像素
margin：0 auto;意思是上下外邊距為0.左右外邊距根據屏幕分辨率自動設置，其實就是居中? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? padding-top:50px;意思是距離瀏覽器的上邊框50像素 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-family: Arial,STKaiti,KaiTi,sans-serif;設置字體庫

劃分區域塊+放入圖片

圖片上加入文字

加入第二行文字

在圖片下方添加文字

編寫下一個分區

設置

最左側添加圖片

再在上圖下設置文字區域

加入文字內容

最終效果