CSS 下拉菜单、提示工具、图片廊、计数器

news2024/10/5 13:03:05

一、CSS 下拉菜单：

CSS下拉菜单用于创建一个鼠标移动上去后显示下拉菜单的效果。示例：

<style>

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  padding: 12px 16px;

}

.dropdown:hover .dropdown-content {

  display: block;

}

</style>

<div class="dropdown">

  <span>鼠标移动到我这！</span>

  <div class="dropdown-content">

    <p>唐诗</p>

    <p>宋词</p>

  </div>

</div>

可以使用任何的HTML元素来打开下拉菜单。使用容器元素（如<div>）来创建下来菜单的内容，并放在任何想放的位置上。使用<div>元素来包裹这些元素，并使用CSS来设置下拉内容的样式。.dropdowm类使用position：relative，将设置下拉菜单的内容放置在下拉按钮右下角位置；.dropdowm-content类中是实际的下拉菜单，默认是隐藏的，在鼠标移动到指定元素后会显示。

<style>

.dropbtn {

    background-color: BLUE;

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

}

.dropdown {

    position: relative;

    display: inline-block;

}

.dropdown-content {

    display: none;

    position: absolute;

    background-color: #f9f9f9;

    min-width: 160px;

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {

    color: black;

    padding: 12px 16px;

    text-decoration: none;

    display: block;

}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

    display: block;

}

.dropdown:hover .dropbtn {

    background-color: #3e8e41;

}

</style>

<div class="dropdown">

  <button class="dropbtn">下拉菜单</button>

  <div class="dropdown-content">

    <a href="http://www.runoob.com">唐诗</a>

    <a href="http://www.runoob.com">宋词</a>

  </div>

</div>

二、CSS 提示工具：

提示工具（tooltip）在鼠标移动到指定元素后触发。示例：

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    /* 定位 */

    position: absolute;

    z-index: 1;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

<body style="text-align:center;">

<div class="tooltip">鼠标移动到这

  <span class="tooltiptext">提示文本</span>

</div>

</body>

HTML使用容器类元素（如<div>）添加“tooltip”类，在鼠标移动到<div>上时显示提示信息。提示文本放在内联元素上（如<span>）并使用class = “tooltiptext”。CSS tooltip类使用position：relative，提示文本需要设置定位值position：absolute。tooltiptext类用于实际的提示文本。默认是隐藏的，在鼠标移动到元素显示。border-radius属性用于为提示框添加圆角。hover选择器用于在鼠标移动到指定元素<div>上时显示的提示。

定位提示工具：

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    

    /* 定位 */

    position: absolute;

    z-index: 1;

    top: -5px;

    left: 105%;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

添加箭头：

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    bottom: 150%;

    left: 50%;

    margin-left: -60px;

}

.tooltip .tooltiptext::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: black transparent transparent transparent;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    top: 150%;

    left: 50%;

    margin-left: -60px;

}

.tooltip .tooltiptext::after {

    content: "";

    position: absolute;

    bottom: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent transparent black transparent;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    top: -5px;

    right: 110%;

}

.tooltip .tooltiptext::after {

    content: "";

    position: absolute;

    top: 50%;

    left: 100%;

    margin-top: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: transparent transparent transparent black;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

淡入效果：可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果。示例：

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    bottom: 100%;

    left: 50%;

    margin-left: -60px;

    

    /* 淡入 - 1秒内从 0% 到 100% 显示: */

    opacity: 0;

    transition: opacity 1s;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

    opacity: 1;

}

</style>

三、CSS图片廊：

CSS创建图片廊示例：

<style>

div.img {

    margin: 5px;

    border: 1px solid #ccc;

    float: left;

    width: 180px;

}

div.img:hover {

    border: 1px solid #777;

}

div.img img {

    width: 100%;

    height: auto;

}

div.desc {

    padding: 15px;

    text-align: center;

}

</style>

</head>

<body>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">

      <img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">

    </a>

    <div class="desc">这里添加图片文本描述</div>

  </div>

</div>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">

      <img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">

    </a>

    <div class="desc">这里添加图片文本描述</div>

  </div>

</div>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">

      <img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">

    </a>

    <div class="desc">这里添加图片文本描述</div>

  </div>

</div>

<div class="responsive">

  <div class="img">

    <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">

      <img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">

    </a>

    <div class="desc">这里添加图片文本描述</div>

  </div>

</div>

</body>

四、CSS 图像透明/不透明：

CSS Opacity属性是W3C的CSS3建议的一部分。创建一个透明的图像：

img

{

opacity:0.4; filter:alpha(opacity=40);

 }

五、CSS 图像拼合技术：

图像拼合就是单个图像的集合。示例：

<style>

img.home {

    width: 46px;

    height: 44px;

    background: url(/images/img_navsprites.gif) 0 0;

}

img.next {

    width: 43px;

    height: 44px;

    background: url(/images/img_navsprites.gif) -91px 0;

}

</style>

</head>

<body>

<img class="home" src="/images/img_trans.gif"><br><br>

<img class="next" src="/images/img_trans.gif">

</body>

使用图像拼合创建一个导航列表：

<style>

#navlist{position:relative;}

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}

#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}

#home{background:url('/images/img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}

#prev{background:url('/images/img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}

#next{background:url('/images/img_navsprites.gif') -91px 0;}

</style>

</head>

<body>

<ul id="navlist">

  <li id="home"><a href="/"></a></li>

  <li id="prev"><a href="/css/"></a></li>

  <li id="next"><a href="/css/"></a></li>

</ul>

</body>

六、CSS 媒体类型：

媒体类型允许指定文件如何在不同的媒体上呈现。@media规则允许在相同样式表为不同媒体设置不同的样式。示例：

<style>

@media screen

{

    p.test {font-family:verdana,sans-serif;font-size:14px;}

}

@media print

{

    p.test {font-family:times,serif;font-size:10px;}

}

@media screen,print

{

    p.test {font-weight:bold;}

}

</style>

</head>

<body>

<p class="test">唐诗三百首！！！</p>

</body>

媒体类型：

七、CSS 属性选择器：

具有特定属性的HTML元素样式不仅仅是class和id，比如：

<style>

[title]

{

color:blue;

}

</style>

<style>

[title=hi]

{

border:5px solid green;

}

</style>

<style>

[title~=hello]

{

color:blue;

}

</style>

<style>

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

}

input[type="button"]

{

width:120px;

margin-left:35px;

display:block;

}

</style>

八、CSS 表单：

使用CSS来渲染HTML的表单元素：

<style>

input[type=text], select {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

}

input[type=submit] {

  width: 100%;

  background-color: #4CAF50;

  color: white;

  padding: 14px 20px;

  margin: 8px 0;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}

input[type=submit]:hover {

  background-color: #45a049;

}

div {

  border-radius: 5px;

  background-color: #f2f2f2;

  padding: 20px;

}

</style>

<body>

<h3>使用 CSS 来渲染 HTML 的表单元素</h3>

<div>

  <form action="/action_page.php">

    <label for="fname">First Name</label>

    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>

    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>

    <select id="country" name="country">

      <option value="australia">Australia</option>

      <option value="canada">Canada</option>

      <option value="usa">USA</option>

    </select>

  

    <input type="submit" value="Submit">

  </form>

</div>

</body>

九、CSS计数器：

CSS计数器通过一个变量来设置，根据规则递增变量。CSS计数器使用到的属性：counter-reset - 创建或者重置计数器；counter-increment - 递增变量；content - 插入生成的内容；counter() 或 counters() 函数 - 将计数器的值添加到元素。要使用CSS计数器，得先使用counter-reset创建。示例：

<style>

body {

  counter-reset: section;

}

h2::before {

  counter-increment: section;

  content: "Section " counter(section) ": ";

}

</style>

嵌套计数器：

<style>

body {

  counter-reset: section;

}

h1 {

  counter-reset: subsection;

}

h1::before {

  counter-increment: section;

  content: "Section " counter(section) ". ";

}

h2::before {

  counter-increment: subsection;

  content: counter(section) "." counter(subsection) " ";

}

</style>

CSS计数器属性：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1184482.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

下拉列表框Spinner

下拉列表框Spinner

在XML文件中的创建 <Spinnerandroid:id"id/spinner"android:layout_width"wrap_content"android:layout_height"wrap_content"/> 在Java文件中的设置 //获取Spinner对象 Spinner spinnerfindViewById(R.id.spinner); //创建数组…
阅读更多...
MoveFunsDAO 星航计划｜从Move入门Web3与深入实践「公益课堂」

MoveFunsDAO 星航计划｜从Move入门Web3与深入实践「公益课堂」

Move 语言作为最安全的编程语言之一&#xff0c;在资产的安全性和保护方面有着显著优势&#xff0c;被寄予引领 Web3 世界的全新叙事的厚望。 随着 Sui 在今年五月主网上线&#xff0c;它为 Move 生态带来一股新的浪潮。上线以来&#xff0c;Sui 公链的开发活跃度持续数月位居…
阅读更多...
C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发005：守护进程与进程监控

C/C++轻量级并发TCP服务器框架Zinx-游戏服务器开发005：守护进程与进程监控

文章目录 1 守护进程1.1 进程组和会话1.2 会话的相关概念1.3 守护进程的概念1.4 守护线程的特点1.5 守护进程创建的基本步骤1.6 本项目守护进程的实现 2 进程监控2.1 进程监控的实现 1 守护进程 1.1 进程组和会话 进程除了有进程的PID之外还有一个进程组&#xff0c;进程组是…
阅读更多...
【Git】Git 学习笔记_操作远程仓库

【Git】Git 学习笔记_操作远程仓库

1. SSH 配置和克隆仓库 ssh-keygen -t rsa -C "xxxqq.com"回车后出现以下内容&#xff0c;直接回车&#xff1a; Generating public/private rsa key pair. Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa): (按回车键) Enter pass…
阅读更多...
摆脱千篇一律！一文说透如何快速管理超低温冰箱

摆脱千篇一律！一文说透如何快速管理超低温冰箱

超低温冰箱在当今的科学、医疗和工业领域扮演着至关重要的角色&#xff0c;它们被广泛用于储存生物样本、疫苗、药品和实验物品等高价值、温度敏感的产品。 然而&#xff0c;为了维持这种稳定的温度环境&#xff0c;必须采取有效的监控和控制措施&#xff0c;因为即使短暂的温度…
阅读更多...
嵌入式养成计划-48----QT--信息管理系统：百川仓储管理

嵌入式养成计划-48----QT--信息管理系统：百川仓储管理

一百二十二、信息管理系统&#xff1a;百川仓储管理 122.1 UI界面 122.2 思路 客户端&#xff1a; 用户权限有两种类型&#xff0c;一种是用户权限&#xff0c;一种是管理员权限&#xff0c;登录时服务器端会根据数据库查询到的此用户名的权限返回不同的结果&#xff0c;客户…
阅读更多...
[HCTF 2018]WarmUp最详细解释

[HCTF 2018]WarmUp最详细解释

查看源码找到提示 访问source.php 代码审计&#xff1a; class emmm{public static function checkFile(&$page){$whitelist ["source">"source.php","hint">"hint.php"]; 定义了一个名为emmm的类&#xff0c;在该类中有…
阅读更多...
[unity]切换天空盒

[unity]切换天空盒

序 unity是自带天空盒的&#xff1a; 但有的时候不想用自带的。怎么自定义&#xff1f;如何设置&#xff1f; 官方文档 Unity - Manual: The Lighting window (unity3d.com) 相关窗口的打开方法 天空盒对应的选项 实际操作 从标准材质球到天空盒材质球 新建一个材质球&…
阅读更多...
每日一题 2609. 最长平衡子字符串（简单）

每日一题 2609. 最长平衡子字符串（简单）

乍一看&#xff0c;简单题&#xff0c;思路也很简单&#xff0c;但代码有点不好写 思路无非就是从找到的第一个 ‘0’ 开始&#xff0c;一直找 ‘0’ 知道遇到一个 ‘1’&#xff0c;此时变换策略&#xff0c;一直找 ‘1’&#xff0c;知道遇到一个 ‘0’&#xff0c;就这样一…
阅读更多...
掌握 Figma 的自动布局，轻松设计 - 简化指南！

掌握 Figma 的自动布局，轻松设计 - 简化指南！

Figma作为一种基于浏览器操作的设计工具&#xff0c;改变了传统的设计软件工作模式&#xff0c;为我们在线合作设计奠定了基础。自推出以来&#xff0c;Figma的创新一直受到国内外众多UI设计师的关注&#xff0c;包括在推动设计团队开展高效设计工作方面&#xff0c;Figma推出了…
阅读更多...
计算机毕业设计基于springboot+java+vue的健身房课程预约信息网站

计算机毕业设计基于springboot+java+vue的健身房课程预约信息网站

运行环境 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven 项目介绍 本健身网…
阅读更多...
win10安装.net3.5

win10安装.net3.5

运行 winver 对应Windows的版本下载相应的iso&#xff0c;可以在MSDN, 我告诉你 - 做一个安静的工具站 (itellyou.cn)下载&#xff0c;最新的去微软官方下载下载 Windows 10 (microsoft.com) 下载这个工具下载 将iso中的文件夹sxs里的内容拷贝到C:/windows/sxs里 管理员运行po…
阅读更多...
超简单超实用的网页视频下载方法

超简单超实用的网页视频下载方法

想必大家经常需要下载网页视频&#xff0c;以便自己离线观看&#xff0c;这篇文章就来说一种超简单超实用的快捷方法&#xff0c;无需下载软件&#xff0c;无需使用插件&#xff0c;三四步轻松搞定&#xff01; 目录 Google浏览器网页视频下载 Microsoft Edge浏览器网页视频…
阅读更多...
前端项目导入vue和element

前端项目导入vue和element

1.安装nodejs 下载链接https://cdn.npmmirror.com/binaries/node/v18.18.0/node-v18.18.0-x64.msi 进入cmd 命令行模式 管理员身份运行 输入 &#xff08;node -v&#xff09;能看到版本号 npm config set prefix "C:\Program Files\nodejs" 默认路径 npm config…
阅读更多...
网页【CSS】滚动条

网页【CSS】滚动条

前言 优化后的滚动条会提亮我们的网站页面。 例如&#xff1a;CSS-TRICKS这个网站如果采用的是浏览器默认的滚动条&#xff0c;不进行优化&#xff0c;页面会显得很不搭。 所以该网站的滚动条样式优化如下&#xff1a; html::-webkit-scrollbar {width: 30px;height: 30px; …
阅读更多...
基于Springboot的时装购物系统（有报告）。Javaee项目，springboot项目。

基于Springboot的时装购物系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的时装购物系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…
阅读更多...
notepad++搜索结果窗口不见了

notepad++搜索结果窗口不见了

1、使用notepad打开一个文件文件 2、ctrlf&#xff0c;打开搜索窗口&#xff0c;随便搜索一个内容 3、按F7,然后AltF7 切换焦点到Find result. 会有一个小窗口出现&#xff0c;内容是&#xff1a;还原&#xff0c;移动&#xff0c;大小等 4&#xff0c;点移动&#xff0c;使…
阅读更多...
打造高效的客服体系，就在于这个“专属链接”

打造高效的客服体系，就在于这个“专属链接”

想要追踪特定数据&#xff0c;但是得在数据库中大海捞针&#xff1f; 想要知道某个推广的效果&#xff0c;但是无法追踪&#xff1f; 想要获得个性化的报告&#xff0c;但是数据不够精准&#xff1f; 面对这些情况&#xff0c;只需要靠一条“专属链接”就能一一击破&#xff…
阅读更多...
WebGL的技术难点分析

WebGL的技术难点分析

WebGL是一项强大的技术&#xff0c;但在开发过程中可能会遇到一些挑战和技术难点。以下是一些与WebGL相关的技术难点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.3D数学和图形编程&#xff1a;理…
阅读更多...
数据可视化PCA与t-SNE

数据可视化PCA与t-SNE

PCA&#xff08;主成分分析&#xff09;和t-SNE&#xff08;t分布随机近邻嵌入&#xff09;都是降维技术&#xff0c;可以用于数据的可视化和特征提取。 降维&#xff1a;把数据或特征的维数降低&#xff0c;其基本作用包括&#xff1a; 提高样本密度&#xff0c;以及使基于欧…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023