1、新建html文件。
2、创建两个div,并赋予id。
3、为两个div设置宽高和背景,并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项:
随着HTML的成长,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了。
1、打开sublime text3,并且新建一个html文档和一个css文档。
2、把最基本的html框架写出来。
3、在html的head部分写上编码字符集并引入css文件。
4、在html的body里面写一个div,打上文字并设置一个class名。
5、在浏览器中打开,查看现在的效果。
6、我们直接在选择的div的class名里面加一个“margin: 0 auto”属性保存。
① 可以使用“相对定位”,position:relative;
② 注意坐标轴的移动方向:
向左移动:当然是正数->left:50px
向下移动:当然是正数->top:50px;
(这样记:既然要向下移动,当然是要远离top顶部了,自然top的属性值要正数;
既然要向右移动,就是远离左边了,left属性值自然要为正数!!!)