综合案例一-热词

设计图如下

1、设计需求

①需要鼠标放上去有显示透明

②需要点击后跳转到相应页面且保留原页面

2、设计所需标签和CSS样式

所需标签：div

CSS样式：伪类hover，颜色color，字大小font-size，背景颜色background-color，盒子宽度和高度width和height

3、设计具体步骤

第一步使用a标签把对应的字写上去

<a href="#" target="_blank">HTML</a>

<a href="#" target="_blank">CSS</a>

<a href="#" target="_blank">JavaScript</a>

<a href="#" target="_blank">Vue</a>

<a href="#" target="_blank">React</a>

第二步查看效果发现默认为蓝色，和有下划线，且在同一行。这时候就需要使用color，text-decoration和display属性

a {

color: white;

display: block;

text-decoration: none;

}

第三步看设计图还需要设置盒子的宽度和长度，背景颜色，字的大小，在盒子里面水平和垂直居中

   a {

       background-color: #3064bb;

       width: 200px;

       height: 80px;

       color: white;

       font-size: 18px;

       text-align: center;

       line-height: 80px;

       display: block;

       text-decoration: none;

    }

第四步还需要设置鼠标悬停效果，用hover属性

  a:hover {

            background-color: #608dd9;

            width: 200px;

            height: 80px;

        }

总体代码如下

<!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>

        a {

            background-color: #3064bb;

            width: 200px;

            height: 80px;

            color: white;

            font-size: 18px;

            text-align: center;

            line-height: 80px;

            display: block;

            text-decoration: none;

        }

        a:hover {

            background-color: #608dd9;

            width: 200px;

            height: 80px;

        }

    </style>

</head>

<body>

    <h1>搜索热词</h1>

    <a href="#" target="_blank">HTML</a>

    <a href="#" target="_blank">CSS</a>

    <a href="#" target="_blank">JavaScript</a>

    <a href="#" target="_blank">Vue</a>

    <a href="#" target="_blank">React</a>

</body>

</html>

4、遇到的问题

第一个忘记了下划线如何删除；

第二个一开始想用div标签嵌套a标签，但发现div标签的话a标签的字体颜色就改变不了。a特殊不能继承，所以得再单独设置。比较麻烦所以干脆直接用a标签；

自学前端-HTML5+CSS-综合案例一-热词的更多相关文章

  1. 前端html5/css基础知识

    https://www.cnblogs.com/clschao/articles/10073124.html

  2. CSS综合案例

    代码示例:新闻页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. HTML5新标签与特性---新表单+新属性----综合案例1

    HTML5新标签与特性 兼容性问题 (ie9 以上的版本) 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTM ...

  4. 黑马eesy_15 Vue：04.综合案例（前端Vue实现）

    黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) 黑马eesy_15 Vue:04.综合案例(前端 ...

  5. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

  6. 前端之CSS基础

    前端之CSS 1. CSS CSS定义如何显示HTML元素. 当浏览器读到一个样式表,他就会按照这个样式表来对文档进行格式化(渲染). 3.CSS语法 1)CSS实例 每个CSS由两部分组成: 选择器 ...

  7. 自学前端开发，现在手握大厂offer，我的故事还在继续

    简要背景 我是一个非科班出身的程序员,而且是连续跨专业者,用一句话总结就是:16 届本科学完物流,保送研究生转交通,自学前端开发的休学创业者. 17 年休学创业,正式开始学习前端,离开创业公司后,我又 ...

  8. swiper快速切换插件（两个综合案例源码）

    swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...

  9. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

  10. 2020年12月-第02阶段-前端基础-CSS初识

    CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用 ...

随机推荐

  1. 在.NET 6.0中自定义接口路由

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在本文中,我们将讨论ASP.NET Core中的新路由.我们将了解什么是接口(en ...

  2. day04-商家查询缓存03

    功能02-商铺查询缓存03 3.功能02-商铺查询缓存 3.6封装redis工具类 3.6.1需求说明 基于StringRedisTemplate封装一个工具列,满足下列需求: 方法1:将任意Java ...

  3. class(类)和构造函数(原型对象)

    构造函数和class的关系,还有面向对象和原型对象,其实很多人都会很困惑这些概念,这是第二次总结这些概念了,之前一次,没有class类,其实了解了构造函数,class也就很容易理解了 一. 构造函数和 ...

  4. 基于SqlSugar的开发框架循序渐进介绍（29）-- 快速构建系统参数管理界面-Vue3+ElementPlus

    在随笔<基于SqlSugar的开发框架循序渐进介绍(28)-- 快速构建系统参数管理界面>中介绍了基于SqlSugar开发框架,构建系统参数管理的后端API部分,以及WInform界面部分 ...

  5. 用vue+elementui写了一个图书管理系统

    用vue+elementui写了一个图书管理系统 转载自公号:java大师 目前是指一个纯前端的展示,后端还在开发中,前端接口是通过json-server模拟的 用到的技术栈 1.vue.js 2.e ...

  6. 2022-10-31：以下go语言代码输出什么？A：map[]；B：nil；C：Panic；D：编译错误。 package main import “fmt“ func main() {

    2022-10-31:以下go语言代码输出什么?A:map[]:B:nil:C:Panic:D:编译错误. package main import "fmt" func main( ...

  7. 2022-04-01：有n个人，m个任务，任务之间有依赖记录在int[][] depends里。 比如: depends[i] = [a, b]，表示a任务依赖b任务的完成， 其中 0 ＜= a ＜

    2022-04-01:有n个人,m个任务,任务之间有依赖记录在int[][] depends里. 比如: depends[i] = [a, b],表示a任务依赖b任务的完成, 其中 0 <= a ...

  8. 2022-01-09：整数转换英文表示。将非负整数 num 转换为其对应的英文表示。 示例 1： 输入：num = 123， 输出：“One Hundred Twenty Three“。 力扣273。

    2022-01-09:整数转换英文表示.将非负整数 num 转换为其对应的英文表示. 示例 1: 输入:num = 123, 输出:"One Hundred Twenty Three&quo ...

  9. 没想到还有这种骚操作~如何使用Golang实现无头浏览器截图？

    前言 在Web开发中,有时需要对网页进行截图,以便进行页面预览.测试等操作. 而使用无头浏览器来实现截图功能,可以避免手动操作的繁琐和不稳定性. 这篇文章将介绍:使用Golang进行无头浏览器的截图, ...

  10. 带你体验AI系列之云原生最佳实践--免费体验GPT-4教程

    前言 ​ [GPT-4]是OpenAI最新推出的大型语言模型,它支持图像和文本输入,以文本形式输出.它比GPT-3.5更大.更强.更猛.最重要的是据与研究表明,他在某些场景下,可以通过图灵测试.但是, ...