html原生标签,原生html详情标签（details）用法示例

最新推荐文章于 2024-04-13 17:02:31 发布
最新推荐文章于 2024-04-13 17:02:31 发布
阅读量470 收藏
点赞数
文章标签： html原生标签
这篇博客展示了如何利用CSSSCSS预处理器来导入IBM Plex Sans字体，并创建一个带有自定义颜色主题的响应式卡片组件。卡片包括了不同类型的细节展示，如警告、信息和提醒，通过改变背景色和边框颜色来区分。此外，还详细介绍了如何使用`var()`函数来实现变量复用，以及如何为`details`和`summary`元素添加交互效果。
摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root {

--color-bg: #FEFDFB;

--color-title: #0E1C4E;

--color-summary-1: #FFF6EE;

--color-summary-1-highlight: #FFC48B;

--color-summary-2: #FAFAFF;

--color-summary-2-highlight: #B4B3FF;

--color-summary-3: #FFF0F3;

--color-summary-3-highlight: #FFB3C0;

--font-ibm-plex-sans: 'IBM Plex Sans', sans-serif;

}

html,

body {

overflow: auto;

height: 100vh;

width: 100%;

background: var(--color-bg);

display: flex;

align-items: center;

justify-content: center;

}

.card {

background: white;

padding: 38px 36px;

margin-top: 40px;

margin-bottom: 40px;

border-radius: 4px;

box-shadow: 0 8px 10px rgba(0, 0, 0, .1);

max-width: 400px;

width: 100%;

h1 {

font-family: var(--font-ibm-plex-sans);

font-style: normal;

font-weight: bold;

font-size: 18px;

line-height: 1.2;

color: var(--color-title);

margin-bottom: 20px;

}

details {

border-radius: 4px;

overflow: hidden;

padding: 20px;

background: rgba(0, 0, 0, .05);

border-left: 5px solid gray;

&:not(:last-of-type) {

margin-bottom: 15px;

}

&.warning {

background: var(--color-summary-1);

border-left: 5px solid var(--color-summary-1-highlight);

}

&.info {

background: var(--color-summary-2);

border-left: 5px solid var(--color-summary-2-highlight);

}

&.alert {

background: var(--color-summary-3);

border-left: 5px solid var(--color-summary-3-highlight);

}

summary,

p {

font-family: var(--font-ibm-plex-sans);

font-style: normal;

font-weight: normal;

font-size: 14px;

line-height: 1.4;

color: var(--color-title);

&:not(:last-of-type) {

margin-bottom: 10px;

}

}

p {

padding-left: 30px;

}

summary {

cursor: pointer;

margin-bottom: 0;

list-style-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

&::-webkit-details-marker {

background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

color: transparent;

background-size: 100% 100%;

margin-right: 18px;

width: 16px;

height: 16px;

transform: translateY(2px);

}

}

&[open] {

summary {

margin-bottom: 10px;

list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

font-weight: 700;

&::-webkit-details-marker {

background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

color: transparent;

background-size: 100% 100%;

margin-right: 20px;

width: 12px;

height: 12px;

transform: translateY(1px);

}

}

p {

padding-left: 32px;

}

}

}

}

仙女教母Lareina
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML原生
Qingqingya的博客
08-20 677
HTML原生认识网页网页是怎么形成的？浏览器内核（理解 面试题）Web标准（重点）Web 标准的好处Web 标准构成HTML骨架格式HTML标签分类HTML标签关系文档类型字符集（charset） 认识网页 文字，图像，超链接组成，视频，音频，和Flash 网页是怎么形成的？ 常见浏览器介绍 浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和O...
Flutter调用Android和iOS原生代码的方法示例
01-20
本篇文章将详细阐述如何在Flutter中调用Android和iOS的原生方法。 首先，我们需要了解Flutter中的“通道”（Channel）概念。通道是Flutter与原生平台之间通信的桥梁，它允许Flutter Dart代码发送消息到原生代码，并...
html原生标签梳理笔记
lyxkgc的博客
11-25 1209
梳理原因： 不管使用哪种 ui 框架，ui框架能满足的交互，都是以原生标签为前提。即如果原生标签没有的功能，框架一般也没有封装。 html标签 第一类 head等头部标签类 1 style 标签 引用外部css ； 包裹css代码 <html> <head> <style type="text/css"> h1 {color:red} p {color:blue} </style> </head> <body> <h1>
html 图文详情标签,HTML标签
weixin_39603573的博客
06-04 82
1、常用标签以及适用场景ps：前面有感叹号的是自闭合标签、 //标题仅支持纯文本，不支持嵌套其它标签! //定义页面的说明信息，供搜索引擎查看! //用于连接外部的CSS文件或脚本文件! //定义页面所有链接的基础定位，a标签自身的target属性可以覆盖base的全局属性 //页面的身体，会在页面中展现 //主要用来为HTML文档内大块的内容提供结构和背景 ...
扩展 HTML 原生标签（上）
qross的博客
05-09 486
扩展 HTML 原生标签（上） 在 HTML 中有很多元素标签，如 DIV、 SPAN、INPUT、TABLE 等，元素标签也是组成 HTML 页面的核心内容。在 Javascript 中，每个元素标签都有自己的属性、方法和事件，通过这三个要素，可以通过 Javascript 操作 HTML，让使用者可以和页面进行交互。 虽然每个元素标签都有大量的属性、方法和事件，但有的时候依然不能满足我们的要求，有时，我经常会感慨，要是这个元素有这个属性就好了。有没有想过为标签添加一个自定义的属性？本文就来介绍如何为元素
CSDN博客常用原生HTML标签汇总（帮助你写出优美的博客文章）
Brave_heart4pzj的博客
12-25 3440
场景一：给文字添加块背景，一般在文章总结处使用 标签： <blockquote>总结：今天天气不错</blockquote> 效果： 总结：今天天气不错 场景二：字体、大小、颜色处理 标签： <font size="3" color="red">This is some text!</font> <font size="2" color="...
原生Ajax 和jQuery Ajax的区别示例分析
10-25
通过原生Ajax和jQuery Ajax的示例代码对比，我们可以明显看出，虽然两者都能够实现相同的功能，但使用jQuery Ajax在代码编写上更为便捷，代码量更少，且易于理解和维护。然而，原生Ajax在某些情况下因为不依赖外部库...
html5唤起原生ios和安卓android app的方法
12-17
### HTML5 唤起原生 iOS 和 Android App 的方法 在移动互联网时代，Web 应用（H5 应用）与原生应用（如 iOS 和 Android 应用）之间的交互变得越来越重要。其中一种常见的场景就是从 H5 页面跳转到相应的原生应用，...
循环滚动列表示例-原生JS
03-14
前几天做列表循环滚动的功能，记录一下。 有讲解地址： https://blog.csdn.net/xggllc/article/details/114789086
选项卡_手风琴改造-原生html网页
12-17
原生HTML实现选项卡，通常需要结合CSS（层叠样式表）和JavaScript来完成动态切换效果，但这个项目强调的是只用HTML的实现方法，这可能涉及到使用隐藏和显示的属性来控制各个内容区域的状态。 手风琴效果则是一种...
原生HTML最全项目标签实用技巧
m0_74223728的博客
09-03 193
【代码】原生HTML项目实用技巧。
html5 的 details 标记 ，summary标记，布局
weixin_34387284的博客
11-26 284
html5的新加的标签：details的用法,两种方式的介绍，一种是直接css的实现，一种是js+css的实现。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <header>导航</header> &...
【全网最全】HTML标签详解大全-第一篇{建议收藏}
最新发布
2401_84094029的博客
04-13 1025
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-4M52DT6H-1712998889654)]由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
快速入门：HTML5强大的Details元素
weixin_33779515的博客
11-19 179
 译自：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-awesome-details-element/译者：蒋宇捷（转载请标明出处http://blog.csdn.net/hfahe）Jeffrey Way于2011年11月17日教程细节• 概要：HTML5的Details标签• 难度：初级• 支持的浏览器：...
google fonts 使用方案，解决引入fonts.googleapis.com/css字体网页响应缓慢问题
热门推荐
Deng's Blog
03-14 5万+
Google服务在大陆的崩溃情况使得大量的独立网站字体无法加载，大大影响到了国内相关网站的网页响应速度，本文将给出具体解决方案。
HTML基础 + 实例解析(速速来看!!!)
niceffking的博客
04-29 4599
HTML常见标签使用 1.注释标签 2.标题标签 3.段落标签 4.换行标签 5.格式化标签 6.图片标签 7.超链接标签 8.表格标签 9.表格标签-单元格合并 10.列表标签 无序列表标签 有序标签 11.表单标签
https://fonts.googleapis.com/css 一直加载的处理
oHongHong的博客
06-29 7955
按照操作会得出比较好的页面。但是对于无法访问外网的网站来说，却要登录外网下载字体，有点不可容忍。 经在源码中查找，找到这个语句：@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic); 下载字体 到这里下载需要用的Sou
css跳转滑动,纯CSS滑动切换
weixin_33871933的博客
08-03 471
css@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");:root {--primary-color: #185ee0;--secondary-color: #e6eef9;}*,*:after,*:before {box-sizing: border-bo...
凹下去的白色按钮
一起学习一起进步~
06-21 5044
先看效果： 再看代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>凹下去的按钮</title> <style> @import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap");
原生实现v-html
08-26
要在React中实现Vue中的v-html效果，可以使用dangerouslySetInnerHTML属性。这个属性可以直接将HTML字符串插入到React组件中。使用原生操作，可以通过useState来存储HTML字符串，并在函数组件中使用dangerouslySetInnerHTML来渲染这个字符串。下面是一个示例代码： ```jsx import React, { useState } from 'react'; function App() { let [htmlString, setHtmlString = useState("<h1>hello world</h1>"); return ( <div dangerouslySetInnerHTML={{ __html: htmlString }}></div> ); } export default App; ``` 在这个示例中，我们使用useState来定义一个名为htmlString的状态变量，并将初始值设置为"<h1>hello world</h1>"。然后，在组件的返回部分，我们使用dangerouslySetInnerHTML属性来渲染这个htmlString变量的内容。 需要注意的是，在使用dangerouslySetInnerHTML属性时，需要将HTML字符串包装在一个对象中，并将该对象传递给dangerouslySetInnerHTML属性的__html属性。这是为了强调这是一个有意为之的危险操作，需要小心使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [在React中实现Vue中的v-html效果](https://blog.csdn.net/weixin_53452096/article/details/119042629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [原生java影视app源码 对接苹果cms](https://download.csdn.net/download/weixin_36643308/88250409)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值