當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

html+css的响应式个人简历

發(fā)布時間：2023/12/9 HTML 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 html+css的响应式个人简历小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

響應(yīng)式個人簡歷

文章目錄

響應(yīng)式個人簡歷
目錄
一、運行截圖
二、html代碼
三、CSS代碼
四、總結(jié)

一、運行截圖

二、html代碼

代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>個人簡歷</title><link rel="stylesheet" href="style.css"></head> <body><header><nav class="navbar"><a href="#home">個人簡歷</a><a href="#about">我的技能</a><a href="#portfolio">作品展示</a><a href="#contact">聯(lián)系我</a></nav></header><section class="home" id="home"><div class="content"><span class="hi"> 嗨你好 </span><h3> 我是劉亦菲</h3><p class="text"> 歡迎來到我的主頁！ </p><a href="#about" class="btn">about me</a></div><div class="image"><img src="images/homeimg.png" alt=""></div></section><section class="about" id="about"><h1 class="heading"> 關(guān)于我 </h1><div class="row-1"><div class="image"><img src="images/aboutimg.jpg" alt=""></div><div class="content"><h3> 我的名字是劉亦菲</h3><p>I am beautiful！</p><div class="box-container"><div class="box"><p> <span> 年齡 : </span> 20 </p><p> <span> 性別 : </span> 女 </p><p> <span> 學(xué)校 : </span> XX大學(xué) </p><p> <span> 學(xué)院 : </span> 計算機學(xué)院 </p></div><div class="box"><p> <span> 專業(yè) : </span> 英語</p><p> <span> 電話 : </span> 11223344324 </p><p> <span> QQ : </span> 11234343543 </p><p> <span> 教育水平 : </span> 高中 </p></div></div></div></div><h1 class="heading"> 我的技能 </h1><div class="row-2"><div class="skills"><div class="progress"><h3> HTML <span> 95% </span> </h3><div class="bar"> <span></span> </div></div><div class="progress"><h3> CSS <span> 80% </span> </h3><div class="bar"> <span></span> </div></div><div class="progress"><h3> JS <span> 75% </span> </h3><div class="bar"> <span></span> </div></div></div><div class="box-container"><div class="box"><h3>認(rèn)真</h3></div><div class="box"><h3>有團隊意識</h3></div><div class="box"><h3>有創(chuàng)意</h3></div><div class="box"><h3>主動</h3></div></div></div></section><section class="portfolio" id="portfolio"><h1 class="heading">作品展示 </h1><div class="box-container"><div class="box"><img src="images/1.jpg" alt=""></div><div class="box"><img src="images/2.jpg" alt=""></div><div class="box"><img src="images/3.jpg" alt=""></div><div class="box"><img src="images/4.jpg" alt=""></div><div class="box"><img src="images/5.jpg" alt=""></div><div class="box"><img src="images/6.jpg" alt=""></div></div></section><section class="contact" id="contact"><h1 class="heading">聯(lián)系我 </h1><div class="row"><form action=""><input type="text" placeholder="姓名" class="box"><input type="email" placeholder="郵件" class="box"><input type="number" placeholder="電話" class="box"><textarea name="" placeholder="內(nèi)容" id="" cols="30" rows="10"></textarea><input type="submit" class="btn" value="發(fā)送"></form></div></section></body> </html>

三、CSS代碼

代碼如下（示例）：

*{font-family: 'Roboto', sans-serif;margin:0; padding:0;box-sizing: border-box;outline: none; border:none;text-decoration: none;text-transform: capitalize;transition: all .2s linear;line-height: 1.5; }html{font-size: 62.5%;overflow-x: hidden;scroll-behavior: smooth; }body{background: #fcf2e8;padding-left: 30rem; }section{padding:1rem 5%;min-height: 100vh; }.heading{font-size: 4rem;padding-bottom: 1rem;color:#111;}.btn{display: inline-block;margin-top: 1rem;padding:.8rem 3rem;background:pink;color:#fff;cursor: pointer;font-size: 1.7rem; }.btn:hover{background:#111;letter-spacing: .2rem; }header{position: fixed;top:0; left:0; bottom:0;background:#222;display: flex;align-items: center;justify-content: space-between;z-index: 1000;flex-flow: column;padding:8rem 2rem;width:30rem;text-align: center; }header .navbar a{display: block;font-size: 2rem;color:#fff;margin:2rem 0; }header .navbar a:hover{letter-spacing: .2rem;color:pink; }.home{display: flex;align-items: center;flex-wrap: wrap;gap:1.5rem; }.home .image{flex:1 1 40rem; }.home .image img{width:100%; }.home .content{flex:1 1 40rem; }.home .content .hi{font-size: 2rem;color:pink; }.home .content h3{font-size: 4.5rem;color:#111;}.home .content h3 span{color:pink;}.home .content .info{font-size: 2.5rem;color:#111;padding:.5rem 0; }.home .content .text{font-size: 1.7rem;color:#666;padding:.5rem 0; }.about .row-1{display: flex;flex-wrap: wrap;gap:1.5rem;padding-bottom: 2rem; }.about .row-1 .image{flex:1 1 25rem; }.about .row-1 .image img{height: 100%;width:100%;object-fit: cover;border:1rem solid #fff;border-radius: .5rem;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }.about .row-1 .content{flex:1 1 50rem; }.about .row-1 .content h3{color:#333;font-size: 3.5rem; }.about .row-1 .content p{color:#666;font-size: 1.7rem;padding:.5rem 0; }.about .row-1 .content .box-container{display: flex;flex-wrap: wrap;gap:1.5rem;padding: 0.5rem 0; }.about .row-1 .content .box-container .box{flex:1 1 20rem; }.about .row-1 .content .box-container .box span{color:pink; }.about .row-2{display: flex;flex-wrap: wrap;gap:1.5rem;align-items: center; }.about .row-2 .skills{flex:1 1 40rem; }.about .row-2 .skills .progress{padding:1rem 0; }.about .row-2 .skills .progress h3{display: flex;justify-content: space-between;padding:.7rem 0;font-size: 1.7rem;color:#111;font-weight: 400; }.about .row-2 .skills .progress .bar{width:100%;background:#ccc;overflow:hidden;height:1rem;border-radius: 50rem; }.about .row-2 .skills .progress .bar span{display:block;height:100%;background:pink;border-radius: 50rem; }.about .row-2 .skills .progress:nth-child(1) .bar span{width:95%; }.about .row-2 .skills .progress:nth-child(2) .bar span{width:80%; }.about .row-2 .skills .progress:nth-child(3) .bar span{width:75%; }.about .row-2 .skills .progress:nth-child(4) .bar span{width:85%; }.about .row-2 .box-container{flex:1 1 40rem;display: flex;flex-wrap: wrap;gap:1.5rem; }.about .row-2 .box-container .box{flex:1 1 15rem;background:#fff;padding:2rem;border-radius: .5rem;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); }.about .row-2 .box-container .box h3{color:pink;font-size: 3rem; }.about .row-2 .box-container .box p{color:#666;font-size: 1.7rem;padding-top: .5rem; }.portfolio .box-container{display: flex;flex-wrap: wrap;gap:1.5rem; }.portfolio .box-container .box{flex:1 1 30rem;height:25rem;position: relative;overflow:hidden;border:1rem solid #fff;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);background:#fff;border-radius: .5rem; }.portfolio .box-container .box img{height:100%;width:100%;object-fit: cover;border-radius: .5rem;position: relative;z-index: 1; }.portfolio .box-container .box:hover img{height:85%;width:85%; }.contact .row{display: flex;flex-wrap: wrap;gap:1.5rem; }.contact .row form{flex:1 1 55rem;background:#fff;padding:0 2rem;box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);border-radius: .5rem; }.contact .row form .box, .contact .row form textarea{width: 100%;border-bottom: .1rem solid #333;color:#333;text-transform: none;font-size: 1.7rem;padding:1rem 0;margin:1rem 0; }.contact .row form .box:focus, .contact .row form textarea:focus{border-color: pink; }.contact .row form .box::placeholder, .contact .row form textarea::placeholder{text-transform: capitalize; }.contact .row form textarea{height: 20rem;resize: none; }.contact .row form .btn{margin-top: 0;margin-bottom: 1.5rem; }@media (max-width:991px){html{font-size: 55%;}body{padding: 0;}#menu-bars{display: initial;}header{left:-120%;}header.active{left:0%;}.cursor-1,.cursor-2{display: none;}}@media (max-width:450px){html{font-size: 50%;}header{width:100%;}.experience .box-container .box{padding-right: 0;}}

四、總結(jié)

完成了響應(yīng)式界面

總結(jié)

以上是生活随笔為你收集整理的html+css的响应式个人简历的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： php怎么获取用户所在地址,php获取客
下一篇： HTML5制作个人简历模板