CSS3 页面中展示邮箱列表点击弹出发送邮件界面

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS教程</title>

<style>

ul {

    list-style-type: none;

}

ul li a {

    color: green;

    text-decoration: none;

    padding: 3px;

    display: block;

}

@media screen and (max-width: 699px) and (min-width: 520px) {

    ul li a {

        padding-left: 30px;

        background: url(email-icon.png) left center no-repeat;

    }

}

</style>

</head>

<body>

<h1>重置浏览器窗口，查看效果!</h1>

<ul>

  <li><a data-email="johndoe@example.com" href="mailto:johndoe@example.com">John Doe</a></li>

  <li><a data-email="marymoe@example.com" href="mailto:marymoe@example.com">Mary Moe</a></li>

  <li><a data-email="amandapanda@example.com" href="mailto:amandapanda@example.com">Amanda Panda</a></li>

</ul>

</body>

</html>

效果：

CSS3 页面中展示邮箱列表点击弹出发送邮件界面的更多相关文章

  1. 【2017-05-21】WebForm跨页面传值取值、C#服务端跳转页面、 Button的OnClientClick属性、Js中getAttribute和超链接点击弹出警示框。

    一.跨页面传值和取值: 1.QueryString - url传值,地址传值 优缺点:不占用服务器内存:保密性差,传递长度有限. 通过跳转页面路径进行传值,方式: href="地址?key= ...

  2. extjs.net list 点击弹出修改页面及初始化

    <SaveMask ShowMask="true" /> <LoadMask ShowMask="true" /> <Listen ...

  3. 从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中

    1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...

  4. Popup中ListBox的SelectChange事件关闭弹出窗体后主窗体点击无效BUG

    WPF的BUG!弹出框的 自定义控件里有Popup, Popup里面放一个ListBox 在ListBox中的SelectionChange事件触发关闭弹出框后,主窗体存在一定概率卡死(但点击标题又能 ...

  5. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  6. 经验总结：WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...

  7. jQuery第二课 点击弹出一个提示框

    选择器允许您对元素组或单个元素进行操作. jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元 ...

  8. Javascript实现图片点击弹出

    一直想给安装一个缩略图点击弹出的插件,但是找了找几乎都是用的php来做的,插件的使用和安装极其繁琐,于是上网查了些demo,自己实现了一个纯js的图片弹出插件. 实现的思路是通过编写hook图片的on ...

  9. 在Winform框架的多文档界面中实现双击子窗口单独弹出或拖出及拽回的处理

    在基于DevExpress的多文档窗口界面中,我们一般使用XtraTabbedMdiManager来管理多文档窗口的一些特性,如顶部菜单,页面的关闭按钮处理,以及一些特殊的设置,本篇随笔介绍这些特点, ...

随机推荐

  1. JS-JavaScript类库整理 [更新中...]

    老大.jQuery插件库 ——收集最全最新最好的jQuery插件 http://www.jq22.com/ 一.Moment.js ——JavaScript 日期处理类库 http://momentj ...

  2. 使用openssl生成RSA公钥和私钥对

    在ubuntu上要使用openssl的话需要先进行安装,命令如下: sudo apt-get install openssl 安装完成就可以使用openssl了. 首先需要进入openssl的交互界面 ...

  3. mysql 效率 inner join 与 where in

    -- report 123.77k行 report_loss 620 行 -- inner join ;report_loss 索引 all report 索引 eq_ref ; -- total 0 ...

  4. linux下安装F-prot杀毒软件

    一. f-prot的安装 1.首先我们要创建一个带有超级权限的用户 sudo passwa root 2.su 切换用户 3.下载F-prot http://www.f-prot.com/downlo ...

  5. java的bean和map互转的工具类

    import java.beans.BeanInfo;import java.beans.IntrospectionException;import java.beans.Introspector;i ...

  6. 小程序开通微信支付 --- 微信商户平台绑定微信小程序APPID

    首先情况是这样的:现有公司有个公众号,已经开通了微信支付(已经有一个商户平台),现在需要开发 微信小程序(也有微信支付),如果在小程序里面重新申请 微信支付,就显得比较麻烦.腾讯官方已经提供了 一个商 ...

  7. Eclipse中将Java项目转换成Web项目的方法(转)

    前言: 用Eclipse开发项目的时候,把一个Web项目导入到Eclipse里会变成了一个java工程,将无法在Tomcat中进行部署运行. 方法: 1.找到.project文件,找到里面的<n ...

  8. vue-cli 项目打包异常汇总

    1.打包路径错误 npm run build 之后,会发现项目目录下多了 通过 localhost 运行 index.html 会发现空白,仔细一看,是因为引用的资源位置问题 明显这个地方应该是 ./ ...

  9. MySQL监控、性能分析——工具篇（转载）

    MySQL越来越被更多企业接受,随着企业发展,MySQL存储数据日益膨胀,MySQL的性能分析.监控预警.容量扩展议题越来越多.“工欲善其事,必先利其器”,那么我们如何在进行MySQL性能分析.监控预 ...

  10. 常用meta标签及说明

    1.charset   定义文档的字符编码 例如: <meta charset="UTF-8"> 2. name  把 content 属性关联到一个名称,其属性有   ...