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

2023年6月20日发(作者：)

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;"2.遮罩层如何设置阴暗效果？style=" background-color:rgba(0,0,0,0.8); "3.其他问题？记得设置图⽚和遮罩层的⾼度为图⽚的⼤⼩ style=" width = xxx px ;"四、头像、信息展⽰层：效果如图：信息展⽰层分析：(1)左侧为头像展⽰，距离周边都有⼀定的距离；(2)右侧为信息展⽰。难点：“Hello”标志左下⾓的三⾓形制作；以及基本信息的左右对称展⽰(3)下部边沿部分，背景颜⾊，图标和之间距离，以及⿏标悬浮有背景灰⾊的效果。(4)整个信息展⽰位居中且靠近上半部分。遇到问题：1.如何让展⽰层居中且靠近上半部分？答：对外层信息层给定⼀个固定宽和⾼，设置 margin:0 auto进⾏居中；设置整体margin-top:-xxx px;给定⼀个负值即可上浮。2.难点： “hello”标志的和下⽅三⾓形的制作？答-1：内容包裹在 span内，设置背景⾊，为了让内容居中显⽰更美观，使⽤padding 进⾏填充。答-2：三⾓形的制作：原理：定义⼀个块，使其宽和⾼均为0；设定其border的厚度，然后设置三⾓形以外的部分为透明即可得到。注意⼀个⼩问题：我在写代码的时候遇到这样⼀个问题：因为三⾓形的外部结构为 .hello>.triangle，但是我在写CSS给三⾓形定位的时候没有使⽤ .hello >.triangle ，⽽是写成了 .hello .triangle{position:absolute}，当然，上层为 .hello{position:relative} 但是三⾓形却相对body⽽定位(之前定义导航栏的时候也使⽤了position) 想知道是为什么呢？效果和代码imageJS Binspan{display:block;border:15px solid red;width:0;height:0;border-top-color:red;border-right-color:blue;border-bottom-color:blue;/* border-right-color:transparent;border-bottom-color:transparent; */}3.难点： 对信息左右对称分布该怎么处理？答：因为左右两边是⼀⼀对应的，我们很容易想到使⽤这三个标签。那么是如何做到的呢？⾸先，让元素都左浮动，同时⽗元素添加clearfix清除浮动；然后他们会合并成⼀⾏。接下来，设置、的宽度分别各占总宽度的30%和70%(具体美感细节可以⾃⼰调节)。然后设置⾏⾼line-height:xx px;，避免后续引起其他的bug。为了让其和左边照⽚对齐，适当调节上下的margin即可。部分的svg链接如何制作？答：此处，需要使⽤到⼀个⼯具：阿⾥巴巴⽮量图库第⼀步，注册账号，选择我们需要使⽤到的图标，加⼊购物车；第⼆步：点击购物车，创建项⽬，将选择的图标添加进⼊项⽬；第三步：关键⼀步——看图操作，⼀步都不可省略！！！即使是添加了新图标也要刷新该代码！！我之前就是因为添加了新图标没有刷新得到新代码，结果图标半天都出不来，折腾了半天才发现是这个问题看图操作⼀：操作说明看图操作⼆：部分截图接下来就是按照说明操作即可。第四步：检查刚才的操作，是否引⼊了js代码？是否加⼊了CSS设置相关代码？是否修改了svg的图标代码？5.⿏标浮动在“QQ、微博、Github”上，有背后圆润的暗⾊背景效果？答：结构为：，设置外层a标签为inline-block，设置边框为border-radius:50%即圆⾓的设置⽅式，调整好⼤⼩ ，外层添加padding,margin把footer撑起来。设置⿏标悬浮改变背景⾊，即可出现圆润的暗⾊背景效果。6.注意问题：整个信息展⽰展⽰层的边框有不是很明显的阴影效果，如何设置？答：实⽤⼯具——推荐⽹站:制作阴影效果，然后复制右侧没有前缀的那⼀串代码即可。五、⾃我介绍层分析：(1)此部分分为2部分，其中⼀部分是 简历下载 按钮的制作，⼀部分是简单的⾃我介绍。遇到问题：1.如何制作简历下载的按钮？答：通常我们理解为是⼀个按钮button标签，但是此处我们使⽤的不是按钮，⽽是使⽤来代替，但是它没有外层效果，所以在外层包裹⼀个元素，设置其属性为display:inline-block就可以使其长度适应内容变化⽽变化。同时也和上⾯⼀样有阴影效果。2.⾃我介绍部分？答：这⼀部分⽐较简单，在外层设置⼀个div设置其宽度，让内容居中即可。当然，这你也可以使⽤⾃⼰喜欢的字体进⾏设置。六、技能进度条制作效果图：image分析：(1)⾸先是标题部分，字体加粗；(2)进度条部分：主要解决两个问题：如何制作进度条？如何设置进度条布局？遇到问题：1.进度条制作？答：定义2个div，⾥外各⼀个，外层表⽰背景⾊，内层表⽰进度条，设置边框和背景⾊即可.。2.如何布局？答：定义⼀个⽆序列表，使其浮动，然后设置两边宽度分别占⼀半(或者⼀半少⼀点，更好布局)。3.向左浮动的时候，原本右边设置好的边距扩⼤了？答 ：有两种⽅式，你可以对右边的技能进度条的左边距设置固定值；或者是使右边的进度条向右浮动，但是，两种⽅式都要⽤到⼀个特殊的伪类元素 nth-child(参数)://参数even表⽰偶数，odd表⽰奇数，也可填写具体数字，表⽰第⼏个;注意 外边框有阴影效果和圆⾓边框，记得再添加样式的时候不能遗漏。七、作品集制作效果图：作品集分析：(1)其中，上部标题和下⾯nav部分，包括进度条部分，⾸先要实现居中布局，然后进度条部分和之前⼀样，内外两层，只是，要使⿏标点击不同的选项进度条也跟随变化，这⾥要使⽤到部分js代码，原理还是css。要使进度条⾥⾯的红⾊部分移动到中间部分和右边，只需要⽤到2个属性：⼀个是指定内部进度条的长度；其次是在中间和右边的时候，需要⽤到margin-left:xx px;具体值当然是⾃⼰调试啦~(2)下⾯的3个作品集，还是⼀样的套路，总体外部居中，指定宽和⾼，同时也给图⽚指定宽和⾼。但是，⼀个需要注意的问题：为了后⾯更好添加js效果，这⾥我们不采⽤浮动的⽅式对图⽚布局，⽽是使⽤position相对定位。最后：阶段总结总结我们在这个页⾯中使⽤了哪些套路？1.⾸先清楚默认样式：body{margin: 0;}a{color: inherit;text-decoration: none;}*{padding:0;margin: 0;}ul,ol{list-style: none;}h1,h2,h3,h4,h5,h6{font-weight: normal;} 和 clearfix ：浮动和清除浮动：⼦元素要浮动，给它的⽗类添加浮动；.clearfix::after {content: '';display: block;clear: both;}3.固定定位，例如导航条使⽤到的固定定位在头部：⽗类position:relative；⼦类position:absolute，同时设置具体的位置4.背景⾊设置暗⾊效果：background-color: rgba(0,0,0,0.8);5.设置阴影: box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);y:block 、display:inline 、display:inline-block 三者的区别display:block ：块元素(1)block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。默认情况下，block元素宽度⾃动填满其⽗元素宽度。(2)block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占⼀⾏。(3)block元素可以设置margin和padding属性。常见块元素有：DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等display:inline ：内联元素(1)inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。(2)inline元素设置width,height属性⽆效。(3)inline元素的margin和padding属性，⽔平⽅向的padding-left, padding-right, margin-left, margin-right都产⽣边距效果；但竖直⽅向的padding-top, padding-bottom, margin-top, margin-bottom不会产⽣边距效果。常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等display:inline-block(1)简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同⼀⾏内。⽐如我们可以给⼀个link(a元素)inline-block属性值，使其既具有block的宽度⾼度特性⼜具有inline的同⾏特性。(2)通常和另⼀个属性结合使⽤，⼆者不分家display: inline-block;vertical-align: top;7.设置边框圆⾓：border-radius: 2px; ，具体参数可以⾃⼰调试8.伪类元素nth-child(attr)参数值可以为 具体数字，奇数odd，偶数even ，主要为了⽅便给元素添加CSS效果。(完)

2023年6月20日发(作者：)

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;"2.遮罩层如何设置阴暗效果？style=" background-color:rgba(0,0,0,0.8); "3.其他问题？记得设置图⽚和遮罩层的⾼度为图⽚的⼤⼩ style=" width = xxx px ;"四、头像、信息展⽰层：效果如图：信息展⽰层分析：(1)左侧为头像展⽰，距离周边都有⼀定的距离；(2)右侧为信息展⽰。难点：“Hello”标志左下⾓的三⾓形制作；以及基本信息的左右对称展⽰(3)下部边沿部分，背景颜⾊，图标和之间距离，以及⿏标悬浮有背景灰⾊的效果。(4)整个信息展⽰位居中且靠近上半部分。遇到问题：1.如何让展⽰层居中且靠近上半部分？答：对外层信息层给定⼀个固定宽和⾼，设置 margin:0 auto进⾏居中；设置整体margin-top:-xxx px;给定⼀个负值即可上浮。2.难点： “hello”标志的和下⽅三⾓形的制作？答-1：内容包裹在 span内，设置背景⾊，为了让内容居中显⽰更美观，使⽤padding 进⾏填充。答-2：三⾓形的制作：原理：定义⼀个块，使其宽和⾼均为0；设定其border的厚度，然后设置三⾓形以外的部分为透明即可得到。注意⼀个⼩问题：我在写代码的时候遇到这样⼀个问题：因为三⾓形的外部结构为 .hello>.triangle，但是我在写CSS给三⾓形定位的时候没有使⽤ .hello >.triangle ，⽽是写成了 .hello .triangle{position:absolute}，当然，上层为 .hello{position:relative} 但是三⾓形却相对body⽽定位(之前定义导航栏的时候也使⽤了position) 想知道是为什么呢？效果和代码imageJS Binspan{display:block;border:15px solid red;width:0;height:0;border-top-color:red;border-right-color:blue;border-bottom-color:blue;/* border-right-color:transparent;border-bottom-color:transparent; */}3.难点： 对信息左右对称分布该怎么处理？答：因为左右两边是⼀⼀对应的，我们很容易想到使⽤这三个标签。那么是如何做到的呢？⾸先，让元素都左浮动，同时⽗元素添加clearfix清除浮动；然后他们会合并成⼀⾏。接下来，设置、的宽度分别各占总宽度的30%和70%(具体美感细节可以⾃⼰调节)。然后设置⾏⾼line-height:xx px;，避免后续引起其他的bug。为了让其和左边照⽚对齐，适当调节上下的margin即可。部分的svg链接如何制作？答：此处，需要使⽤到⼀个⼯具：阿⾥巴巴⽮量图库第⼀步，注册账号，选择我们需要使⽤到的图标，加⼊购物车；第⼆步：点击购物车，创建项⽬，将选择的图标添加进⼊项⽬；第三步：关键⼀步——看图操作，⼀步都不可省略！！！即使是添加了新图标也要刷新该代码！！我之前就是因为添加了新图标没有刷新得到新代码，结果图标半天都出不来，折腾了半天才发现是这个问题看图操作⼀：操作说明看图操作⼆：部分截图接下来就是按照说明操作即可。第四步：检查刚才的操作，是否引⼊了js代码？是否加⼊了CSS设置相关代码？是否修改了svg的图标代码？5.⿏标浮动在“QQ、微博、Github”上，有背后圆润的暗⾊背景效果？答：结构为：，设置外层a标签为inline-block，设置边框为border-radius:50%即圆⾓的设置⽅式，调整好⼤⼩ ，外层添加padding,margin把footer撑起来。设置⿏标悬浮改变背景⾊，即可出现圆润的暗⾊背景效果。6.注意问题：整个信息展⽰展⽰层的边框有不是很明显的阴影效果，如何设置？答：实⽤⼯具——推荐⽹站:制作阴影效果，然后复制右侧没有前缀的那⼀串代码即可。五、⾃我介绍层分析：(1)此部分分为2部分，其中⼀部分是 简历下载 按钮的制作，⼀部分是简单的⾃我介绍。遇到问题：1.如何制作简历下载的按钮？答：通常我们理解为是⼀个按钮button标签，但是此处我们使⽤的不是按钮，⽽是使⽤来代替，但是它没有外层效果，所以在外层包裹⼀个元素，设置其属性为display:inline-block就可以使其长度适应内容变化⽽变化。同时也和上⾯⼀样有阴影效果。2.⾃我介绍部分？答：这⼀部分⽐较简单，在外层设置⼀个div设置其宽度，让内容居中即可。当然，这你也可以使⽤⾃⼰喜欢的字体进⾏设置。六、技能进度条制作效果图：image分析：(1)⾸先是标题部分，字体加粗；(2)进度条部分：主要解决两个问题：如何制作进度条？如何设置进度条布局？遇到问题：1.进度条制作？答：定义2个div，⾥外各⼀个，外层表⽰背景⾊，内层表⽰进度条，设置边框和背景⾊即可.。2.如何布局？答：定义⼀个⽆序列表，使其浮动，然后设置两边宽度分别占⼀半(或者⼀半少⼀点，更好布局)。3.向左浮动的时候，原本右边设置好的边距扩⼤了？答 ：有两种⽅式，你可以对右边的技能进度条的左边距设置固定值；或者是使右边的进度条向右浮动，但是，两种⽅式都要⽤到⼀个特殊的伪类元素 nth-child(参数)://参数even表⽰偶数，odd表⽰奇数，也可填写具体数字，表⽰第⼏个;注意 外边框有阴影效果和圆⾓边框，记得再添加样式的时候不能遗漏。七、作品集制作效果图：作品集分析：(1)其中，上部标题和下⾯nav部分，包括进度条部分，⾸先要实现居中布局，然后进度条部分和之前⼀样，内外两层，只是，要使⿏标点击不同的选项进度条也跟随变化，这⾥要使⽤到部分js代码，原理还是css。要使进度条⾥⾯的红⾊部分移动到中间部分和右边，只需要⽤到2个属性：⼀个是指定内部进度条的长度；其次是在中间和右边的时候，需要⽤到margin-left:xx px;具体值当然是⾃⼰调试啦~(2)下⾯的3个作品集，还是⼀样的套路，总体外部居中，指定宽和⾼，同时也给图⽚指定宽和⾼。但是，⼀个需要注意的问题：为了后⾯更好添加js效果，这⾥我们不采⽤浮动的⽅式对图⽚布局，⽽是使⽤position相对定位。最后：阶段总结总结我们在这个页⾯中使⽤了哪些套路？1.⾸先清楚默认样式：body{margin: 0;}a{color: inherit;text-decoration: none;}*{padding:0;margin: 0;}ul,ol{list-style: none;}h1,h2,h3,h4,h5,h6{font-weight: normal;} 和 clearfix ：浮动和清除浮动：⼦元素要浮动，给它的⽗类添加浮动；.clearfix::after {content: '';display: block;clear: both;}3.固定定位，例如导航条使⽤到的固定定位在头部：⽗类position:relative；⼦类position:absolute，同时设置具体的位置4.背景⾊设置暗⾊效果：background-color: rgba(0,0,0,0.8);5.设置阴影: box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);y:block 、display:inline 、display:inline-block 三者的区别display:block ：块元素(1)block元素会独占⼀⾏，多个block元素会各⾃新起⼀⾏。默认情况下，block元素宽度⾃动填满其⽗元素宽度。(2)block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占⼀⾏。(3)block元素可以设置margin和padding属性。常见块元素有：DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等display:inline ：内联元素(1)inline元素不会独占⼀⾏，多个相邻的⾏内元素会排列在同⼀⾏⾥，直到⼀⾏排列不下，才会新换⼀⾏，其宽度随元素的内容⽽变化。(2)inline元素设置width,height属性⽆效。(3)inline元素的margin和padding属性，⽔平⽅向的padding-left, padding-right, margin-left, margin-right都产⽣边距效果；但竖直⽅向的padding-top, padding-bottom, margin-top, margin-bottom不会产⽣边距效果。常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等display:inline-block(1)简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同⼀⾏内。⽐如我们可以给⼀个link(a元素)inline-block属性值，使其既具有block的宽度⾼度特性⼜具有inline的同⾏特性。(2)通常和另⼀个属性结合使⽤，⼆者不分家display: inline-block;vertical-align: top;7.设置边框圆⾓：border-radius: 2px; ，具体参数可以⾃⼰调试8.伪类元素nth-child(attr)参数值可以为 具体数字，奇数odd，偶数even ，主要为了⽅便给元素添加CSS效果。(完)