仿制 http://schillmania.com/projects/soundmanager2/#volume 右上角面板

<style type="text/css">

body{background:#999;}

.board-container{position:relative;width:240px;height:500px;font-family:"微软雅黑";}/*总容器*/

.board-bg{position:absolute;width:100%;height:26px;background:#333333;z-index:1;}/*背景*/

.triangle{position:absolute;width:0;height:0;border:8px solid #111;}/*三角*/

.triangle-left{top:26px;left:0;border-left-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0);}/*左三角*/

.triangle-right{top:26px;right:0;border-right-color:rgba(0,0,0,0);border-bottom-color:rgba(0,0,0,0);}/*右三角*/

.board-title{position:relative;color:#fff;height:26px;line-height:26px;text-align:center;overflow:hidden;z-index:2;}/*标题文字*/

.board-body1{margin:0 16px;padding:6px;background:#fff;z-index:2;}/*内容文字*/

.board-body2{margin:0 16px;padding:6px;background:#fff;border-top:1px dotted #ddd;color:#999;z-index:2;}/*灰色内容文字*/

</style>

</head>

<body>

<div class="board-container">

    <div class="board-bg"></div>

    <div class="triangle triangle-left"></div>

    <div class="triangle triangle-right"></div>

    <div class="board-title">啊啊啊啊啊啊啊啊啊啊

    </div>

    <div class="board-body1">啊啊啊啊啊啊啊啊啊啊啊啊啊

    </div>

    <div class="board-body2">啊啊啊啊啊啊啊啊啊啊啊啊啊

    </div>

</div>

html： 仿制soundmanager2右上角面板的更多相关文章

  1. Centos 右上角面板里没有wired network图标的问题

    开了很多的网页查看解决这个问题,都不是很有效,最后很简单的改了下一个文件就ok了,自己记录下,以免忘记! 打入命令:sudo gedit /etc/NetworkManager/nm-system-s ...

  2. !!常用HTML代码

    META: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> “IE=e ...

  3. Ubuntu10.10的网络配置

    有一阵子着实对Ubuntu的网络配置很迷惑,耐下心来仔细上网找了找,有点小心得,总结一下. 先说下大概的配置过程,再去细究一些情况. 一.配置大概分三类:通过配置文件配置.通过命令配置.通过图形化的网 ...

  4. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

  5. Ubuntu之网络配置

    一.配置大概分三类:通过配置文件配置.通过命令配置.通过图形化的网络连接菜单配置. 拨号无线等的没条件实验,不涉及. 主要文件:/etc/network/interfaces,这里是IP.网关.掩码等 ...

  6. ubuntu安装配置搜狗拼音输入法

    进入下载目录,在终端执行安装 $sudo dpkg  -i   sogou_pinyin_linux_1.0.0.0033_amd64.deb 安装过程会出现 依赖关系问题 2 修复依赖关系完成搜狗拼 ...

  7. 英文版Ubuntu安装配置搜狗拼音输入法

    下载搜狗输入法 1 进入搜狗输入法官网,进入上面导航兰的 "输入法Linux版"   2 根据你安装的ubuntu是32位还是64位下载 END ubuntu安装搜狗输入法 1 进 ...

  8. 初识html与css

    ---恢复内容开始--- PS应用量尺寸w.h- 操作方式: 窗口,信息,右上角面板选项,标尺单位,像素切图- 操作方式: 切片工具, 文件 ,另存为web所有格式,jpeg,存储,切片:选中的切片, ...

  9. ubuntu系统安装好后一些基本软件的安装

    preface: 由于某些原因重装了系统,原来在ubuntu下安装的一些软件又要又一次安装.稍微麻烦,整理下须要安装的步骤. #==================================== ...

随机推荐

  1. NVMe概述

    目前企业SSD市场按照接口协议主要分为SATA SSD,PCIe SSD和NVMe SSD,其中SATA SSD沿用了传统的HDD使用的SATA协议,在企业应用和服务器兼容性上具有优势:而PCIe S ...

  2. 过滤器(filter)，监听器(listener)，与servlet的执行顺序

    创建: 加载顺序 监听器-->过滤器-->Servlet.项目启动后,容器会首先创建声明的各种监听器,为后继的各个事件监听做准备,然后创建过滤器,最后是Servlet.销毁的时候是反序进行 ...

  3. linux 安装【jdk、tomcat】查看对外开放端口（防火墙拦截处理）

    1.安装 jdkhttps://www.cnblogs.com/xu-dong/p/6422938.html 查看Linux下查看JDK安装路径: https://www.cnblogs.com/im ...

  4. GPU知识了解

    前言 今天在使用阿里云的时候,无意间看到了有GPU服务器,于是对它做了一个大概的了解. 概念 GPU是Graphics Processing Unit的缩写,翻译成中文就是图形处理器.是一种专门在个人 ...

  5. groupadd语法

    groupadd [选项] 组 创建一个新的组.Groupadd命令使用命令行中指定的值加上系统默认值创建新的组账户.新组将根据需要输入系统. (1).选项 1 2 3 4 5 6 7 -f,--fo ...

  6. L2-008. 最长对称子串（思维题）*

    L2-008. 最长对称子串 参考博客 #include <iostream> using namespace std; int main() { string s; getline(ci ...

  7. Reactor

    Flux和Mono Flux和Mono是Reactor中的两个基本概念.Flux表示的是包含0到N个元素的异步序列.在该序列中可以包含三种不同类型的消息通知:正常的包含元素的消息,序列结束的消息和序列 ...

  8. 【转载】 TensorflowOnSpark：1)Standalone集群初体验

    原文地址: https://blog.csdn.net/jiangpeng59/article/details/72867368 作者:PJ-Javis 来源:CSDN --------------- ...

  9. matlab学习(4) any 和cellfun用法

    1.对于向量来说,只要包含非0元素,则返回为1: 2.对于矩阵来说,any(X)依次判断X的每一列是否为ture,返回一个含0或1的向量. 3.any(X,DIM)对X的第DIM维操作, DIM=1即 ...

  10. Codeforces1099F. Cookies【DP】【线段树】【贪心】【博弈】【沙比提（这是啥算法）】

    LINK 题目大意 给你一棵树,每个节点上有一堆饼干 并且告诉你在每个节点上吃饼干吃一块需要多少时间 然后告诉你经过一条边的时间 总时间是T 两个人轮流进行,一个人向下选择子节点行走或者结束游戏并向上 ...