html和css做个人介绍,有了这些CSS套路，你也可以做一个漂亮的简历

简历效果预览：简历

原图预览 Resume

预备知识

HTML 基本标签

CSS 基本知识

DIV+CSS 布局知识

套路：浮动与清除浮动

块元素和内联元素的区别和用法

工具的使用：阴影效果的制作

一、结构分类

头部导航条制作

遮罩层制作

头像、信息展示层

自我介绍层制作

技能进度条制作

作品集制作

说明：以上结构分类仅仅是个人分类方式，按照不同需求可以有不同的分类方式。

二、头部导航条制作

效果图 ：

导航条

分析：

(1)头部导航条分为左右两侧，左侧为一个 名字的 Logo，且logo的两边颜色和字体大小均不同，鼠标悬浮变化样式且可以点击跳转链接；

(2)右侧为一个导航条，字间距，而且鼠标移上去会有边红色框效果。

(3)整个导航条始终定位在浏览器顶部不随滚动条而变动。

遇到问题：

1.如何让logo和导航条左右分布？

答：Logo左浮动，导航条右浮动。

2.如何让Logo字体左右大小不同，颜色不同？

答：分别对"RS" 和 "card" 使用 xxx标签包裹，分别给与CSS样式。

3.右边浮动效果？

答：使用无序列表，让列表浮动，使其并排展示，并且清除列表默认样式；

4.鼠标悬浮让导航下变色效果？

答：设置下边框鼠标悬浮效果，添加颜色，粗细程度；

5.让整个导航条相对定位在顶部？

答：在其外层再包裹一层 .topNavbar-inner，相对其定位；注意，需设置其宽度为100%，不然Nav无法浮动在右侧，因为块元素的宽度是由内容所决定，而内容不能占满一整行，所以需定义其宽度。

6.如何让右边导航栏和左侧的logo对其？

答：设置上边距 margin-top

三、遮罩层制作

效果如图：

遮罩层

分析：

(1)主要为两部分组成，其中外部为图片，内部为遮罩；

(2)背景图片需要相对浏览器横纵向居中，且图片要适应浏览器而平铺。

遇到问题：

1.设置背景图平铺，居中?

style="background-position: center center; background-size: cover;