css3 - target
2024-05-31 18:19:22
通过CSS3伪元素target，我们可以实现拉风琴
源码
1 <!DOCTYPE HTML>
2 <html lang="en-US">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>垂直手风琴</title>
7 <style type="text/css">
8 .accordionMenu {
9 background: #fff;
10 color: #424242;
11 font: 12px Arial, Verdana, sans-serif;
12 margin: 0 auto;
13 padding: 10px;
14 width: 500px;
15 }
16
17 .accordionMenu h2 {
18 margin: 5px 0;
19 padding: 0;
20 position: relative;
21 }
22
23 .accordionMenu h2:before {
24 border: 5px solid #fff;
25 border-color: #fff transparent transparent;
26 content: "";
27 height: 0;
28 position: absolute;
29 right: 10px;
30 top: 15px;
31 width: 0;
32 }
33
34 .accordionMenu h2 a {
35 background: #8f8f8f;
36 background: -moz-linear-gradient( top, #cecece, #8f8f8f);
37 background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
38 background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
39 background: -o-linear-gradient( top, #cecece, #8f8f8f);
40 background: linear-gradient( top, #cecece, #8f8f8f);
41 border-radius: 5px;
42 color: #424242;
43 display: block;
44 font-size: 13px;
45 font-weight: normal;
46 margin: 0;
47 padding: 10px 10px;
48 text-shadow: 2px 2px 2px #aeaeae;
49 text-decoration: none;
50 }
51
52 .accordionMenu :target h2 a,
53 .accordionMenu h2 a:focus,
54 .accordionMenu h2 a:hover,
55 .accordionMenu h2 a:active {
56 background: #2288dd;
57 background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
58 background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
59 background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
60 background: -o-linear-gradient( top, #6bb2ff, #2288dd);
61 background: linear-gradient( top, #6bb2ff, #2288dd);
62 color: #FFF;
63 }
64
65 .accordionMenu p {
66 margin: 0;
67 height: 0;
68 overflow: hidden;
69 padding: 0 10px;
70 -moz-transition: height 0.5s ease-in;
71 -webkit-transition: height 0.5s ease-in;
72 -o-transition: height 0.5s ease-in;
73 transition: height 0.5s ease-in;
74 }
75
76 .accordionMenu :target p {
77 height: 100px;
78 overflow: auto;
79 }
80
81 .accordionMenu :target h2:before {
82 border-color: transparent transparent transparent #fff;
83 }
84 </style>
85 </head>
86
87 <body>
88 <div class="accordionMenu">
89 <div class="menuSection" id="brand">
90 <h2><a href="#brand">Brand</a></h2>
91 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
92 irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur
93 adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
94 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
95 </div>
96 <div class="menuSection" id="promotion">
97 <h2><a href="#promotion">Promotion</a></h2>
98 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
99 irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
100 </div>
101 <div class="menuSection" id="event">
102 <h2><a href="#event">Event</a></h2>
103 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
104 irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
105 </div>
106 </div>
107 </body>
108
109 </html>View Code
转载于:https://www.cnblogs.com/cisum/p/8849285.html
css3 - target相关推荐
- 记录CSS3 target伪类简介
CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个"#"字符,然后后面带有一 ...
- css3制作手风琴,CSS3制作手风琴——CSS3 :target的应用
前一回我在<CSS3制作垂直手风琴>介绍了使用":hover"来制作手风琴效果.今天,你将学习使用CSS3的另一个属性--:target来制作一个非常简单的动画手风琴的 ...
- html5+css3基础教程收集
HTML5标签使用的常见误区 http://www.xinran001.com/bbs/thread-73344-1-1.html 如何在 IE 中使用 HTML5 元素 http://www.xin ...
- “约见”面试官系列之常见面试题第三十七篇之CSS3新属性（建议收藏）
目录 CSS3 结构(位置)伪类选择器(CSS3) 目标伪类选择器(CSS3) 属性选择器(CSS3) 伪元素选择器(CSS3,重要) CSS3盒模型(重要) 颜色模式 盒子阴影(CSS3) 文本阴影 ...
- php伪类,CSS3新增伪类
p:last-of-type 选择其父元素的最后的一个P元素 p:last-child 选择其父元素的最后子元素(一定是P才行) p:first-of-type ...
- html下拉菜单制作方法,CSS3制作Dropdown下拉菜单的方法
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id="comment"的位置,俗 ...
- 02前端学习之CSS3(1)
文章目录 一.CSS介绍: 1. CSS的发展历程: 2. CSS初识: 3. CSS样式规则: 4. CSS注释: 二.font字体: 1. font-size: 字号大小: 2. font-fam ...
- 【CSS3 基础】全面入门学习
内容持续补充~~~ 文章目录 字体样式属性 font-size:字号大小 font-family:字体 CSS Unicode字体 font-weight:字体粗细 font-style:字体风格 f ...
- css target怎么用
css target是指":target"选择器,可用于选取当前活动的目标元素,其使用语法如"#tab:target {color:blue}",该语句表示改变 ...
最新文章
- java中数据库连接池_Java中的数据库连接池
- python正则re
- 安科 OJ 1190 连接电脑 （并查集）
- 深入理解.net服务器控件
- 08.suggester02term_suggester
- 英语复习二：每单元的翻译篇章
- 对无线编码缓存的一些理解
- Single-Shot Calibration：基于全景基础设施的多相机和多激光雷达之间的外参标定（ICRA2021）...
- python画地图学校_python使用pyecharts库画地图数据可视化的实现
- CSDN博客排名不更新，谈谈重构的做法
- mysql 只显示箭头_为什么在DOS窗口中使用MySQL时，输入命令后只出现一个箭头，输入什么内容都是这样？...
- snmp trap配置
- 程序员最爱字体_网页设计师最爱的十大字体
- MyBatis配置文件
- 湖北大学计算机学院王时绘,5G来了，有湖大人的智慧！
- 字体侵权太严重，我准备了700款可商用字体
- nbuoj.1333.明信片与照片
- macz中提示：adb:commen not found
- 涂鸦三明治开发套件开箱及固件下载
- 数数字（UVa1225）