css实现一个设计师UI个人简历效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个设计师UI个人简历效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { padding: 50px; justify-content: center; background-color: #f8f8ff; font-size: 14px; line-height: 20px; color: #636366; font-family: 'Oxygen', sans-serif; } ul { padding: 0; list-style: none; } a { text-decoration: none; color: #3b4144; } h1,h2,h3,h4,h5,h6 { margin: 0; } h1 { line-height: 60px; } h2 { font-size: 22px; font-family: 'Open Sans', sans-serif; } h3 { font-size: 15px; letter-spacing: 0.5px; margin-bottom: 10px; } h4 { font-size: 20px; margin-bottom: 20px; } h5 { font-size: 13px; line-height: 25px; } p { font-size: 13px; line-height: 23px; } .resume { margin: 0 auto; max-width: 850px; min-width: 700px; border: solid #fff 7px; padding: 25px; overflow: hidden; } .decoration { width: 300px; height: 100px; background: linear-gradient(135deg, #ffb2e4, #82d5ff); border-radius: 70px; position: absolute; transform: rotate(-30deg); } .decoration:nth-of-type(1) { top: -95px; left: 74%; } .decoration:nth-of-type(2) { top: 40px; left: 71%; width: 400px; } .top,.left,.right,.footer { padding: 15px; } .content { display: flex; } .left { flex: 5; padding-right: 30px; padding-left: 30px; } .right { flex: 8; padding-left: 40px; border-left: 3px solid #fff; } .top { display: flex; position:relative; margin-bottom: 20px; } .footer { margin-top: 30px; padding-left: 40px; } .myPhoto,.nameCircle { width: 120px; height: 120px; background-color: #fff; border-radius: 50%; margin-left: 10px; background-image: url("//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"); background-size: 120px 120px; background-position: center; } .nameCircle { position: absolute; left: 35px; z-index: -1; background: linear-gradient(135deg, #ffb2e4, #82d5ff); border: none; } .myName { padding-left: 40px; padding-top: 10px; } .circle { width: 90px; height: 90px; background-color: #fff; border-radius: 50%; margin: 0 auto; margin-bottom: 10px; border: 1px solid #3b4144; background-size: 90px 90px; background-position: center; } .circle-image1 { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5da7cd501bf6a.png") } .circle-image2 { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5da7cd575a2a0.png") } .circle-image3 { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5da7cd575a2a0.png") } .circle-image4 { background-image: url("//repo.bfw.wiki/bfwrepo/icon/5fb8aafcb3bc3.png") } .buttons { margin-top: 20px; margin-bottom: 40px; } .btn { padding: 5px 20px; background-color: #fbfbff; margin-right: 10px; border: 1px solid #636366; font-family: 'Open Sans', sans-serif; } .btn:hover { background: linear-gradient(135deg, #ffb2e4, #82d5ff); border: 1px solid #ddd; color: #fff; } .listPassion { display: flex; flex-wrap: wrap; } .listPassion > li { width: 50%; margin-top: 10px; margin-bottom: 10px; justify-content: center; text-align: center; font-family: 'Open Sans', sans-serif; } .listSkill { margin-bottom: 40px; } .listSkill > ul{ display: flex; margin-top: 10px; margin-bottom: 20px; } .listSkill >li { padding-left: 10px; } .skillLevel { width: 65px; height: 55px; border: 3px solid #dfdfff; /* border-radius: 50%;*/ text-align: center; position: relative; margin-left: 10px; padding-top: 13px; z-index: -2; } .level1,.level2 { position: absolute; background-color: #F8F8FF; z-index: -1; } .level1 { width: 35px; height: 30px; left: -3px; top: 22px; } .level2 { width: 65px; left: -3px; top: -3px; height: 30px; } .listAward > li { margin-top: 10px; padding-left: 10px; font-family: 'Open Sans', sans-serif; } .footer { position: relative; } .footerCircle { width: 140px; height: 140px; background: linear-gradient(135deg, #ffb2e4, #82d5ff); position: absolute; border-radius: 50%; top: 30px; left: -100px; z-index: -1; } .time { padding-left: 30px; width: 100%; height: 60px; margin-bottom: 27px; position: relative; } .decorationLine { position: absolute; height: 6px; margin-top: 20px; line-height: 35px; font-family: 'Open Sans', sans-serif; } .decorationCircle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: #82d5ff; } .decorationLine:nth-of-type(1) { width: 35%; top: -20px; left: 20px; background: linear-gradient(135deg, #ffb2e4, #82d5ff); } .decorationCircle:nth-of-type(2) { top: 0px; left: 40%; } .decorationLine:nth-of-type(3) { width: 50%; left: 36%; top: 0px; background: linear-gradient(135deg, #ffb2e4, #82d5ff); } .decorationCircle:nth-of-type(4) { top: 20px; left: 89%; } .decorationLine:nth-of-type(5) { width: 25%; left: 69%; top: 20px; background: linear-gradient(135deg, #ffb2e4, #82d5ff); } .decorationCircle:nth-of-type(6) { top: 40px; left: 97%; } .listExperience { display: flex; /*padding-left: 30px;*/ } .listExperience > li { padding-left: 20px; flex: 3; } .listExperience li ul { font-size: 13px; line-height: 20px; margin-top: 10px; padding-left: 15px; border-left: 3px solid #dfdfff; /* background-color: pink; */ } .listExperience > li > ul > li { margin-top: 13px; } </style> </head> <body> <div class="resume"> <div class="top"> <div class="decoration"></div> <div class="decoration"></div> <div class="myPhoto"></div> <div class="nameCircle"></div> <div class="myName"> <h1>楊晴雯</h1> <h2>Ching Wen Yang</h2> </div> </div> <div class="content"> <div class="left"> <h3> 平面視覺設計 介面設計 插畫 </h3> <p>我喜歡稀奇古怪的玩意,是一個有很多很酷想法的人。熱愛學習新的技能、創作方式,凡事先動手做,擁有強大的自學能力。</p> <div class="buttons"> <a class="btn fill" href="" target="_blank"> Behance </a> <a class="btn" href="7" target="_blank"> Issuu </a> </div> <div clas.........完整代码请登录后点击上方下载按钮下载查看
网友评论0