最近写了一个个人简历的作业，这次与之前的作业似乎有点不一样，或许是因为我觉得可以通过这个简历能让更多的小伙伴认识我，并且在写的过程中，我可以深度反思自己的缺点以及再一次明确自己的梦想，同时也可以回忆与朋友的点点滴滴，那些让我感动的瞬间
<!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>person</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./字体图标/font_u7z39rwtrvo/iconfont.css">
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="main">
<!-- <img src="./imges/main.jpeg" alt=""> -->
<h2>欢迎大家来到我的个人主页</h2>
<p>想了解更多请往下看，你会更全面的认识我哦！</p>
</div>
<div class="about container">
<h2>~关于我~</h2>
<div class="introduction">
<img src="./imges/pic" alt="">
<div class="hello">
<p><img src="./imges/hello.jpeg" alt=""></p>
<p>姓名：<span>fulei</span></p>
<p>一个爱笑的大一新生</p>
<p>*座右铭：彼方尚有荣光在，少年不惧岁月长!</p>
<p>*出生日期：2003-07-01</p>
<p>*个人邮箱：36******61@qq.com</p>
<p>*在读大学：江西~~大学</p>
</div>
</div>
<h2>~我的性格~</h2>
<div class="character container">
<div class="container">
<div class="common col-xs-12 col-sm-6 col-md-3">
<p><img src="./imges/smile" alt=""></p>
<p class="middle"><i class="iconfont icon-fensetiantianquan"></i>爱笑</p>
<p class="bottom">虽然不爱说话但还是挺爱笑的哈哈</p>
</div>
<div class="common col-xs-12 col-sm-6 col-md-3">
<p><img src="./imges/red" alt=""></p>
<p class="middle"><i class="iconfont icon-fensetiantianquan"></i>热情</p>
<p class="bottom">会很自然地去帮助别人</p>
</div>
<div class="common col-xs-12 col-sm-6 col-md-3">
<p><img src="./imges/fear" alt=""></p>
<p class="middle"><i class="iconfont icon-fensetiantianquan"></i>社恐</p>
<p class="bottom">不喜欢太多人注视自己</p>
</div>
<div class="common col-xs-12 col-sm-6 col-md-3">
<p><img src="./imges/alone" alt=""></p>
<p class="middle"><i class="iconfont icon-fensetiantianquan"></i>敏感</p>
<p class="bottom">心思很细腻内心很脆弱</p>
</div>
</div>
</div>
<h2>~我的爱好~</h2>
<div class="hobby container">
<div class="container">
<div class="common col-xs-12 col-md-4">
<p><img src="./imges/追剧.jpeg" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>追剧</p>
<p class="bottom">电视剧能把我带去另一个世界，那个世界里有美丽的风景，甜甜的恋爱，帅气温柔的男主，超好的友谊，美好的向往</p>
</div>
<div class="common col-xs-12 col-md-4">
<p><img src="./imges/读书.jpeg" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>读书</p>
<p class="bottom">读书可以带给我宁静，让我明白更多的人生百态，让我遇见挫折的时候可以再次爬起继续前行！</p>
</div>
<div class="common col-xs-12 col-md-4">
<p><img src="./imges/摘抄.jpg" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>摘抄</p>
<p class="bottom">很喜欢摘抄自己喜欢的句子，它们有一种独特的魅力！</p>
</div>
</div>
</div>
<h2>~我的友友们~</h2>
<p class="meet">与你们相遇我很幸运!<i class="iconfont icon-xinxinxiangyin"></i></p>
<div class="friends container">
<div class="container">
<div class="common col-xs-12 col-md-6">
<p><img src="./imges/xiaolan" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>小兰</p>
<p class="bottom">小学六年级就认识啦，嘻嘻，虽然我们都很内向有时候在一起话也不多，但丝毫不影响我们是好朋友哈哈哈！友谊天长地久！</p>
</div>
<div class="common col-xs-12 col-md-6">
<p><img src="./imges/xiaorui" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>小蕊</p>
<p class="bottom">虽然只认识了一年，但她真的好好，会给我分享日常，会一起努力，会相互鼓励，一起约定去更远的地方！</p>
</div>
<div class="common col-xs-12 col-md-6">
<p><img src="./imges/feng" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>凤</p>
<p class="bottom">八年级认识的，高中联系很少，因为学车再一次熟起来，会很关心我，会给我买小零食，总会给我意外的小惊喜！真的超级感动的！</p>
</div>
<div class="common col-xs-12 col-md-6">
<p><img src="./imges/xiaolaijing" alt=""></p>
<p class="middle"><i class="iconfont icon-xinxinxiangyin"></i>素素</p>
<p class="bottom">嘻嘻，陪伴了2022一整年的好友，是一个很 文静的女孩，和我性格好像，好喜欢！</p>
</div>
</div>
</div>
<h2>~我的梦想~</h2>
<div class="dream container">
<div class="wuhan col-xs-12 col-md-6">
<img src="./imges/wuda.jpeg" alt="">
</div>
<div class="txt col-xs-12 col-md-6">
<!-- <h3>我的梦想</h3> -->
<p>从刚步入高一的时候就在自己的小本本上写着“我要考武大”，也不知道自己为啥当初那么坚决的要选择它，可能是因为它离家最近
我可以时常回家看望父母，又可能是因为自己是在湖北出生，又或者是因为武大的樱花、武大的繁荣，让我爱了它5年，现在依旧深爱着，
所以我把武大的照片仍然贴在我的书桌前，一抬头就能看见、所以我希望加入学校的工作室使自己慢慢变得优秀、所以我每周末都泡在图书馆、或许
正是因为有一个看似遥不可及的梦想，让我在一次又一次的迷茫中重新找到了方向，也正是因为它我正在慢慢的向那个优秀的自己靠近即使真的很慢，
我热爱它同时也很感激它，我相信只要自己努力不断朝着它前进，有一天我会以一名武大学生的身份走进武大的大门！
</p>
</div>
</div>
</div>
</header>
<footer>
<div class="end">
<h3>THE END!</h3>
<p>欢迎大家和我交朋友，我会真心的对待每一个朋友的！</p>
<p>一起努力、一起加油、一起变得更优秀~~</p>
<i class="iconfont icon-xinxinxiangyin first"></i>
<i class="iconfont icon-xinxinxiangyin"></i>
</div>
</footer>
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>/* @media (max-width:1000px) {
.container{
width:500px;
background-color: pink;
}
}
@media (max-width:800px) {
.container {
width: px;
background-color: blue;
}
}
@media (max-width:500px) {
.container {
width: 100px;
background-color: orange;
}
} */
header .main {
width: 100%;
height: 900px;
/* background-color:#86a4f5; */
background-color:mintcream;
text-align: center;
padding-top: 300px;
}
header .main h2 {
font-size: 80px;
font-weight: 700;
}
header .main p {
font-size: 20px;
}
header .main img {
/* width: 100%; */
height: 500px;
line-height: 500px;
}
.container {
width: 1200px!important;
/* text-align: center; */
}
h2 {
text-align: center;
padding-bottom: 30px;
padding-top: 35px;
}
/* ---------------------关于我---------------------- */
header .about {
width: 100%;
height: 230px;
/* background-color:#86a4f5; */
/* border: 1px solid pink; */
}
header .about h2 {
color:pink;
font-size: 50px;
font-weight: 700;
}
header .container .introduction {
height: 350px;
width: 100%;
border: 2px solid pink;
display: flex;
background-color:#f6f6f6;
}
header .container .introduction img{
width: 280px;
float: left;
margin-right: 120px;
}
header .introduction p {
text-align: left;
}
header .introduction p img {
width: 111px!important;
/* height: 15px; */
margin-right: 10px!important;
}
header .introduction p {
margin-top: 15px;
font-size: 25px;
color: plum;
}
header .introduction p:nth-child(2) {
font-size: 30px;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
header .introduction p:nth-child(2) span {
color: #f8d79d;
font-size: 39px;
}
header .introduction p:first-child {
font-size: 35px;
}
/* ---------------------性格------------------------------ */
.character img {
width: 261px;
height: 200px;
margin-left: -33px;
}
.character p .iconfont {
color: pink;
font-size: 20px;
}
.character .middle {
font-size: 20px;
color: #86a4f5;
border-top: 2px dashed pink;
padding-top: 15px;
}
.character .bottom {
color:darksalmon;
font-size: 17px;
}
/* .character .common {
width: 282px;
height: 335px;
margin-right: 8px;
border-right: 1px solid pink;
translate: tranlateY(-5px);
transition: all 0.5s;
} */
/* .character .common:last-child {
border: none;
} */
/* -----------------------爱好---------------------- */
.hobby img {
width: 300px;
height: 300px;
margin-left: -10px;
}
.hobby .iconfont {
font-size: 35px;
color: fuchsia;
}
.hobby .middle {
font-size: 20px;
font-weight: 700;
}
.hobby .bottom {
font-size: 18px;
color:darksalmon;
}
/* -------------------------------友友------------------------ */
.friends img {
width: 300px;
height: 300px;
}
.meet {
font-size: 30px;
text-align: center!important;
color:darkorange;
}
.meet .iconfont {
font-size: 30px;
}
.friends .iconfont {
color: red;
font-size: 30px;
}
.friends .middle {
font-size: 20px;
font-weight: 700;
color:darkviolet;
}
/* ------------------------梦想----------------- */
.dream {
width: 100%;
height: 356px;
padding-bottom: 800px;
}
.dream img{
/* position: relative; */
width: 570px;
float: left;
/* padding-right: 20px; */
/* margin-right: 0; */
margin-left: 0;
}
.dream .txt {
/* float: right; */
width: 550px;
height: 356px;
font-size: 20px;
line-height: 28px;
border: 2px solid pink;
box-sizing: border-box;
/* padding-left: 10px; */
padding-right: 0;
/* color: #86a4f5; */
}
.dream .txt p {
text-indent: 2em;
}
/* -----------------------end-------------------- */
.end{
background-color: #fff;
width: 100%;
height: 500px;
position:relative;
bottom: -2868px;
left: 0;
text-align: center;
padding-top: 120px;
}
.end h3 {
font-size: 80px;
margin-bottom: 60px;
font-weight: 700;
}
.end p {
font-size: 30px;
}
.end .iconfont {
font-size:80px;
color: red;
position: absolute;
left: 260px;
bottom: 200px;
}
.end .first {
position: absolute;
right: -525px;
bottom: 200px;
}（本来css是想用less的结果忘记了，栓Q）
网页实现
个人简历实现
新手小白，网页还有很多小问题没有解决，欢迎指教！
1915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
