其他
【每日一练】83—用HTML&CSS 实现一个个人网页版简历的设计
写在前面
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【每日一练】83—用HTML&CSS 实现一个个人网页版简历的设计</title> <!--icon图标引入--><script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script></head><body> <div class="container"> <div class="top"> <div class="imgBx"> <div class="box"> <img src="web.png"> </div> </div> <div class="profileText"> <h3>杨小爱<br>设计&开发<br><span>前端网页设计师&平面设计师</span></h3> </div> </div> <div class="contentBox"> <div class="leftSide"> <h3>我的联系方式</h3> <ul> <li> <span class="icon"><ion-icon name="call-outline"></ion-icon></span> <span class="text">13127757553</span> </li> <li> <span class="icon"><ion-icon name="mail-outline"></ion-icon></span> <span class="text">13127757553@163.com</span> </li> <li> <span class="icon"><ion-icon name="earth-outline"></ion-icon></span> <span class="text">www.webqdkf.com</span> </li> <li> <span class="icon"><ion-icon name="location-outline"></ion-icon></span> <span class="text">上海市闵行区</span> </li> </ul> <h3>教育经历</h3> <ul class="education"> <li> <h5>2010 - 2013</h5> <h4>学习专业学位</h4> <h6>学校名称</h6> </li> <li> <h5>2007 - 2010</h5> <h4>学习专业学位</h4> <h6>学校名称</h6> </li> <li> <h5>1997 - 2007</h5> <h4>学习专业学位</h4> <h6>学校名称</h6> </li> </ul> <h3>我使用的编程技术</h3> <ul class="language"> <li> <span class="text">Html</span> <span class="percent"> <div style="width: 95%"></div> </span> </li> <li> <span class="text">CSS</span> <span class="percent"> <div style="width: 90%"></div> </span> </li> <li> <span class="text">Javascript</span> <span class="percent"> <div style="width: 85%"></div> </span> </li> </ul> <h3>我的兴趣爱好</h3> <ul class="interest"> <li><span class="icon"><ion-icon name="game-controller-outline"></ion-icon></span>游戏</li> <li><span class="icon"><ion-icon name="mic-outline"></ion-icon></span>旅行游玩</li> <li><span class="icon"><ion-icon name="book-outline"></ion-icon></span>看书阅读</li> <li><span class="icon"><ion-icon name="cafe-outline"></ion-icon></span>研究美食</li> </ul> </div> <div class="rightSide"> <div class="about"> <h3>自我介绍</h3> <p>你好，我是杨小爱，湖南人，【web前端开发】公众号的创始人兼主理人。<br> 计算机网络专业毕业，毕业后，入坑互联网行业，目前长居上海工作生活，4年+自由职业者，专为创业企业和中小企业提供一站式的企业宣传服务， 从线下的平面宣传广告设计到企业VI形象，以及线上的网站开发制作，UI设计，均可以为您提供专业设计开发服务。<br> 欢迎前来合作咨询，我的微信号:【web-qdkf】,非诚不扰，非常感谢。<br> <br></p> </div> <div class="about"> <h3>工作经验</h3> <div class="box"> <div class="year_company"> <h5>2014 - 2016</h5> <h5>公司名称</h5> </div> <div class="text"> <h4>前端网页设计师</h4> <p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p> </div> </div><div class="box"> <div class="year_company"> <h5>2016 - 2019</h5> <h5>公司名称</h5> </div> <div class="text"> <h4>前端网页设计师</h4> <p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p> </div> </div><div class="box"> <div class="year_company"> <h5>2019 - 现在</h5> <h5>公司名称</h5> </div> <div class="text"> <h4>前端网页设计师</h4> <p>专为创业企业和中小企业提供一站式的企业宣传服务，网站制作，平面设计，UI设计，商务合作，欢迎随时联系我，我的微信号:【web-qdkf】,非诚不扰，非常感谢。</p> </div> </div> </div> <div class="about skills"> <h3>专业技能</h3> <div class="box"> <h4>Html</h4> <span class="percent"> <div style="width: 90%"></div> </span> </div> <div class="box"> <h4>CSS</h4> <span class="percent"> <div style="width: 95%"></div> </span> </div> <div class="box"> <h4>Javascript</h4> <span class="percent"> <div style="width: 80%"></div> </span> </div> <div class="box"> <h4>Photoshop</h4> <span class="percent"> <div style="width: 90%"></div> </span> </div> <div class="box"> <h4>Illustrator</h4> <span class="percent"> <div style="width: 95%"></div> </span> </div> <div class="box"> <h4>Adobe XD</h4> <span class="percent"> <div style="width: 78%"></div> </span> </div> </div> </div> </div> </div></body></html>
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body{ background: #181818; display: flex; justify-content: center; align-items: center; min-height: 100vh;}.container{ position: relative; width: 100%; max-width: 1000px; margin: 50px; background: #fff; border-left: 50px solid #fff; border-right: 50px solid #fff; box-shadow: 0 50px 75px rgba(0,0,0,0.1);}.container .top{ position: relative; display: grid; padding: 40px; padding-bottom: 0; grid-template-columns: 1fr 2fr;}.container .top .imgBx { position: relative; width: 100%; display: flex; align-items: center;}.container .top .imgBx .box{ position: relative; width: 70%; min-width: 200px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;} .container .top .imgBx .box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.container .top .profileText { position: relative; padding: 40px; display: flex; align-items: center;}.container .top .profileText h3 { font-size: 3em; letter-spacing: 0.1em; line-height: 1.2em; font-weight: 600; color: #333;}.container .top .profileText h3 span { position: relative; top: -10px; font-weight: 300; font-size: 0.5em;}.container .contentBox { position: relative; min-height: 500px; display: grid; padding: 0 40px 40px; grid-template-columns: 1fr 2fr;}.container .contentBox h3{ border-left: 4px solid #5CB8E4; padding-left: 10px; line-height: 1em; font-weight: 600; color: #333; letter-spacing: 0.1em; margin-bottom: 20px; margin-top: 50px;}.container .contentBox ul { position: relative; margin: 10px 0;}.container .contentBox ul li { list-style: none; margin: 25px 0; line-height: 1em; color: #333; cursor: pointer; display: flex;}.container .contentBox ul li ion-icon { font-size: 1.2em; margin-right: 10px; color: #8758FF;}.container .contentBox ul.education li{ flex-direction: column; margin: 25px 0;}h5 { color: #8758FF;}h4{ color: #333; font-weight: 500; margin: 5px 0;}h6 { color: #666; font-weight: 300; font-size: 1em;}.language li{ flex-direction: column;}.language li span{ color: #333; font-size: 16px; font-weight: 500;}.language .percent{ position: relative; width: 100%; margin-top: 15px; margin-bottom: 10px; height: 6px; background: #e3e3e3; display: block; overflow: hidden;}.language .percent div{ position: absolute; top: 0; left: 0; height: 100%; background: #8758FF;}.container .contentBox ul.interest { position: relative; display: grid; grid-template-columns: 1fr 1fr;}.container .contentBox ul.interest li{ display: flex; align-items: center; gap: 10px; margin: 20px 0px;}.container .contentBox ul.interest li .icon{ position: relative; width: 40px; height: 40px; border-radius: 5px; background: #8758FF; color: #fff; display: flex; justify-content: center; align-items: center;}.container .contentBox ul.interest li ion-icon{ color: #fff; margin-right: 0px;}p { font-weight: 300;}.rightSide{ padding-left: 40px;}.about .box{ display: flex; flex-direction: row; margin: 20px 0;}.about .box .year_company{ min-width: 150px; margin-bottom: 10px;}.about .box .year_company h5{ color: #333; font-weight: 600;}.about .box .year_company h5:nth-child(1){ color: #8758FF;}.about .box .text h4{ color: #8758FF; font-size: 16px; margin: 0;
}.about.skills .box{ position: relative; width: 100%; display: grid; grid-template-columns: 150px 1fr; justify-content: center; align-items: center;}.about.skills .box h4{ color: #333; font-weight: 500; margin-bottom: 5px;}.about.skills .box .percent{ position: relative; width: 100%; height: 10px; background: #e3e3e3;}.about.skills .box .percent div{ position: absolute; top: 0; left: 0; height: 100%; background: #8758FF;}写在最后
学习更多技能
请点击下方公众号