前端入门导学

课程目录设计

课程目录介绍

第一课--前端入门

1、div标签的介绍和基本样式

2、样式引入方式

3、常用标签和HTML5新增标签

4、选择器和优先级

第二课--HTML元素和样式的设置

1、标签的特点和相互转换

2、background属性详解

3、border属性详解

4、font文字设置

5、基本的文本设置

6、标签的默认样式重置

第三课--表格和盒模型详解

1、table详解

2、padding以及应用

3、margin以及box-sizing属性

第四课--定位和浮动布局详解

1、浮动详解

2、清浮动和BFC

3、定位之相对定位和绝对定位

第五课--弹性盒模型详解

1、其他定位属性

2、弹性盒模型

3、实现元素垂直水平居中的方式

第六课--响应式开发和CSS3新增选择器和属性

1、响应式开发

2、CSS3新增样式和选择器

第七课--CSS3之2D、3D转换和动画详解

1、CSS3新增的样式

2、CSS3之2D和3D开发

3、CSS3的动画

第八课--Bootstrap开发

Bootstrap开发

第九课--移动端开发和适配

1、移动端开发和适配

2、CSS3遗留的案例讲解

咕泡教育

HTML+CSS Web前端开发工程师快速入门必备课程【咕泡】

本课程主要是面向没有基础的小白同学，讲师通过自己的实际经验，梳理了一套专业全面的前端基础课程，希望通过本专题的课程教学，课堂案例讲解，课后作业等方式，使学员可以快速迈入前端大门。

了解课程更多信息

您将获得1对1讲解服务：

领取学习资料

了解老师详情

加群领福利

了解更多课程信息

报名成功

获取选课建议

HTML+CSS前端入门

那么我们在接下来讲下一个内容,叫做定位,好定位,来看一下浮动呢,它并不是说万能的,不是任何的格局都能够用浮动去解决的,有一些格局呢,用浮动的话呢,会比较困难或者是解决不了,比如说现在这个格局来看一下,图一跟图二,那就是这个图一是这个,图一是这个右边这个图二是左边这个左边这个如何让图一中的的的VR移动到图二上的位置,也就是说第二是一个蓝色区域,蓝色这个区域移动到向右移动向下移动移动到根的VS3加一行显示呢,哪些CS的命令能够影响和纸的显示位置,再分享一下,那如果我要是我要实现这个布局的话呢,我要用到哪些CS的样式妈的马还是浮动吗,还是攀比吗,好,我们可以试一下,来看一下,定位应该是第九个,再说定位的知识点之前,先把这个思路理一理,先写一下这个格,这个布局三个的对吧,好,真的是,点的,三个的,D,好,三个div,它的颜色是红色、黄色和,绿色对吧,红色黄色绿色,首先这三个的宽高是100像素,然后,第二笔一颜色红色,红色,红色蓝色绿色,第二个的第三个的,这个是蓝色blue,绿色green,对吧,好来看一下走对吧,我们给它加上文字吧,第一第二和第三,There be some,好,那这个时候呢,我们要干嘛,让蓝色的往右移,往下移,怎么去往右移呢,我们如果来想一下,如果我用marquee,比如说我用monkey,让元素里左侧有一个100像素,对吧,它就是一个元素的宽度吗,好,那我用market什么呢,第二我给它设置一个market,好,来看一下,给她设置一个码,给left里左侧有一个100像素,然后呢,然后再怎么设置,往下走对吧,然后设置什么market drop Li上册除有一个100像素,好,写完以后来看一下,这个时候发现没有,他是不是没不不可能跟DV3等一行显示,对不对,因为两个的它是跨元素吗,跨元素是不能在一行显示的,好,那让的三根div在一行显示的话,那我给这两个div去加上浮动float为left,然后呢,我的V3我也给它加上一个浮动flute为哪个好,加完以后走走走走,是不是是不是变成这样啦,对吧,对不对,你想一下变成浮动,好变成浮动以后呢,那么这个时候还是不能够解决这个问题,那这个时候怎么办呢,怎么办,可能还还可以去加上其他的样式,会实现这个效果,只是说非常麻烦,其实我们就很简单,我就是让div在页面上进行随意移动,对不对,是这个概念,浮动的话,他不能够让元素在页面上随意移动,它只能是往左移动,往右移动,如果说我想让他网上移动往下移动呢,对不对,那这个时候呢,就要用到定位,定位呢,就是让元素根据我们设置的参数在页面上进行随意移动好,来,我们可以写一下这个定位的概念,就是让元素,在页面上根据这个设置的,参数在页面上,随意移动,对吧,好,我们来看一下,那怎么去实现这个效果呢,那么我们可以用到第一个方法叫做相对定位定位呢,它分为相对绝对好,我们先看这两个,还有还有这个其他的固定定位,好我们先看一下相对定位,相对定位它的这个CS的一样,所以他的命令是position为relative,指的是相对定位position,他指的是一个位置的意思呢,是指的是一个相对的意思,那么它这个CS的命运呢,指的是,Relative positioning relative他指的是一个相对定位好,看一下,给元素设置了相对定位以后呢,那么元素会有以下的几个改变,首先a它不影响元素本身的特性,首先它不影响元素本身的特性,就是说我给元素加了这条样式以后呢,元素本身不会发生改变,不像我们给他加浮动,给元素加了浮动以后呢,元素可能内联,元素支持宽高化,元素在一行显示对不对,而他不一样,我给元素加这个相对定位以后,他没有任何改变,好,第二个不使元素脱离文档流,也就是说我们给他设置相对定位是让它在页面上去移动的,那么即使它移动了,他的初始位置会被保留,第三个,如果没有定位偏移量对元素本身没有任何影响,就是说我们给他设置了这个position为relative以后,并没有给他设置偏移量,就是说没有让他发生移动,那么它就相当于说没有任何影响,相当于说没有设置营养,第四个是提升成绩,提升成绩就是元素设置为定位以后,能够给他去提升成绩,只有定位元素才能够设置成几好定位偏移量的控制,那么它可以在四个方向进行移动,Top right bottom跟left,上面右侧下面跟左侧进行一个定位移动,我们来看一下

HTML+CSS Web前端开发工程师快速入门必备课程【咕泡】

讲师介绍

课程详情