目录
成品:
任务要求:
1. 创建一个基本的个人简介网页
2. 样式和布局要求
3. 详细样式要求
源码:
详细讲解:
1.导航栏部分:
2.头像和介绍部分:
3.技能列表部分
4.作品集部分
Document
Mike,一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇,自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业,Mike以其深厚的学术功底和创新思维,在人工智能领域取得了突破性成就。
技能列表
C++研发
80%
Java研发
70%
后端开发
90%
前端开发
50%
计算机系统
85%
作品集
计算机
个人社保计算器
扫雷
.top{
/* 设置背景颜色 */
background-color: #333;
/* 溢出隐藏 */
overflow: hidden;
}
.top a{
/* 对字体的设置 */
color: white;
/* 去除下划线 */
text-decoration: none;
text-align: center;
padding: 14px 16px;
/* 设置元素的显示类型为块级元素。块级元素(block-level elements)在页面中通常会占据一整行,其宽度自动填充其父元素的宽度,并且前后会有换行。 */
display: block;
/* 使元素向其包含块的左侧浮动。 */
float: left;
/* 在很多情况下,display: block; 和 float: left; 会一起使用来创建并排的布局 */
}
nav a:hover{
/* 设置悬停时的颜色变化 */
background-color: #575757;
}
.pic{
/* 设置图片大小 */
width: 100px;
height: 100px;
}
/*html*/
(1).重点为: display: block; 和 float: left;的使用,overflow: hidden;的使用,hover的使用。
/* css头像部分 */
.imgs{
/* 设置头像边框 */
border: solid ;
/* 设置边框为圆心 */
border-radius: 50%;
/* 填充图片 */
background-image: url(./graph.jpg);
/* 控制背景图片的大小,cover:使背景图片完全覆盖背景区域,同时保持图片的纵横比 */
background-size: cover;
/* 将图片居中展示 */
background-position: center;
/* 确保背景图片在背景区域中只显示一次,不进行重复 */
background-repeat: no-repeat;
/* 设置大小 */
height: 100px;
width: 100px;
/* 设置阴影效果 */
box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.4);
}
/*html*/
Mike,一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇,自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业,Mike以其深厚的学术功底和创新思维,在人工智能领域取得了突破性成就。
(1).重点:border-radius: 50%;设置为圆形,background-image: url(./graph.jpg);填充图片,background-size: cover;图片覆盖。
/* css进度条 */
.a{
background-color: rgb(238, 236, 236);
}
.b{
background-color: rgb(49, 157, 49);
text-align: center;
}
/*html*/
技能列表
C++研发
80%
Java研发
70%
后端开发
90%
前端开发
50%
计算机系统
85%
(1).重点:知道如何构造一个进度条。
/* css作品集 */
.div1{
/* 设置边框 */
border: 1px solid #ddd;
/* 设置圆角 */
border-radius: 8px;
/* 设置作品之间的间距 */
margin-bottom: 15px;
/* 设置阴影效果 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* 重点 */
transition: transform 0.1s, background-color 0.3s;
}
.div1:hover{
/* 重点 */
transform: scale(1.03);
background-color: #f9f9f9;
}
.div1 img{
/* 图像占比100% */
width: 100%;
height: 100%;
/* 圆角处理 */
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.div1 h4{
margin: 7%;
/* 字体居中展示 */
text-align: center;
}
/*html*/
作品集
计算机
个人社保计算器
扫雷
(1).transition: transform 0.1s, background-color 0.3s;
transition: [property] [duration] [timing-function] [delay];
property
:指定要应用过渡效果的 CSS 属性。可以是单个属性,也可以是多个属性,用逗号分隔。duration
:指定过渡效果的持续时间(时间单位如秒 s
或毫秒 ms
)。timing-function
:指定过渡效果的时间曲线。delay
:指定过渡效果的延迟时间(时间单位如秒 s
或毫秒 ms
)。(2).transform: scale(1.03)
transform: scale(1.03)是 CSS 的一个变换属性,用于缩放元素。 scale() 函数是 transform 属性的一部分,用于改变元素的大小,而不改变其实际布局或位置。scale()括号中的值大于1表示放大,小于1表示缩小。
transform常用值:
translate(x, y)
:移动元素的位置。rotate(angle)
:旋转元素。scale(x, y)
:缩放元素的大小。skew(x, y)
:倾斜元素。matrix(a, b, c, d, e, f)
:应用 2D 转换矩阵。