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;"

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

用python做自我介绍_python入门教程NO.2 用python做个自我介绍
本文涉及的python基础语法为:数据类型等数据类型 1. 字符串的拼接我们在上一章中已经简单介绍了一下字符串的创建方式,这里我们简单学习一下字符串的运算和拼接. 字符串的运算 `字符串的加法` ...
第一次预习作业（html,css,js简单介绍，HTML常用标签）
目录一.HTML,CSS,JS,简单介绍 1.HTML 2.CSS 3.JS 二.HTML常用标签一.HTML,CSS,JS,简单介绍 1.HTML HTML 是用来描述网页的一种语言. HTML ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~...
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...
HTML5期末大作业：个人主页网站设计——个人介绍(45页) HTML+CSS+JavaScript 个人设计web前端大作业 HTML期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
HTML5期末大作业：在线电影网站设计——我不是药神电影介绍(4页) HTML+CSS+JavaScript 大二实训大作业HTML源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
css布局margin介绍,深入理解css中的margin属性（推荐）
之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些" ...
css是如何做导航栏的,导航菜单CSS五分钟快速制作
随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始. 众所周知,CSS菜单都是一段代码.一段代码的编写出来 ...
css中图片背景以及URL的介绍以及什么是css精灵
一.图片背景 background-image 定义背景图片,可定义多背景 background-repeat 定义背景图片的显示方式 repeat,图片重复垂直水平都重复 repeat-x,图片横 ...

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

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

最新文章

热门文章