html+css作业1-招聘案例&热词案例

最新推荐文章于 2024-05-21 18:11:13 发布

Hola__SUN

最新推荐文章于 2024-05-21 18:11:13 发布

阅读量118

点赞数

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

本文链接：https://blog.csdn.net/Hola__SUN/article/details/133767622

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html-招聘案例&热词案例

0 介绍
1 招聘案例
- 目标样式
- 代码
2 热词案例
- 目标样式
- 代码
笔记

0 介绍

记录前端学习~

1 招聘案例

目标样式

招聘案例目标样式

代码

文件结构：
招聘案例文件结构

<!DOCTYPE html>
<html lang="en">

<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>综合案例1-招聘案例</title>
</head>

<body>
  <h1>腾讯科技高级web前端开发岗位</h1>
  <hr>
  <h2>职位描述</h2>
  <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
  <h2>岗位要求</h2>
  <p>5年以上前端开发经验，<strong>精通html5/css3/javascript等</strong>web开发技术；</p>
  <p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
  <p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p>
  <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
  <p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
  <p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
  <h2>工作地址</h2>
  <p>上海市-徐汇区-腾云大厦</p>
  <img src="./images/map.jpg" alt="">
</body>

</html>

2 热词案例

目标样式

热词案例-index.html界面

第一个超链接界面
第二个超链接界面

代码

文件结构：
热词案例文件结构

index.html

<!DOCTYPE html>
<html lang="en">

<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>综合案例2-今日热词案例</title>
</head>

<body>
  <h1>今日搜索热词</h1>
  <hr>
  <h2>1、阿卡贝拉</h2>
  <p>阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例： <a href="./one.html">阿卡贝拉《千与千寻》</a></p>
  <h2>2、翻唱</h2>
  <p>“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带来不一样的风格。视频示例： <a href="./two.html">有一种悲伤（翻唱）-《A Kind of Sorrow》</a></p>
</body>

</html>

one.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  <h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
  <hr>
  <h2>音频</h2>
  <audio src="./media/music.mp3" controls></audio>
</body>
</html>

two.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
  <h1>有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn</h1>
  <hr>
  <h2>视频</h2>
  <video src="./media/movie.mp4" controls></video>
</body>
</html>