CSS入门（人物简历案例）

最新推荐文章于 2024-03-11 14:49:04 发布

Brittany____

最新推荐文章于 2024-03-11 14:49:04 发布

阅读量552

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/Brittany____/article/details/128417510

版权

在这里插入图片描述

HTML代码块

<!-- HTML版本声明；当前版本为HTML5；必须写在文档的第一行 -->
<!DOCTYPE html>
<!-- HTML文档 start -->
<html lang="en">
<!-- HTML文档开头部分 start -->
<head>
    <!-- 文档属性 告知浏览器需要采用什么编码格式解析文档 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 文档标题 -->
    <title>人物简历-赵丽颖</title>
    <!-- 引入外部css文件 -->
    <link rel="stylesheet" type="text/css" href="css/resume.css">
<!-- HTML文档开头部分 end -->
</head>
<!-- HTML文档主体内容 start -->
<body>
    <!-- 简历页面 start -->
    <div id="container">

        <!-- h1标题标签 -->
        <h1>人物简历-赵丽颖</h1>

        <!-- 导航信息 start -->
        <div id="nav">
            <!-- 无序列表 -->
            <ul>
                <li>
                   <a href="#info">基本信息</a>
                </li>
                <li>
                    <a href="#early">早年经历</a>
                </li> 
                <li>
                    <a href="#career">演艺经历</a>
                </li>
                 <li>
                    <a href="#prizon">获奖记录</a>
                </li>
                <li>
                    <a href="#contribution">社会活动</a>
                </li> 
                <li>
                    <a href="#contact">联系方式</a>
                </li>
            </ul>
        </div>
        <!-- 导航信息 end --> 

        <!-- 图片和视频 start -->
        <div class="center">
            <!-- src：引入图片地址 width:宽度 height：高度 -->
            <img class="margin" src="赵丽颖.jpg" width="200px" height="300px" title="赵丽颖">
            <!-- 视频 -->
            <video class="margin" src=