【注册电子游戏平台官网】国信安教育 | 中国电科旗下高技能it教育培训机构-注册电子游戏平台

中国电科旗下高技能it教育培训机构

当前位置: 最全的电子游戏平台首页 > 学员作品 > 前端作品 > 站酷网-网站制作

站酷网-网站制作

2019-09-29 14:42:41

项目介绍:

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

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

项目特点:

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

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

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

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


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}


项目作品截图:


相关推荐