【皇冠盘网址官网】国信安教育 | 中国电科旗下高技能it教育培训机构-皇冠盘网址

项目介绍：

这次项目我们的主要目的是练习布局以及在一阶段学到的一些标签。

我们选择了站酷这个网站进行力所能及的还原。

项目特点：

站酷这个网站，有这非常多的布局方式。

例如品字布局，并列布局等多种布局，能很好地让我们实践第一阶段的知识，

同时也让我们查漏补缺，在确保了布局没问题后，

又可以让我练习拓展一些新知识.

ppt介绍：

项目作品视频展示：

项目主要所用到的技术：

float

浮动，浮动能让我们将两个块并列起来，不过需要注意浮动塌陷的问题，

一般给父元素加上overflow：hidden或者给兄弟元素加上clear：both解决浮动问题

display

display有多种属性，none这个值让元素消失，脱离文档流，block则会让元素出现，又重归文档流，

所以使用这个元素的时候，我们一般会让原来的元素先脱离文档流，以防出现改变布局

display 还有inline，block  ，inline-block等值让元素本身属性发生变化，变为内联元素，块级元素，行内块元素。

使用该元素的时候，需要注意元素本身属性的变化可能造成的影响

position

定位，我们主要用到的定位的地方就是元素发生重叠的时候

主要用到的是相对定位（relative）和绝对定位（absolute）

一般使用绝对定位时，一般都会有一个父元素相对定位，如果父元素没有相对定位的话，就相对于body绝对定位

为了方便定位后的层级关系，我们会使用z-index来调整层级关系

同时这次我们拓展了粘性定位和固定定位。

border

边框，border:-width（厚度）-style（样式）-color（颜色）【顺序可以颠倒】

-style：solid(实线)dotted(点线)double(双实线)dashed(虚线）

-radius（圆角），值可以为百分比，也可以为数字，当设定为50%时，元素会以一个圆形出现

margin

距离，是指元素本身与另外一个元素的距离。

两个元素之间的距离一般用margin调整，该值可以为负值

padding

填充，是指内容与边框之间的距离。

用padding撑开的父元素一般不会改变子元素的位置。

backgroud

背景；元素的背景

a

1.【link 默认状态】2.【visited 访问完成】

3.【active 鼠标按下】4.【hover 鼠标移入】

1234为写的顺序列表，不可以更改，但是可以少写

主要的选择器有

类选择器{class}

子级选择器{:nth-child}

项目作品截图：