当前位置： 首页 > news >正文

前端项目2-01：个人简介页面

news 来源：原创 2025/7/20 23:53:50

目录

一.代码显示

二.效果图

三.代码分析

1. 文档声明和 HTML 基本结构

2. CSS 样式部分

全局样式

body 样式

页面主要容器 box 样式

左侧区域 l 样式

右侧区域 r 样式

左侧区域中头像容器 to 样式

头像图片样式及悬停效果

左侧区域中个人信息容器 tit 样式

个人信息中姓名和签名样式

联系方式容器 lianxi 样式

联系方式标题 h3 样式

联系方式中加粗文本 span 样式

每个联系方式项 item 样式

联系方式项中图片 img 样式

右侧区域中每个信息块 item 通用样式

右侧区域中信息块标题 title 样式

右侧区域中段落 p 样式

专业技能容器 jingneng 样式

专业技能名称 span 样式

技能进度条背景 bg 样式

技能进度条内部填充 div 样式

爱好列表容器 list 样式

每个爱好项 item 样式

爱好项中图片容器 div 样式

爱好项中图片 img 样式及悬停效果

爱好项中爱好名称 p 样式

3. HTML 内容部分

页面主要容器

左侧区域内容

右侧区域内容

使用工具：webstorm

编程语言：html5+css3

一.代码显示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {text-decoration: none;font-family: '微软雅黑';letter-spacing: 1px;margin: 0;}body {display: flex;justify-content: center;align-items: center;height: 100vh;background: linear-gradient(to bottom right, #efcfec, #c2cde7);background-size: 100% 100%;}.box{width: 1000px;height: 700px;display: flex;border: 15px solid rgba(255,255,255,.5);}.box>.l{width: 30%;height: 100%;background-color: #daa4d7;}.box>.r{width: 70%;height: 100%;background-color: #fff;box-sizing: border-box;padding: 20px;}.box>.l>.to{width: 160px;height: 160px;border-radius: 100%;overflow: hidden;margin: auto;margin-top: 50px;}.box>.l>.to>img{width: 100%;height: 100%;object-fit: cover;transition: .5s;}.box>.l>.to:hover>img{transform: scale(1.4);}.box>.l>.tit{text-align: center;line-height: 1.6;color: #fff;margin-top: 20px;}.box>.l>.tit>.name{font-size: 24px;}.box>.l>.tit>.text{font-size: 18px;}.lianxi>h3{margin-bottom: 20px;}.lianxi{padding: 0 20px;margin-top: 70px;color: #fff;}.lianxi>span{margin-bottom: 20px;font-weight: bold;}.lianxi>.item{display: flex;align-items: center;margin-bottom: 20px;}.lianxi>.item>img{width: 35px;margin-right: 10px;}.r>.item{margin-bottom: 30px;}.r>.item>.title{color: #daa4d7;font-size: 22px;font-weight: bold;margin-bottom: 20px;}.r>.item>p{text-align: justify;letter-spacing: 0;line-height: 1.8;}.jingneng{display: flex;align-items: center;margin-bottom: 25px;}.jingneng>span{font-size: 18px;width: 100px;}.jingneng>.bg{width: 80%;height: 30px;background-color: #e4ceea;}.jingneng>.bg>div{height: 100%;background-color: #daa4d7;}.list{display: flex;justify-content: space-between;}.list>.item{width: 22%;}.list>.item>div{overflow: hidden;border-radius: 100%;}.list>.item>div img{width: 100%;display: block;height: 140px;object-fit: cover;transition: .5s;}.list>.item>div:hover>img{transform: scale(1.3);}.list>.item>p{text-align: center;font-weight: bold;line-height: 1.6;}</style></head><body><div class="box"><div class="l"><div class="to"><img src="img/to.jpg" alt="" /></div><div class="tit"><div class="name">Name</div><div class="text">signature</div></div><div class="lianxi"><h3>联系方式</h3><div class="item"><img src="img/item1.png" alt="" />1225105775</div><div class="item"><img src="img/item2.png" alt="" />1225105775qq.com</div><div class="item"><img src="img/item3.png" alt="" />www.xxxx.com</div><div class="item"><img src="img/item4.png" alt="" />辽宁省，沈阳市，沈河区</div></div></div><div class="r"><div class="item"><div class="title">自我介绍</div><p>I am a technology enthusiast specializing in web front-end development, proficient in coretechnologies such as HTML5, CSS3, and JavaScript, and possess solid abilities in page layout andinteraction design. Passionate about pursuing user experience, proficient in modern front-endframeworks such as React and Vue, and emphasizing code readability and maintainability.</p></div><div class="item"><div class="title">专业技能</div><div class="jingneng"><span>HTML</span><div class="bg"><div style="width: 80%;"></div></div></div><div class="jingneng"><span>CSS</span><div class="bg"><div style="width: 70%;"></div></div></div><div class="jingneng"><span>Vue</span><div class="bg"><div style="width: 60%;"></div></div></div></div><div class="item"><div class="title">我的爱好</div><div class="list"><div class="item"><div><img src="img/list1.jpg" alt="" /></div><p>篮球</p></div><div class="item"><div><img src="img/list2.jpg" alt="" /></div><p>跳舞</p></div><div class="item"><div><img src="img/list3.jpg" alt="" /></div><p>唱歌</p></div><div class="item"><div><img src="img/list4.jpg" alt="" /></div><p>演讲</p></div></div></div></div></div></body>
</html>

二.效果图

三.代码分析

1. 文档声明和 HTML 基本结构

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style><!-- 此处为 CSS 样式代码，下面会详细解释 --></style>
</head>
<body><div class="box"><!-- 页面主要内容区域，包含左侧和右侧部分 --></div>
</body>
</html>
  • <!DOCTYPE html>：声明这是一个 HTML5 文档，告知浏览器按照 HTML5 的规范来解析页面。
  • <html>：整个 HTML 文档的根元素，所有其他 HTML 元素都包含在这个元素内。
  • <head>：包含了文档的元数据，如字符编码、页面标题等，这些信息不会直接显示在页面上，但对页面的显示和功能有重要作用。
  • <meta charset="utf-8">：设置页面的字符编码为 UTF-8，确保页面能够正确显示各种字符，包括中文、英文以及其他特殊字符。
  • <title></title>：定义页面的标题，显示在浏览器的标题栏或标签页上，当前代码中标题为空，实际应用中应填写合适的标题。
  • <style>：内部包含 CSS 样式代码，用于控制页面元素的外观和布局。
  • <body>：网页的主体部分，包含了页面上实际显示的内容，用户能看到的所有可视化元素都在这个元素内。

2. CSS 样式部分

全局样式

* {text-decoration: none;font-family: '微软雅黑';letter-spacing: 1px;margin: 0;
}

  • * 是通配选择器，表示应用到页面上的所有元素。

  • text-decoration: none;：移除所有元素默认的文本装饰，比如链接的下划线。

  • font-family: '微软雅黑';：设置所有元素的默认字体为 “微软雅黑”，使页面文本呈现统一的字体风格。

  • letter-spacing: 1px;：设置字符之间的间距为 1 像素，调整文本的视觉效果。

  • margin: 0;：将所有元素的外边距设置为 0，去除元素与元素之间默认的外边距，使页面布局更加紧凑。

body 样式

body {display: flex;justify-content: center;align-items: center;height: 100vh;background: linear-gradient(to bottom right, #efcfec, #c2cde7);background-size: 100% 100%;
}

  • display: flex;：将 body 元素设置为弹性容器，使用弹性盒模型来布局内部元素。

  • justify-content: center;：使弹性容器内的元素在水平方向上居中对齐，即页面内容水平居中显示。

  • align-items: center;：使弹性容器内的元素在垂直方向上居中对齐，即页面内容垂直居中显示。

  • height: 100vh;：设置 body 的高度为视口高度的 100%，确保页面内容能够完全覆盖整个浏览器窗口的高度。

  • background: linear-gradient(to bottom right, #efcfec, #c2cde7);：设置 body 的背景为从左上角到右下角的线性渐变，起始颜色为 #efcfec，结束颜色为 #c2cde7。

  • background-size: 100% 100%;：设置背景图像的大小为占满整个 body，使渐变背景完全覆盖页面。

页面主要容器 box 样式

.box {width: 1000px;height: 700px;display: flex;border: 15px solid rgba(255, 255, 255,.5);
}

  • .box 是一个类选择器，用于选择页面中类名为 box 的元素。

  • width: 1000px;：设置容器的宽度为 1000 像素。

  • height: 700px;：设置容器的高度为 700 像素。

  • display: flex;：将容器设置为弹性容器，方便对其内部的子元素（左侧和右侧区域）进行布局。

  • border: 15px solid rgba(255, 255, 255,.5);：设置容器的边框宽度为 15 像素，边框颜色为半透明的白色（rgba(255, 255, 255,.5) 表示白色且透明度为 0.5）。

左侧区域 l 样式

.box>.l {width: 30%;height: 100%;background-color: #daa4d7;
}

  • .box>.l 是后代选择器，表示选择 box 元素下的类名为 l 的直接子元素。

  • width: 30%;：设置左侧区域的宽度为父元素（box）宽度的 30%。

  • height: 100%;：设置左侧区域的高度为父元素（box）高度的 100%，即占满整个 box 的高度。

  • background-color: #daa4d7;：设置左侧区域的背景颜色为 #daa4d7，为该区域添加一个深粉色的背景。

右侧区域 r 样式

.box>.r {width: 70%;height: 100%;background-color: #fff;box-sizing: border-box;padding: 20px;
}

  • .box>.r 是后代选择器，表示选择 box 元素下的类名为 r 的直接子元素。

  • width: 70%;：设置右侧区域的宽度为父元素（box）宽度的 70%。

  • height: 100%;：设置右侧区域的高度为父元素（box）高度的 100%，即占满整个 box 的高度。

  • background-color: #fff;：设置右侧区域的背景颜色为白色（#fff 是白色的十六进制表示）。

  • box-sizing: border-box;：使元素的内边距和边框包含在元素的宽度和高度内，这样设置内边距和边框不会影响元素的实际宽度和高度。

  • padding: 20px;：为右侧区域设置内边距为 20 像素，使内部内容与边框之间有一定的间隔。

左侧区域中头像容器 to 样式

.box>.l>.to {width: 160px;height: 160px;border-radius: 100%;overflow: hidden;margin: auto;margin-top: 50px;
}

  • .box>.l>.to 是后代选择器，表示选择 box 元素下 l 元素下的类名为 to 的子元素。

  • width: 160px;：设置头像容器的宽度为 160 像素。

  • height: 160px;：设置头像容器的高度为 160 像素。

  • border-radius: 100%;：将容器的边框半径设置为 100%，使其成为一个圆形。

  • overflow: hidden;：隐藏超出容器边界的内容，确保圆形头像图片不会超出圆形容器。

  • margin: auto;：使容器在水平方向上居中对齐。

  • margin-top: 50px;：设置容器的上边距为 50 像素，调整头像在左侧区域的垂直位置。

头像图片样式及悬停效果

.box>.l>.to>img {width: 100%;height: 100%;object-fit: cover;transition: .5s;
}.box>.l>.to:hover>img {transform: scale(1.4);
}

  • .box>.l>.to>img：选择 to 容器内的 img 元素。

    • width: 100%;：使图片的宽度占满 to 容器的宽度。

    • height: 100%;：使图片的高度占满 to 容器的高度。

    • object-fit: cover;：使图片在容器内完全覆盖，保持图片的纵横比并填满容器。

    • transition: .5s;：设置过渡效果，持续时间为 0.5 秒，为悬停效果做准备。

  • .box>.l>.to:hover>img：当鼠标悬停在 to 容器上时，选择其中的 img 元素。

    • transform: scale(1.4);：使图片在鼠标悬停时放大到原来的 1.4 倍，增加交互效果。

左侧区域中个人信息容器 tit 样式

.box>.l>.tit {text-align: center;line-height: 1.6;color: #fff;margin-top: 20px;
}

  • .box>.l>.tit 是后代选择器，表示选择 box 元素下 l 元素下的类名为 tit 的子元素。

  • text-align: center;：使容器内的文本水平居中对齐。

  • line-height: 1.6;：设置文本的行高为 1.6，调整文本行与行之间的垂直间距。

  • color: #fff;：设置文本颜色为白色。

  • margin-top: 20px;：设置容器的上边距为 20 像素，调整个人信息在左侧区域的垂直位置。

个人信息中姓名和签名样式

.box>.l>.tit>.name {font-size: 24px;
}.box>.l>.tit>.text {font-size: 18px;
}

  • .box>.l>.tit>.name：选择 tit 容器内的类名为 name 的子元素，设置其字体大小为 24 像素，用于显示姓名。

  • .box>.l>.tit>.text：选择 tit 容器内的类名为 text 的子元素，设置其字体大小为 18 像素，用于显示签名。

联系方式容器 lianxi 样式

.lianxi {padding: 0 20px;margin-top: 70px;color: #fff;
}

  • .lianxi 是类选择器，选择页面中类名为 lianxi 的元素。

  • padding: 0 20px;：设置容器的左右内边距为 20 像素，使内部内容与边框有一定间隔。

  • margin-top: 70px;：设置容器的上边距为 70 像素，调整联系方式区域在左侧区域的垂直位置。

  • color: #fff;：设置容器内文本的颜色为白色。

联系方式标题 h3 样式

.lianxi>h3 {margin-bottom: 20px;
}

  • .lianxi>h3 是后代选择器，表示选择 lianxi 元素下的 h3 元素。

  • margin-bottom: 20px;：设置 h3 元素的下边距为 20 像素，使标题与下方的联系方式项有一定间隔。

联系方式中加粗文本 span 样式

.lianxi>span {margin-bottom: 20px;font-weight: bold;
}

  • .lianxi>span 是后代选择器，表示选择 lianxi 元素下的 span 元素。

  • margin-bottom: 20px;：设置 span 元素的下边距为 20 像素，使每个联系方式项之间有一定间隔。

  • font-weight: bold;：使 span 元素内的文本字体加粗。

每个联系方式项 item 样式

.lianxi>.item {display: flex;align-items: center;margin-bottom: 20px;
}

  • .lianxi>.item 是后代选择器，表示选择 lianxi 元素下的类名为 item 的子元素。

  • display: flex;：将每个联系方式项设置为弹性容器，方便对内部的图标和文本进行布局。

  • align-items: center;：使弹性容器内的元素垂直居中对齐，确保图标和文本在垂直方向上居中显示。

  • margin-bottom: 20px;：设置每个联系方式项的下边距为 20 像素，使各个联系方式项之间有一定间隔。

联系方式项中图片 img 样式

.lianxi>.item>img {width: 35px;margin-right: 10px;
}

  • .lianxi>.item>img 是后代选择器，表示选择 item 元素下的 img 元素。

  • width: 35px;：设置图片的宽度为 35 像素。

  • margin-right: 10px;：设置图片的右边距为 10 像素，使图片与右侧的文本有一定间隔。

右侧区域中每个信息块 item 通用样式

.r>.item {margin-bottom: 30px;
}

  • .r>.item 是后代选择器，表示选择 r 元素下的类名为 item 的子元素。

  • margin-bottom: 30px;：设置每个信息块的下边距为 30 像素，使各个信息块之间有一定间隔。

右侧区域中信息块标题 title 样式

.r>.item>.title {color: #daa4d7;font-size: 22px;font-weight: bold;margin-bottom: 20px;
}

  • .r>.item>.title 是后代选择器，表示选择 item 元素下的类名为 title 的子元素。

  • color: #daa4d7;：设置标题的颜色为 #daa4d7，与左侧区域背景颜色相呼应。

  • font-size: 22px;：设置标题的字体大小为 22 像素。

  • font-weight: bold;：使标题字体加粗。

  • margin-bottom: 20px;：设置标题的下边距为 20 像素，使标题与下方的内容有一定间隔。

右侧区域中段落 p 样式

.r>.item>p {text-align: justify;letter-spacing: 0;line-height: 1.8;
}

  • .r>.item>p 是后代选择器，表示选择 item 元素下的 p 元素。

  • text-align: justify;：使段落文本两端对齐，使文本排版更加整齐。

  • letter-spacing: 0;：设置字符间距为 0，恢复默认的字符间距。

  • line-height: 1.8;：设置段落文本的行高为 1.8，调整行与行之间的垂直间距。

专业技能容器 jingneng 样式

.jingneng {display: flex;align-items: center;margin-bottom: 25px;
}

  • .jingneng 是类选择器，选择页面中类名为 jingneng 的元素。

  • display: flex;：将专业技能容器设置为弹性容器，方便对技能名称和进度条进行布局。

  • align-items: center;：使弹性容器内的元素垂直居中对齐，确保技能名称和进度条在垂直方向上居中显示。

  • margin-bottom: 25px;：设置容器的下边距为 25 像素，使每个技能项之间有一定间隔。

专业技能名称 span 样式

.jingneng>span {font-size: 18px;width: 100px;
}

  • .jingneng>span 是后代选择器，表示选择 jingneng 元素下的 span 元素。

  • font-size: 18px;：设置技能名称的字体大小为 18 像素。

  • width: 100px;：设置 span 元素的宽度为 100 像素，为技能名称预留一定的宽度空间。

技能进度条背景 bg 样式

.jingneng>.bg {width: 80%;height: 30px;background-color: #e4ceea;
}

  • .jingneng>.bg 是后代选择器，表示选择 jingneng 元素下的类名为 bg 的子元素。

  • width: 80%;：设置进度条背景的宽度为父元素（.jingneng）宽度的 80%。

  • height: 30px;：设置进度条背景的高度为 30 像素。

  • background-color: #e4ceea;：设置进度条背景的颜色为淡紫色，作为技能进度的底层背景。

技能进度条内部填充 div 样式

.jingneng>.bg>div {height: 100%;background-color: #daa4d7;
}

  • .jingneng>.bg>div：选择进度条背景（.bg）内部的div元素，用于显示具体的技能进度。

  • height: 100%;：设置填充元素的高度为父元素（.bg）高度的 100%，即完全填充进度条背景的高度。

  • background-color: #daa4d7;：设置填充元素的颜色为深粉色，与左侧区域背景颜色一致，形成视觉呼应。

  • 进度值通过 HTML 内联样式（如style="width: 80%;"）动态设置，控制填充元素的宽度，从而显示不同的技能掌握程度。

爱好列表容器 list 样式

.list {display: flex;justify-content: space-between;
}

  • .list 是类选择器，选择页面中类名为list的元素，用于容纳爱好项。

  • display: flex;：将爱好列表容器设置为弹性容器，使内部的爱好项可以灵活布局。

  • justify-content: space-between;：使弹性容器内的爱好项在水平方向上均匀分布，两端对齐，中间间距相等。

每个爱好项 item 样式

.list>.item {width: 22%;
}

  • .list>.item：选择爱好列表（.list）中的每个爱好项。

  • width: 22%;：设置每个爱好项的宽度为父元素（.list）宽度的 22%，确保四个爱好项能够合理分布在容器内，同时留出一定的间距。

爱好项中图片容器 div 样式

.list>.item>div {overflow: hidden;border-radius: 100%;
}

  • .list>.item>div：选择每个爱好项中的图片容器。

  • overflow: hidden;：隐藏超出容器边界的内容，确保图片不会溢出圆形区域。

  • border-radius: 100%;：将容器的边框半径设置为 100%，使容器成为圆形，用于展示圆形的爱好图片。

爱好项中图片 img 样式及悬停效果

.list>.item>div img {width: 100%;display: block;height: 140px;object-fit: cover;transition: .5s;
}.list>.item>div:hover>img {transform: scale(1.3);
}

  • .list>.item>div img：选择爱好项图片容器内的图片元素。

    • width: 100%;：设置图片宽度为父元素（图片容器）宽度的 100%，确保图片填满容器。

    • display: block;：将图片显示为块级元素，消除图片底部的默认间距。

    • height: 140px;：设置图片高度为 140 像素，统一所有爱好图片的高度。

    • object-fit: cover;：使图片在保持纵横比的情况下覆盖整个容器，可能会裁剪部分图片，但能确保图片填满容器。

    • transition: .5s;：设置过渡效果，持续时间为 0.5 秒，使悬停效果更加平滑。

  • .list>.item>div:hover>img：当鼠标悬停在爱好项图片容器上时，选择其中的图片元素。

    • transform: scale(1.3);：使图片在鼠标悬停时放大到原来的 1.3 倍，增强交互体验，提供视觉反馈。

爱好项中爱好名称 p 样式

.list>.item>p {text-align: center;font-weight: bold;line-height: 1.6;
}

  • .list>.item>p：选择每个爱好项下方的爱好名称文本元素。

  • text-align: center;：使爱好名称文本在水平方向上居中对齐，与上方的圆形图片居中对齐。

  • font-weight: bold;：使爱好名称文本字体加粗，增强视觉效果，使其更加突出。

  • line-height: 1.6;：设置文本的行高为 1.6，调整文本行与行之间的垂直间距，提高可读性。

3. HTML 内容部分

页面主要容器

<div class="box"><!-- 左侧区域 --><div class="l"><!-- 头像、个人信息、联系方式 --></div><!-- 右侧区域 --><div class="r"><!-- 自我介绍、专业技能、爱好 --></div>
</div>

  • <div class="box">：整个页面的主要容器，使用弹性布局包含左右两个区域。

  • 左侧区域（.l）：宽度占 30%，用于展示个人基本信息。

  • 右侧区域（.r）：宽度占 70%，用于展示详细信息。

左侧区域内容

<div class="l"><!-- 头像部分 --><div class="to"><img src="img/to.jpg" alt="" /></div><!-- 个人信息部分 --><div class="tit"><div class="name">Name</div><div class="text">signature</div></div><!-- 联系方式部分 --><div class="lianxi"><h3>联系方式</h3><div class="item"><img src="img/item1.png" alt="" />1225105775</div><div class="item"><img src="img/item2.png" alt="" />1225105775qq.com</div><div class="item"><img src="img/item3.png" alt="" />www.xxxx.com</div><div class="item"><img src="img/item4.png" alt="" />辽宁省，沈阳市，沈河区</div></div>
</div>

  • 头像部分：

    • <div class="to">：圆形容器，用于展示个人头像。

    • <img src="img/to.jpg" alt="" />：头像图片，路径为img/to.jpg，实际使用时需替换为真实图片。

  • 个人信息部分：

    • <div class="tit">：个人信息容器。

    • <div class="name">Name</div>：显示姓名，实际使用时需替换为真实姓名。

    • <div class="text">signature</div>：显示个人签名，实际使用时需替换为真实签名。

  • 联系方式部分：

    • <div class="lianxi">：联系方式容器。

    • <h3>联系方式</h3>：联系方式标题。

    • 四个.item元素：分别包含图标和对应信息（QQ、邮箱、网站、地址），实际使用时需替换为真实联系方式。

右侧区域内容

<div class="r"><!-- 自我介绍部分 --><div class="item"><div class="title">自我介绍</div><p>I am a technology enthusiast specializing in web front-end development, proficient in coretechnologies such as HTML5, CSS3, and JavaScript, and possess solid abilities in page layout andinteraction design. Passionate about pursuing user experience, proficient in modern front-endframeworks such as React and Vue, and emphasizing code readability and maintainability.</p></div><!-- 专业技能部分 --><div class="item"><div class="title">专业技能</div><div class="jingneng"><span>HTML</span><div class="bg"><div style="width: 80%;"></div></div></div><div class="jingneng"><span>CSS</span><div class="bg"><div style="width: 70%;"></div></div></div><div class="jingneng"><span>Vue</span><div class="bg"><div style="width: 60%;"></div></div></div></div><!-- 我的爱好部分 --><div class="item"><div class="title">我的爱好</div><div class="list"><div class="item"><div><img src="img/list1.jpg" alt="" /></div><p>篮球</p></div><div class="item"><div><img src="img/list2.jpg" alt="" /></div><p>跳舞</p></div><div class="item"><div><img src="img/list3.jpg" alt="" /></div><p>唱歌</p></div><div class="item"><div><img src="img/list4.jpg" alt="" /></div><p>演讲</p></div></div></div>
</div>

  • 自我介绍部分：

    • <div class="title">自我介绍</div>：标题。

    • <p>：包含自我介绍的文本内容，实际使用时可替换为个人真实介绍。

  • 专业技能部分：

    • <div class="title">专业技能</div>：标题。

    • 三个.jingneng元素：分别展示 HTML、CSS、Vue 的技能进度。

    • 每个技能项包含技能名称（<span>）和进度条（.bg内部的<div>），通过style="width: XX%;"设置进度百分比。

  • 我的爱好部分：

    • <div class="title">我的爱好</div>：标题。

    • <div class="list">：爱好列表容器，使用弹性布局。

    • 四个.item元素：每个包含一个圆形图片容器和爱好名称文本，实际使用时需替换为真实图片和爱好。

相关文章：

前端项目2-01：个人简介页面

目录 一.代码显示 二.效果图 三.代码分析 1. 文档声明和 HTML 基本结构 2. CSS 样式部分 全局样式 body 样式 页面主要容器 box 样式 左侧区域 l 样式 右侧区域 r 样式 左侧区域中头像容器 to 样式 头像图片样式及悬停效果 左侧区域中个人信息容器 tit 样式 个人…...

编程日记 2025/7/20 23:53:50

.NET 8 API 实现websocket，并在前端angular实现调用

.NET 8 API 实现websocket&#xff0c;并在前端angular实现调用。 后端&#xff1a;.NET 8 WebSocket API 实现 在 .NET 8 中&#xff0c;可以通过 Microsoft.AspNetCore.WebSockets 提供的支持来实现 WebSocket 功能。以下是创建一个简单的 WebSocket 控制器的步骤。 安装必…...

编程日记 2025/7/18 12:33:45

P2P架构

P2P 是 Peer-to-Peer&#xff08;点对点&#xff09; 的缩写&#xff0c;是一种 去中心化 的网络架构&#xff0c;其中每个节点&#xff08;称为 “对等节点”&#xff0c;Peer&#xff09;既是 “客户端”&#xff0c;也是 “服务器”&#xff0c;可以直接与其他节点通信、共享…...

编程日记 2025/7/16 1:40:37

菊厂0510面试手撕题目解答

题目 输入一个整数数组&#xff0c;返回该数组中最小差出现的次数。 示例1&#xff1a;输入&#xff1a;[1,3,7,5,9,12]&#xff0c;输出&#xff1a;4&#xff0c;最小差为2&#xff0c;共出现4次&#xff1b; 示例2&#xff1a;输入&#xff1a;[90,98,90,90,1,1]&#xf…...

编程日记 2025/7/20 18:38:42

【25软考网工】第六章（4）VPN虚拟专用网 L2TP、PPTP、PPP认证方式；IPSec、GRE

博客主页&#xff1a;christine-rr-CSDN博客 ​专栏主页&#xff1a;软考中级网络工程师笔记 ​​ 大家好&#xff0c;我是christine-rr !目前《软考中级网络工程师》专栏已经更新二十多篇文章了&#xff0c;每篇笔记都包含详细的知识点&#xff0c;希望能帮助到你&#xff01…...

编程日记 2025/7/19 12:35:23

C语言：深入理解指针（3）

目录 一、数组名的理解 二、用指针访问数组 三、一维数组传参的本质 四、冒泡排序 五、二级指针 六、指针数组 七、指针数组模拟二维数组 八、结语 一、数组名的理解 数组名其实就是首元素的地址 int arr[3] {1,2,3}; printf("arr :%p\n" ,arr); printf(…...

编程日记 2025/7/21 0:28:43

R语言实战第5章（1）

第一部分&#xff1a;数学、统计和字符处理函数 数学和统计函数&#xff1a;R提供了丰富的数学和统计函数&#xff0c;用于执行各种计算和分析。这些函数可以帮助用户快速完成复杂的数学运算、统计分析等任务&#xff0c;例如计算均值、方差、相关系数、进行假设检验等。字符处…...

编程日记 2025/7/18 22:47:31

Lodash isEqual 方法源码实现分析

Lodash isEqual 方法源码实现分析 Lodash 的 isEqual 方法用于执行两个值的深度比较&#xff0c;以确定它们是否相等。这个方法能够处理各种 JavaScript 数据类型&#xff0c;包括基本类型、对象、数组、正则表达式、日期对象等&#xff0c;并且能够正确处理循环引用。 1. is…...

编程日记 2025/7/18 1:03:59

探索边缘计算：赋能物联网的未来

摘要 随着物联网&#xff08;IoT&#xff09;技术的飞速发展&#xff0c;越来越多的设备接入网络&#xff0c;产生了海量的数据。传统的云计算模式在处理这些数据时面临着延迟高、带宽不足等问题&#xff0c;而边缘计算的出现为解决这些问题提供了新的思路。本文将深入探讨边缘…...

编程日记 2025/7/20 1:37:41

Ubuntu中配置【Rust 镜像源】

本篇主要记录Ubuntu中配置Rust编程环境时&#xff0c;所需要做的镜像源相关的配置 无法下载 Rust 工具链 通过环境变量指定 Rust 的国内镜像源&#xff08;如中科大或清华源&#xff09;。 方法一&#xff1a;临时设置镜像 export RUSTUP_DIST_SERVERhttps://mirrors.ustc.e…...

编程日记 2025/7/21 0:27:53

netty 客户端发送消息服务端收到消息无法打印，springBoot配合 lombok使用@Slf4j

netty 客户端发送消息服务端收到消息无法打印&#xff0c;springBoot配合 lombok使用Slf4j 服务端代码 Slf4j public class EventLoopServer {public static void main(String[] args) throws InterruptedException {new ServerBootstrap().group(new NioEventLoopGroup()).c…...

编程日记 2025/7/20 23:42:36

学习笔记：黑马程序员JavaWeb开发教程(2025.4.3)

12.1 基础登录功能 EmpService中的login方法&#xff0c;是根据接收到的用户名和密码&#xff0c;查询时emp数据库中的员工信息&#xff0c;会返回一个员工对象。使用了三元运算符来写返回 Login是登录&#xff0c;是一个业务方法&#xff0c;mapper接口是持久层&#xff0c;是…...

编程日记 2025/7/17 15:38:48

Spark SQL 运行架构详解（专业解释+番茄炒蛋例子解读）

1. 整体架构概览 Spark SQL的运行过程可以想象成一个"SQL查询的加工流水线"&#xff0c;从原始SQL语句开始&#xff0c;经过多个阶段的处理和优化&#xff0c;最终变成分布式计算任务执行。主要流程如下&#xff1a; SQL Query → 解析 → 逻辑计划 → 优化 → 物理…...

编程日记 2025/7/20 14:02:03

【时时三省】(C语言基础)字符数组的输入输出

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 字符数组的输入输出可以有两种方法。 ( 1 )逐个字符输入输出。用格式符“% c”输入或输出一个字符. ( 2 )将整个字符串一次输入或输出。用“% s”格式符&#xff0c;意思是对字符串( strin…...

编程日记 2025/7/16 11:43:54

Hive HA配置高可用

Hive的高可用性（HA）通过消除关键组件的单点故障来实现，确保系统在部分故障时仍能正常运行。其基本原理涉及以下核心组件和策略： ‌1. Hive Metastore 的高可用‌ ‌ 多实例部署‌：部署多个Metastore服务实例，每个实例连接到共享的后端数据库（如MySQL、PostgreSQ…...

编程日记 2025/7/15 20:04:38

Python爬虫第20节-使用 Selenium 爬取小米商城空调商品

目录 前言 一、 本文目标 二、环境准备 2.1 安装依赖 2.2 配置 ChromeDriver 三、小米商城页面结构分析 3.1 商品列表结构 3.2 分页结构 四、Selenium 自动化爬虫实现 4.1 脚本整体结构 4.2 代码实现 五、关键技术详解 5.1 Selenium 启动与配置 5.2 页面等待与异…...

编程日记 2025/7/13 23:32:31

重构金融数智化产业版图：中电金信“链主”之道

近日&#xff0c;《商学院》杂志独家专访了中电金信常务副总经理&#xff08;主持经营工作&#xff09;冯明刚&#xff0c;围绕“金融科技”“数字底座”“架构转型”“AI驱动”等议题&#xff0c;展开了一场关于未来架构、技术变革与系统创新的深入对话。 当下&#xff0c;数字…...

编程日记 2025/7/18 20:58:28

笔记本电脑升级实战手册【扩展篇1】：flash id查询硬盘颗粒

文章目录 前言&#xff1a;一、硬盘颗粒介绍1、MLC&#xff08;Multi-Level Cell&#xff09;2、TLC&#xff08;Triple-Level Cell&#xff09;3、QLC&#xff08;Quad-Level Cell&#xff09; 二、硬盘与主控1、主控介绍2、主流主控厂家 三 、硬盘颗粒查询使用flash id工具查…...

编程日记 2025/7/20 13:34:16

文档外发安全：企业数据防护的最后一道防线

在当今数字化时代&#xff0c;数据已成为企业最宝贵的资产之一。随着网络安全威胁日益增多&#xff0c;企业安装专业加密软件已从"可选"变为"必选"。本文将全面分析企业部署华途加密解决方案后获得的各项战略优势。 一、数据安全防护升级 核心数据全面保护…...

编程日记 2025/7/21 1:31:31

springboot集成langchain4j实现票务助手实战

前言 看此篇的前置知识为langchain4j整合springboot&#xff0c;以及springboot集成langchain4j记忆对话。 Function-Calls介绍 langchain4j 中的 Function Calls&#xff08;函数调用&#xff09;是一种让大语言模型&#xff08;LLM&#xff09;与外部工具&#xff08;如 A…...

编程日记 2025/7/20 23:52:23

ZYNQ笔记（二十一）： VDMA HDMI 彩条显示

版本&#xff1a;Vivado2020.2&#xff08;Vitis&#xff09; 任务&#xff1a;实现驱动 HDMI 显示彩条图像&#xff0c;同时支持输出给 HDMI 的图像分辨率可调。 目录 一、介绍 二、硬件设计 &#xff08;1&#xff09;DVI_Transmitter &#xff08;2&#xff09;Clockin…...

编程日记 2025/7/19 1:06:40

常用的maven插件及其使用指南

目录 1.maven官方插件列表2.两种方式调用maven插件3.常用的maven插件总结参考文献 1.maven官方插件列表 groupId为org.apache.maven.pluginshttp://maven.apache.org/plugins/index.html 2.两种方式调用maven插件 将插件目标与生命周期阶段绑定&#xff0c;例如maven默认将m…...

编程日记 2025/7/21 1:08:40

Meilisearch 安装

1.环境 rockey linux 9.2 meilisearch-linux-amd64 2.下载 访问&#xff1a;https://github.com/meilisearch/meilisearch/releases 下载适合自己系统版本的。 注意&#xff1a;我下载的不是最新版本的&#xff0c;因为最新版本的需要GLIBC2.35&#xff0c;我本地系统的是…...

编程日记 2025/7/20 6:01:53

用postman的时候如何区分服务器还是自己的问题？

作为测试人员，在使用Postman进行接口测试时，准确判断问题是出在服务器端还是本地环境非常重要。以下是一些实用的区分方法： 1. 基础检查方法 本地问题排查清单： ✅ 检查网络连接是否正常 ✅ 确认Postman版本是否为最新 ✅ 验证请求URL是否正确（特别是环境变量是否被正确…...

编程日记 2025/7/16 7:50:14

【Python算法】最长递增子序列

题目链接 方法1&#xff1a; 记忆化搜索 class Solution:def lengthOfLIS(self, nums: List[int]) -> int:cachedef dfs(i):res0 for j in range(i):if nums[j]<nums[i]:res max(res,dfs(j))return res1 # 返回res表示以nums[i]结尾的LIS长度return max(dfs(i) for i…...

编程日记 2025/7/20 7:20:40

springboot-web基础

21.web spring MVC 基于浏览器的 B/S 结构应用十分流行。Spring Boot 非常适合 Web 应用开发。可以使用嵌入式 Tomcat、Jetty、 Undertow 或 Netty 创建一个自包含的 HTTP 服务器。一个 Spring Boot 的 Web 应用能够自己独立运行&#xff0c;不依赖需 要安装的 Tomcat&#x…...

编程日记 2025/7/17 22:42:07

解构赋值

【系统学习ES6】 本专题旨在对ES6的常用技术点进行系统性梳理&#xff0c;帮助大家对其有更好的掌握&#xff0c;希望大家有所收获。 ES6允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这被称为解构。解构是一种打破数据结构&#x…...

编程日记 2025/7/16 12:14:27

Leetcode-BFS问题

LeetCode-BFS问题 1.Floodfill问题 1.图像渲染问题 [https://leetcode.cn/problems/flood-fill/description/](https://leetcode.cn/problems/flood-fill/description/) class Solution {public int[][] floodFill(int[][] image, int sr, int sc, int color) {//可以借助另一…...

编程日记 2025/7/15 7:34:11

AI 时代 UI 设计的未来范式

在人工智能技术持续突破的浪潮下&#xff0c;UI 设计领域正经历着前所未有的变革。AI 的深度介入不仅重塑了设计流程&#xff0c;更催生了全新的设计范式&#xff0c;为用户带来颠覆式的交互体验。探索 AI 时代 UI 设计的未来范式&#xff0c;是把握行业发展趋势的关键所在。​…...

编程日记 2025/7/21 0:20:03

键盘输出希腊字符方法

在不同操作系统中&#xff0c;输出希腊字母的方法有所不同。以下是针对 Windows 和 macOS 系统的详细方法&#xff0c;以及一些通用技巧&#xff1a; 1.Windows 系统 1.1 使用字符映射表 字符映射表是一个内置工具&#xff0c;可以方便地找到并插入希腊字母。 • 步骤&#xf…...

编程日记 2025/7/20 23:57:51

[数据结构高阶]并查集初识、手撕、可以解决哪类问题？

标题&#xff1a;[数据结构高阶]并查集初识、手撕、可以解决哪类问题&#xff1f; 水墨不写bug 文章目录 一、认识并查集二、模拟实现并查集三、用并查集解决问题1、[省份的数量](https://leetcode.cn/problems/number-of-provinces/)2、[等式方程的可满足性](https://leetcode…...

编程日记 2025/7/19 10:40:21

BUUCTF——PYWebsite

BUUCTF——PYWebsite 进入靶场 看看基本信息 没有什么信息 扫个目录看看 http://node5.buuoj.cn:28115/.DS_Store http://node5.buuoj.cn:28115/flag.php http://node5.buuoj.cn:28115/index.html访问flag.php 提示保存购买者的IP 抓包看看 直接XFF伪造一下 X-Forwarded-F…...

编程日记 2025/7/19 6:39:32

【学习笔记】机器学习(Machine Learning) | 第六章(2)| 过拟合问题

机器学习&#xff08;Machine Learning&#xff09; 简要声明 基于吴恩达教授(Andrew Ng)课程视频 BiliBili课程资源 文章目录 机器学习&#xff08;Machine Learning&#xff09;简要声明 解决过拟合问题一、收集更多训练数据二、选择特征三、正则化四、过拟合解决方法总结 过…...

编程日记 2025/7/15 22:11:45

单片机-STM32部分：13-1、编码器

飞书文档https://x509p6c8to.feishu.cn/wiki/BpEywhaX9iqbiLkdqdAcmDnwnab EC旋转编码器 在产品开发过程中&#xff0c;需要位置闭环的的产品&#xff0c;类似电机类产品来说&#xff0c;编码器至关重要&#xff0c;它不仅可以使我们对带年纪进行精确的速度闭环&#xff0c;位…...

编程日记 2025/7/21 0:42:05

浅谈大语言模型原理

1.反向传播算法 背景 反向传播算法是当前深度学习的核心技术。 神经网络 x是输入&#xff0c;o是输出&#xff0c;w是需要训练的参数&#xff08;w有初始值&#xff09;三层全连接的神经网络&#xff1a;输入层、隐藏层、输出层 激活函数 f ( x ) 1 1 x − 1 f(x)\frac…...

编程日记 2025/7/19 16:18:46

设计模式之中介者模式

在我们实际开发中&#xff0c;我们经常会遇到多个对象之间互相依赖、互相调用的场景。如果这些对象之间的耦合度太高&#xff0c;不仅会让系统变得难以维护&#xff0c;还会让扩展变得异常困难。此时&#xff0c;中介者模式(Mediatro)就是一种非常实用的设计方案&#xff0c;它…...

编程日记 2025/7/18 15:55:08

Matlab 空调温度时延模型的模糊pid控制

1、内容简介 Matlab 231-空调温度时延模型的模糊pid控制 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略中央空调温湿度采用PID控制系统的探讨.pdf 中央空调房间温度智能 PID控制的仿真研究.pdf...

编程日记 2025/7/12 23:31:28

RabbitMQ ③-Spring使用RabbitMQ

Spring使用RabbitMQ 创建 Spring 项目后&#xff0c;引入依赖&#xff1a; <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-amqp --> <dependency><groupId>org.springframework.boot</groupId><artifac…...

编程日记 2025/7/21 0:32:44

C++修炼：模板进阶

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;《编程之路》、《数据结构与算法之美》、《题海拾贝》、《C修炼之路》 欢迎点赞&#xff0c;关注&am…...

编程日记 2025/7/21 0:52:07

Spring Boot集成RabbitMQ高级篇：可靠性与性能提升

一、环境准备 安装 RabbitMQ 在官网上下载对应操作系统的安装包&#xff08;如 Windows、Linux 等&#xff09;&#xff0c;按照安装向导完成安装。 安装完成后&#xff0c;启动 RabbitMQ 服务。在 Windows 系统下&#xff0c;可以在服务列表中找到 RabbitMQ Server 并启动&am…...

编程日记 2025/7/19 4:04:38

Shell脚本编程3（函数+正则表达式）

1.函数 1.1 定义 简单来讲&#xff0c;所谓函数就是把完成特定功能&#xff0c;并且多次使用的一组命令或者语句封装在一个固定的结构中&#xff0c;这个结构我们就叫做函数。从本质上讲&#xff0c;函数是将一个函数名与某个代码块进行映射。也就是说&#xff0c;用户在定义了…...

编程日记 2025/7/21 1:30:40

【C++】语言深处的“精灵”：探索内存的奥妙

这里我们要知道&#xff0c;我们编写一个程序&#xff0c;这个程序中的变量是存储在哪个区域的 栈一般是用于静态的分配内存的&#xff0c;但也可以动态的分配内存&#xff0c; 堆是用于动态的分配内存的&#xff0c;不能静态的分配内存 栈&#xff1a; 通常是向低地址方向…...

编程日记 2025/7/21 0:02:40

c语言第一个小游戏：贪吃蛇小游戏03

我们为贪吃蛇的节点设置为一个结构体&#xff0c;构成贪吃蛇的身子的话我们使用链表&#xff0c;链表的每一个节点是一个结构体 显示贪吃蛇身子的一个节点 我们这边node就表示一个蛇的身体 就是一小节 输出结果如下 显示贪吃蛇完整身子 效果如下 代码实现 这个hasSnakeNode(…...

编程日记 2025/7/21 0:05:56

51 单片机头文件 reg51.h 和 reg52.h 详解

51 单片机头文件详解 51 单片机的头文件reg51.h和reg52.h是开发中非常重要的文件，它们定义了单片机的特殊功能寄存器 (SFR) 和位地址。以下是对这两个头文件的详细解析： 1. 头文件概述 reg51.h：针对标准 8051 单片机（4KB ROM, 128B RAM） reg52.h：针对增强型 8052 单片…...

编程日记 2025/7/20 15:03:51

让 - 艾里克・德布尔与斯普林格出版公司：科技变革下的出版业探索

在数字化浪潮席卷全球的当下&#xff0c;传统出版行业面临着前所未有的挑战与机遇。《对话 CTO&#xff0c;驾驭高科技浪潮》的第 10 章聚焦于让 - 艾里克・德布尔&#xff08;Jean - Eric Debeure&#xff09;及其所在的斯普林格出版公司&#xff08;Springer Publishing Comp…...

编程日记 2025/7/19 9:31:02

[python] 面向对象的三大特性-封装及新式类

一 继承 继承是指一个类&#xff08;子类&#xff09;可以继承另一个类&#xff08;父类&#xff09;的属性和方法&#xff0c;并可以在其基础上进行扩展或修改。 子类可以继承父类的属性和方法,包括私有属性和隐藏属性 &#x1f4a1; 核心思想&#xff1a; 避免重复代码&…...

编程日记 2025/7/15 23:44:15

winreg查询Windows注册表的一些基本用法

注册表是Windows操作系统中用于存储配置信息的数据库。它包含了关于系统硬件、已安装的应用程序、用户账户设置以及系统设置的信息。 特别地&#xff0c;当我们需要某些软件的配置配息时&#xff0c;主要在HKEY_CURRENT_USER和HKEY_LOCAL_MACHINE下的SoftWare内进行查询操作。 …...

编程日记 2025/7/15 14:09:25

DHCP自动分配IP

DHCP自动分配IP 练习1 路由器 Router>en Router#conf t Router(config)#ip dhcp pool ip10 //创建DHCP地址池 Router(dhcp-config)#network 192.168.20.0 255.255.255.0 // 配置网络地址和子网掩码 Router(dhcp-config)#default-router 192.168.20.254 //配置默认网关 Rou…...

编程日记 2025/7/18 12:50:33

互联网大厂Java求职面试实战：Spring Boot与微服务场景深度解析

&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 &#x1f601; 2. 毕业设计专栏&#xff0c;毕业季咱们不慌忙&#xff0c;几百款毕业设计等你选。 ❤️ 3. Python爬虫专栏…...

编程日记 2025/7/14 14:08:36

TDengine 在金融领域的应用

简介 金融行业正处于数据处理能力革新的关键时期。随着市场数据量的爆炸式增长和复杂性的日益加深&#xff0c;金融机构面临着寻找能够高效处理大规模、高频次以及多样化时序数据的大数据处理系统的迫切需求。这一选择将成为金融机构提高数据处理效率、优化交易响应时间、提高…...

编程日记 2025/7/15 9:39:15