网页设计基础第十九讲：CSS定位实战 —— 打造精美布局的个人简介页

通过深入学习CSS中的静态、相对、绝对、固定和粘性定位，掌握如何灵活运用这些定位方式来创建一个布局精美的个人简介页。本教程将带你从零开始，逐步构建一个包含个人头像、姓名、简介、技能列表和联系方式的响应式网页。

知识回顾

1. 浮动可以让多个块级盒子在一行没有缝隙排列显示，经常用于横向排列盒子

2. 定位则是可以让盒子自由地在某个盒子内移动位置或者固定在屏幕中某个位置

3定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移。
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置。

定位模式

静态定位（Static）：这是元素的默认定位方式，遵循正常的文档流布局，不会受到其他定位属性的影响。
相对定位（Relative）：相对于其自身正常位置进行偏移，但不会影响周围元素的位置。
绝对定位（Absolute）：相对于最近的非static祖先元素定位，如果所有祖先都是static，则相对于初始包含块（通常是浏览器窗口）。
固定定位（Fixed）：相对于浏览器窗口定位，即使页面滚动也不会改变位置。
粘性定位（Sticky）：结合了相对定位和固定定位的特点，当元素滚动到特定位置时变为固定定位。

通过CSS 的 position 属性来设置

相对定位：边偏移

小结

任务描述

设计要求

页面结构：
- 包含个人头像、姓名、个人简介、技能列表和联系方式。
- 确保各个部分有明确的分隔，使内容易于阅读。
布局要求：
- 使用CSS的相对定位和流式布局，避免使用绝对定位以防止内容重叠。
- 使用适当的padding和margin调整元素之间的间距。
样式设计：
- 个人头像应为圆形，使用边框样式提升美观性（如：border-radius和border）。
- 技能列表使用背景和文本颜色增强可读性（如：蓝色背景和白色文本）。
- 使用阴影和圆角样式（如：box-shadow和border-radius）提升整体视觉效果。
响应式设计：
- 使用媒体查询确保在不同屏幕尺寸下（如手机、平板、桌面）正常显示，保持良好的用户体验。
- 在屏幕宽度较小的设备上，调整容器宽度以提高适应性。
用户体验：
- 通过清晰的层次结构和可读性良好的文字，使多个信息部分不易被遮挡。
- 确保所有内容在不同设备上均能良好显示，增强用户的视觉体验。

任务准备

理解HTML基本结构
理解CSS的基本语法，了解盒模型的概念
对CSS定位有一个初步的认识

任务实施

步骤1：准备开发环境

创建项目文件夹：
- 在本地计算机上创建一个新的文件夹，例如personal-profile。
创建文件：
- 在项目文件夹内创建一个HTML文件，命名为index.html。

步骤2：编写HTML结构

打开index.html文件：
- 使用文本编辑器（如VS Code、Sublime Text等）打开index.html。
编写基础HTML结构：
- 粘贴以下HTML代码到文件中：

xml 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
    <style>
        /* 此处添加CSS样式 */
        /* 详见之前的设计要求具体属性 */
    </style>
</head>
<body>
    <div class="container">
        <div class="profile">
            <img src="profile.jpg" alt="个人头像">
            <div class="name">张三</div>
            <div class="description">前端开发工程师 | 热爱编程和设计</div>
        </div>
        <div class="skills">
            <h3>技能</h3>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>React</li>
                <li>Node.js</li>
            </ul>
        </div>
        <div class="contact">
            <h3>联系方式</h3>
            <p>Email: zhangsan@example.com</p>
            <p>电话: 123-456-7890</p>
        </div>
    </div>
</body>
</html>

步骤3：编写CSS样式

在<style>标签中添加样式：
- 根据之前的要求，将CSS样式代码粘贴到<style>标签内。

css 复制代码

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: 40px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative; /* 相对定位，以便绝对定位子元素参照 */
    padding: 20px;
}

.profile {
    position: relative; /* 使用相对定位 */
    text-align: center;
    margin-bottom: 20px;
}

.profile img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #3498db;
}

.name {
    font-size: 26px;
    margin: 10px 0;
}

.description {
    font-size: 16px;
    color: #555;
}

.skills {
    padding-top: 20px; /* 增加顶部间距 */
}

.skills h3 {
    margin-top: 10px;
    margin-bottom: 5px;
}

.skills ul {
    list-style: none;
    padding: 0;
}

.skills li {
    background: #3498db;
    color: white;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.contact {
    text-align: center;
    margin-top: 20px;
}

.contact h3 {
    margin: 10px 0;
}

.contact p {
    margin: 5px 0;
}

@media (max-width: 600px) {
    .container {
        width: 90%; /* 小屏幕时容器宽度增加 */
    }
}

步骤4：添加个人头像

准备头像图片：
- 准备一张个人头像图片，并将其命名为profile.jpg。
将图片文件放入项目文件夹：
- 将准备好的头像图片文件放入项目的根目录中，确保路径正确。

步骤5：测试和调整

在浏览器中打开HTML文件：
- 双击index.html文件，以在浏览器中打开页面，检查布局和样式效果。
调整样式：
- 如果发现布局不如预期，返回到CSS样式中进行相应的调整。可以根据需要改变margin、padding和其他样式属性。

步骤6：实现响应式设计

进行设备测试：
- 使用浏览器的开发者工具检查页面在不同设备尺寸下的表现，确保内容不被遮挡且排版正常。
根据需要进行修改：
- 根据测试结果，针对不同的设备进行必要的CSS修改，确保网站在所有设备上都能良好展示。小结：

使用了相对定位（position: relative;）在外部容器上，使得子元素可以根据其位置进行绝对定位。
技能列表使用绝对定位（position: absolute;），可以自由调整其位置。

网页设计基础 第十九讲：CSS定位实战 —— 打造精美布局的个人简介页