页面设计任务 个人信息页面

目录

成品:

任务要求:

        1. 创建一个基本的个人简介网页

        2. 样式和布局要求

        3. 详细样式要求

源码:

详细讲解:

1.导航栏部分:

2.头像和介绍部分:

3.技能列表部分

4.作品集部分


成品:


任务要求:

1. 创建一个基本的个人简介网页
  • 网页结构:包含一个导航栏和两个主要内容区域(左侧和右侧)。
  • 布局
    • 导航栏:位于页面顶部,包含“主页”、“关于我”和“作品集”三个链接。
    • 左侧区域:展示个人简介信息,包括一张圆形头像和一段个人描述文字。
    • 右侧区域:包括技能列表和作品集。
2. 样式和布局要求
  • 头像
    • 使用圆形边框,并设置背景图片
    • 图片需适应容器,确保居中显示
  • 技能列表
    • 使用进度条表示不同技能的掌握程度,进度条需具有不同的背景颜色和百分比显示
  • 作品集
    • 每个作品集项包括一张图片和标题,图片应覆盖整个容器宽度,并且需要在鼠标悬停时有轻微的缩放效果。
3. 详细样式要求
  • 导航栏
    • 背景色为深灰色,链接文本为白色,悬停时背景色变为浅灰色。
  • 技能进度条
    • 使用两种不同的背景色来区分进度条的背景和填充部分
  • 作品集
    • 每个作品集项有边框和阴影效果,鼠标悬停时应有放大效果
    • 图片需填满整个项的宽度,高度自动适应


源码:




    
    
    Document
    




    

    

Mike,一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇,自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业,Mike以其深厚的学术功底和创新思维,在人工智能领域取得了突破性成就。

技能列表

C++研发

80%

Java研发

70%

后端开发

90%

前端开发

50%

计算机系统

85%

作品集

计算机

个人社保计算器

扫雷


详细讲解:

1.导航栏部分:

.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的使用。

2.头像和介绍部分:


/* 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;图片覆盖。

3.技能列表部分

/* 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).重点:知道如何构造一个进度条。

4.作品集部分

/* 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 转换矩阵。

你可能感兴趣的:(html初阶,css,css3,前端,html)