HTML+CSS进阶

输入

代码 效果

设置单一边距：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;设置字体库

划分区域块+放入图片 图片上加入文字 加入第二行文字 在图片下方添加文字 编写下一个分区 设置 最左侧添加图片 再在上图下设置文字区域 加入文字内容 最终效果