CSS制作垂直口风琴2
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3用target属性制作垂直口风琴</title><!--下一个展开时，上一个时关闭状态-->
<style>
.accordionMenu {
font: 12px Arial, Verdana, sans-serif;
color:#424242;
background: #fff;
padding: 10px;
width: 500px;
margin:0 auto;
}
.accordionMenu h2 {
margin:5px 0;
padding:0;
position: relative;
}
.accordionMenu h2:before {
content:"";
border: 5px solid #fff;
border-color: #fff transparent transparent;
width: 0;
height: 0;
position:absolute;
right: 10px;
top: 15px;
}
.accordionMenu h2 a {
font-size: 13px;
display: block;
font-weight: normal;
color:#424242;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration:none;
margin:0;
padding:10px 10px;
background: #8f8f8f;
background: -moz-linear-gradient( top, #cecece, #8f8f8f);
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
background: -o-linear-gradient( top, #cecece, #8f8f8f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
background: #2288dd;
background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
background: -o-linear-gradient( top, #6bb2ff, #2288dd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
color:#FFF;
}
.accordionMenu p {
padding:0 10px;
margin:0;
height: 0;
overflow: hidden;
-moz-transition: height 0.5s ease-in;
-webkit-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
.accordionMenu :target p {
overflow: auto;
height:100px;
}
.accordionMenu :target h2:before {
border-color: transparent transparent transparent #fff;
} /*上面是实现手风琴效果的所有样式代码，其中最为关键的是：*/
/*1、实现动态效果*/
.accordionMenu p {
padding:0 10px;
margin:0;
height: 0;
overflow: hidden;
-moz-transition: height 0.5s ease-in;
-webkit-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
/*在每块面板内容上使用了CSS3的transition来实现改变面板展开时高度的平滑过渡。*/
/*2、制作面板标题*/
.accordionMenu h2 a {
font-size: 13px;
display: block;
font-weight: normal;
color:#424242;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration:none;
margin:0;
padding:10px 10px;
background: #8f8f8f;
background: -moz-linear-gradient( top, #cecece, #8f8f8f);
background: -webkit-gradient(linear, left top, left bottom, from(#cecece), to(#8f8f8f));
background: -webkit-linear-gradient( top, #cecece, #8f8f8f);
background: -o-linear-gradient( top, #cecece, #8f8f8f);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#ff8f8f8f);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffcecece, endColorstr=#f8f8f8f)";
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
background: #2288dd;
background: -moz-linear-gradient( top, #6bb2ff, #2288dd);
background: -webkit-gradient(linear, left top, left bottom, from(#6bb2ff), to(#2288dd));
background: -webkit-linear-gradient( top, #6bb2ff, #2288dd);
background: -o-linear-gradient( top, #6bb2ff, #2288dd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6bb2ff, endColorstr=#ff2288dd)";
color:#FFF;
}
/*此处我们主要使用了CSS的Gradient、border-radius、text-shadow等属性制作了面板标题的默认状态和当前状态的样式风格。*/
/*3、制作三角效果*/
.accordionMenu h2:before {
content:"";
border: 5px solid #fff;
border-color: #fff transparent transparent;
width: 0;
height: 0;
position:absolute;
right: 10px;
top: 15px;
}
.accordionMenu :target h2:before {
border-color: transparent transparent transparent #fff;
}
/*上面样式主要使用了CSS3的伪类“:bofore”配合“border”制作三角形*/
/*4、展开样式 这一步是最为关键的一步，CSS3的伪类“:target”实现点击面板标题时，改变面板主内容“p”的高度。*/
.accordionMenu :target p {
overflow: auto;
height:100px;
}
</style>
</head>
<body>
<div class="accordionMenu">
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
<div class="menuSection" id="promotion">
<h2><a href="#promotion">Promotion</a></h2>
<p>content for promotion</p>
</div>
<div class="menuSection" id="event">
<h2><a href="#event">Event</a></h2>
<p>content for Event</p>
</div>
</div>
</body>
</html>
效果图：
target的应用 CSS3属性:target来制作一个非常简单的动画口风琴的效果。 CSS3 target伪类的简介 CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说，URI中的标志符通常会包含一个”#”字符，然后后面带有一个标志符名称，比如“#brand”，target就是用来匹配ID为“brand”的元素的。 现在在页面中，点击一个ID链接后，页面只会跳转到相应的位置，但是并不会有比较明显的UI标识，使用:target伪类可以像:hover等伪类一样对目标元素定义样式。 因为我们讨论的是有关于CSS3的属性，它支持所有现代浏览器，但在IE6-8下无法运行。 “div.accordionMenu”包装了手风琴所有块； “div.menuSection”包含手风琴每块的标题和主内容 把口风琴每块的标题定义为“h2” 口风琴每块主内容放在了一个“p”中，并与“h2”相邻，当然大家也可以把主内容放置在一个“div”中，容易管理 此处最关键的一点是正如前面介绍“target”，我们使用“target”来达到点击展开动画效果，我们每一块需要ID来配合使用，因此我们在手风琴中的每一块中定义了一个ID号，并且在标题中的“<a>”链接的“href”属性链接了相对应块的ID号。
CSS制作垂直口风琴2的更多相关文章
- CSS3制作的垂直口风琴1
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 垂直口风琴菜单3（jquery）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...
- 如何使用纯CSS制作特效导航条？
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- 个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
随机推荐
- [POI2017] Flappy Bird
问题描述 <飞扬的小鸟>是一款风靡的小游戏.在游戏中,小鸟一开始位于(0,0)处,它的目标是飞到横坐标为X的某个位置上.每一秒,你可以选择点击屏幕,那么小鸟会从(x,y)飞到(x+1,y+ ...
- apache Internal Server Error 解决方法
https://blog.csdn.net/qq_33684377/article/details/78536548 https://blog.csdn.net/LJFPHP/article/deta ...
- [BZOJ2225][SPOJ2371]LIS2 - Another Longest Increasing Subsequence Problem：CDQ分治+树状数组+DP
分析 这回试了一下三级标题,不知道效果怎么样? 回到正题,二维最长上升子序列......嗯,我会树套树. 考虑\(CDQ\)分治,算法流程: 先递归进入左子区间. 将左,右子区间按\(x\)排序. 归 ...
- 170911-关于maven的知识点
简介: 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的. Maven的好处? 节省空间 就是对jar包的统一管理就是对jar包的统一管理,依赖 ...
- 将MSQL中的数据导出至EXCEL
mysql> show variables like '%secure%';+------------------+---------------------+| Variable_name | ...
- Oracle Flashback Database
Oracle Flashback Database Ensure that the prerequisites described in Prerequisites of Flashback Data ...
- codeforces 704B - Ant Man [想法题]
题目链接:http://codeforces.com/problemset/problem/704/B ------------------------------------------------ ...
- 【洛谷P1383 高级打字机】
题目描述 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序,支持如下3种操作: 1.T x:在文章末尾打下一个小写字母x.(t ...
- COUNT(*) vs COUNT(col)
w https://www.percona.com/blog/2007/04/10/count-vs-countcol/
- (转)SQLite部署-无法加载 DLL“SQLite.Interop.dll”: 找不到指定的模块
本文转载自:http://www.cnblogs.com/muzhiye/p/4284070.html 近期刚使用SQLite,主要引用的是System.Data.SQLite.dll这个dll,在部 ...