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

2024-08-22 14:20
文章标签 设计 页面 任务 个人信息

本文主要是介绍页面设计任务 个人信息页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目录

成品:

任务要求：

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

        2. 样式和布局要求

        3. 详细样式要求

源码：

详细讲解：

1.导航栏部分：

2.头像和介绍部分:

3.技能列表部分

4.作品集部分

成品:

任务要求：

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

源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.imgs{border: solid ;border-radius: 50%;background-image: url(./graph.jpg);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);}.container{display: flex;}.leftside{width: 75%;padding: 5%;box-sizing: border-box;}.rightside{width: 25%;padding: 5%;}.top{background-color: #333;/* 溢出隐藏 */overflow: hidden;}.top a{color: white;text-decoration: none;text-align: center;padding: 14px 16px;display: block;float: left;}nav a:hover{background-color: #575757;}.pic{width: 100px;height: 100px;}/* 作品集 */.div1{text-align: center;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{width: 100%;height: 100%;border-top-left-radius: 8px;border-top-right-radius: 8px;}.div1 h4{margin: 7%;text-align: center;}/* 进度条 */.a{background-color: rgb(238, 236, 236);}.b{background-color: rgb(49, 157, 49);text-align: center;}</style></head>
<body><nav class="top"><a href="#home">主页</a><a href="#self">关于我</a><a href="#work">作品集</a></nav><div class="container"><div class="leftside"><div class="imgs"></div><p>Mike，一位在科技界与公益领域均享有盛誉的杰出人物。他出生于中国东部的一个小镇，自幼便展现出对科技无与伦比的好奇心和探索欲。毕业于世界顶尖学府麻省理工学院计算机科学专业，Mike以其深厚的学术功底和创新思维，在人工智能领域取得了突破性成就。</p></div><div class="rightside"><div><h3>技能列表</h3><div><p>C++研发</p><div class="a"><div class="b" style="width: 80%;">80%</div></div><p>Java研发</p><div class="a"><div class="b" style="width: 70%;">70%</div></div><p>后端开发</p><div class="a"><div class="b" style="width: 90%;">90%</div></div><p>前端开发</p><div class="a"><div class="b" style="width: 50%;">50%</div></div><p>计算机系统</p><div class="a"><div class="b" style="width: 85%;">85%</div></div></div></div><div class="div2"><h3>作品集</h3><div class="div1"><img src="https://img1.baidu.com/it/u=2169081333,1410260141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="pic"><h4>计算机</h4></div><div class="div1"><img src="https://img1.baidu.com/it/u=2169081333,1410260141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="pic"><h4>个人社保计算器</h4></div><div class="div1"><img src="https://img1.baidu.com/it/u=2169081333,1410260141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="pic"><h4>扫雷</h4></div></div></div></div></body>
</html>

详细讲解：

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*/
<nav class="top"><a href="#home">主页</a><a href="#self">关于我</a><a href="#work">作品集</a>
</nav>

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

(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*/<div><h3>技能列表</h3><div><p>C++研发</p><div class="a"><div class="b" style="width: 80%;">80%</div></div><p>Java研发</p><div class="a"><div class="b" style="width: 70%;">70%</div></div><p>后端开发</p><div class="a"><div class="b" style="width: 90%;">90%</div></div><p>前端开发</p><div class="a"><div class="b" style="width: 50%;">50%</div></div><p>计算机系统</p><div class="a"><div class="b" style="width: 85%;">85%</div></div></div></div>

(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*/<div class="div2"><h3>作品集</h3><div class="div1"><img src="https://img1.baidu.com/it/u=2169081333,1410260141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="pic"><h4>计算机</h4></div><div class="div1"><img src="https://img1.baidu.com/it/u=2169081333,1410260141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="pic"><h4>个人社保计算器</h4></div><div class="div1"><img src="https://img1.baidu.com/it/u=2169081333,1410260141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="pic"><h4>扫雷</h4></div></div>

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

这篇关于页面设计任务 个人信息页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1096522。

相关文章

不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
怎么让1台电脑共享给7人同时流畅设计

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域，图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能，成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限，比如只有一台高性能电脑时，如何高效地让七人同时流畅地进行设计工作，便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器（CPU）：选择多核、高线程的处理器，例如Intel的至强系列或AMD的Ry
阅读更多...
基于51单片机的自动转向修复系统的设计与实现

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生，希望您们都共创辉煌！✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机
阅读更多...
SprinBoot+Vue网络商城海鲜市场的设计与实现

SprinBoot+Vue网络商城海鲜市场的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+
阅读更多...
单片机毕业设计基于单片机的智能门禁系统的设计与实现

单片机毕业设计基于单片机的智能门禁系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍程序代码部分参考 设计清单具体实现截图参考文献设计获取 前言 💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生，希望您们都共创辉煌！✌💗 👇🏻 精彩专栏 推荐订
阅读更多...
Spring的设计⽬标——《Spring技术内幕》

Spring的设计⽬标——《Spring技术内幕》

读《Spring技术内幕》第二版，计文柯著。 如果我们要简要地描述Spring的设计⽬标，可以这么说，Spring为开发者提供的是⼀个⼀站式的轻量级应⽤开发框架（平台）。 作为平台，Spring抽象了我们在 许多应⽤开发中遇到的共性问题；同时，作为⼀个轻量级的应⽤开发框架，Spring和传统的J2EE开发相⽐，有其⾃⾝的特点。 通过这些⾃⾝的特点，Spring充分体现了它的设计理念：在
阅读更多...
开题报告中的研究方法设计：AI能帮你做什么？

开题报告中的研究方法设计：AI能帮你做什么？

AIPaperGPT，论文写作神器~ https://www.aipapergpt.com/ 大家都准备开题报告了吗？研究方法部分是不是已经让你头疼到抓狂？ 别急，这可是大多数人都会遇到的难题！尤其是研究方法设计这一块，选定性还是定量，怎么搞才能符合老师的要求？ 每次到这儿，头脑一片空白。 好消息是，现在AI工具火得一塌糊涂，比如ChatGPT，居然能帮你在研究方法这块儿上出点主意。是不
阅读更多...
创业者该如何设计公司的股权架构

创业者该如何设计公司的股权架构

本文来自七八点联合IT橘子和车库咖啡的一系列关于设计公司股权结构的讲座。 主讲人何德文： 在公司发展的不同阶段，创业者都会面临公司股权架构设计问题： 1.合伙人合伙创业第一天，就会面临股权架构设计问题（合伙人股权设计）； 2.公司早期要引入天使资金，会面临股权架构设计问题（天使融资）； 3.公司有三五十号人，要激励中层管理与重要技术人员和公司长期走下去，会面临股权架构设计问题（员工股权激
阅读更多...
FreeRTOS学习笔记（二）任务基础篇

FreeRTOS学习笔记（二）任务基础篇

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、 任务的基本内容1.1 任务的基本特点1.2 任务的状态1.3 任务控制块——任务的“身份证” 二、 任务的实现2.1 定义任务函数2.2 创建任务2.3 启动任务调度器2.4 任务的运行与切换2.4.1 利用延时函数2.4.2 利用中断 2.5 任务的通信与同步2.6 任务的删除2.7 任务的通知2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2