编程教程示范演示-小库网

小库网 
<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), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

@media screen and (max-width: 1000px) and (min-width: 700px) {
    ul li a:before {
        content: "Email: ";
        font-style: italic;
        color: #666666;
    }
}

@media screen and (min-width: 1001px) {
    ul li a:after {
        content: " (" attr(data-email) ")";
        font-size: 12px;
        font-style: italic;
        color: #666666;
    }
}
</style>

<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>

xxxxxxxxxx
 
小库网 
<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), (min-width: 1151px) {
    ul li a {
        padding-left: 30px;
        background: url(email-icon.png) left center no-repeat;
    }
}

励志语录	成语大全	史记
成语故事	图片圆角裁剪工具	颜色值在线转换
AutoCAD软件	知乎副业	拼多多副业
1688副业	闲鱼副业	卡通音效
枪声音效	经典史说书籍	文明礼仪书籍
男生头像阳光	女生头像	计数统计源码
微信公众号源码	资料	基础
课本点读	中文转换成盲文	绘本儿歌
商朝历史	夏朝历史	三国志
旧唐书	安卓软件	浏览器插件
美容茶	袪风湿强筋骨茶	学习jQueryUI
学习Node.js	学习Chart.js	学习Docker
学习JSP	学习AppML	学习PostgreSQL