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制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
随机推荐
- Ubuntu 压缩文件命令
tar -czvf name-of-archive.tar.gz /path/to/directory-or-file -c: Create an archive. -z: Compress the ...
- React Native 之react-native-sqlite-storage
npm 官网指导: https://www.npmjs.com/package/react-native-sqlite-storage 1. 执行: npm install react-native- ...
- PHP上传一个文件夹
该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...
- 在CentOS7中配置网络时常见的LSB加载失败问题
前几天,为了给OpenNebula扩展新的主机节点,对CentOS7的网络进行了配置.本以为网络配置只需要简单修改ifcfg-eth0即可,但是在重启网络服务时却遇到了一个LSB加载失败的问题(Fai ...
- Web开发者易犯的五大严重错误
无论你是编程高手,还是技术爱好者,在进行Web开发过程中,总避免不了犯各种各样的错误. 犯了错误,可以改正.但如果犯了某些错误,则会带来重大损失.遗憾.令人惊讶的是,这些错误往往是最普通,最容易避免. ...
- 学习wavenet_vocoder之环境配置
WaveNet vocoder位于github的位置,https://github.com/r9y9/wavenet_vocoder 一.配置时的环境 操作系统:win10 python环境工具:An ...
- rf-idf的java实现
还存在的问题是,对于其中分词借助的库还存在问题 参考此篇链接 http://www.cnblogs.com/ywl925/archive/2013/08/26/3275878.html 具体代码部分: ...
- Python List 列表list()方法
Python基础数据类型之一列表list,在python中作用很强在,列表List可以包含不同类型的数据对像,同时它是一个有序的变量集合,每个变量可以存储一个地址.所有序列能用到的标准操作方法,列表也 ...
- Java数据结构与算法(2):栈
栈是一种线性表,特点在于它只能在一个位置上进行插入和删除,该位置是表的末端,叫做栈的顶(top).因此栈是后进先出的(FIFO).栈的基本操作有push.peek.pop. 栈的示意图 进栈和出栈都只 ...
- CentOS6.5/7安装配置Samba
CentOS6.5安装配置Samba 本文的场景是虚拟机运行CentOS6.,本机是Win7,现欲把CentOS上的一个文件夹共享出来,Win的机器可以读写. Samba与window连接需要使用Ne ...