1. IT分享知识网首页
  2. 未分类

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

老牧童 • • 未分类

页面设计任务 个人信息页面成品 任务要求 源码 详细讲解 1 导航栏部分 1 重点为 display block 和 float left 的使用 overflow hidden 的使用 hover 的使用

大家好，欢迎来到IT知识分享网。

目录

成品:

任务要求：

        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: #; } .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 转换矩阵。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/128425.html

赞 (0)
老牧童老牧童
0
上一篇 2025-08-31 18:26
下一篇 2025-08-31 18:33

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信