HTML+CSS进阶

输入

代码

效果

设置单一边距：padding-top(上内边距)、padding-bottom(下内边距)、padding-left(左内边距)、padding-right(右内边距)

修改文字字体

文字位置

效果

text-align 属性规定元素中的文本的水平对齐方式。
和我们用word或者excel时的居中、左对齐、右对齐是一个意思

float使用方法

水平排列展示文本

输出效果

position属性规定元素的定位类型。

图片位置

图片位置覆盖了文字

position: absolute 这句代码的意思是给图片设置为绝对定位。

说实在点就是我想让它放在什么位置就什么位置
后面的top:100px;和left:200px;的作用就是我想让它放在距离上边100像素距离左边200像素的地方。

就是用来给网页分块布局的

div1

对div修改格式

Project:

width：1000px ;它的意思是给我们本网页设置的宽度为1000像素
margin：0 auto;意思是上下外边距为0.左右外边距根据屏幕分辨率自动设置，其实就是居中                                    padding-top:50px;意思是距离浏览器的上边框50像素                                                                                                   font-family: Arial,STKaiti,KaiTi,sans-serif;设置字体库

划分区域块+放入图片

图片上加入文字

加入第二行文字

在图片下方添加文字

编写下一个分区

设置

最左侧添加图片

再在上图下设置文字区域

加入文字内容

最终效果