amazeui学习笔记--css(基本样式3)--打印样式Print

一、总结

1、打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的标题、链接显示在后面。 <a href="http://www.amazeui.org">Amaze UI</a>

2、am-print-hide类: 浏览器可见,打印机隐藏。

二、打印样式Print

打印样式组件,打印时将 color 设置成黑色,删除 background 、text-shadow 、box-shadow 样式,以节省打印机耗材,加快打印速度。

显示 URL 链接

利用 CSS3 content 属性,将 <a> 和 <abbr> 的标题、链接显示在后面

 Copy
Amaze UI
Amaze UI
<!-- 点击浏览器菜单里的【打印】,预览打印样式 -->
<a href="http://www.amazeui.org">Amaze UI</a>
<abbr title="http://www.amazeui.org">Amaze UI</abbr>

辅助 Class

  • am-print-hide 浏览器可见,打印机隐藏。
  • am-print-blockam-print-inline-blockam-print-inline 打印机可见,浏览器隐藏。在打印机中分别对应为block,inline-block,inline样式。
 Copy
浏览器可见,打印机不可见
<!-- 在打印预览中查看效果 -->
<div class="am-print-hide"><button type="button" class="am-btn am-btn-primary am-btn-block">浏览器可见,打印机不可见</button></div> <div class="am-print-block"><button type="button" class="am-btn am-btn-primary am-btn-block">打印机可见,浏览器不可见</button></div>

参考链接

amazeui学习笔记--css(基本样式4)--打印样式Print的更多相关文章

  1. amazeui学习笔记--css(基本样式3)--文字排版Typography

    amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...

  2. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  3. amazeui学习笔记--css(基本样式)--样式统一Normalize

    amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...

  4. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  5. amazeui学习笔记--css(常用组件16)--文章页Article

    amazeui学习笔记--css(常用组件16)--文章页Article 一.总结 1.基本使用:文章内容页的排版样式,包括标题.文章元信息.分隔线等样式. .am-article 文章内容容器 .a ...

  6. amazeui学习笔记--css(常用组件14)--缩略图Thumbnail

    amazeui学习笔记--css(常用组件14)--缩略图Thumbnail 一.总结 1.基本样式:在 <img> 添加 .am-thumbnail 类:也可以在 <img> ...

  7. amazeui学习笔记--css(常用组件13)--进度条Progress

    amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...

  8. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  9. amazeui学习笔记--css(常用组件11)--分页Pagination

    amazeui学习笔记--css(常用组件11)--分页Pagination 一.总结 1.分页使用:还是ul包li的形式: 分页组件,<ul> / <ol> 添加 .am-p ...

随机推荐

  1. oracle基础入门(一)

    一:Oracle的安装     我所知的Oracle的数据库有 10g,11g, 12g, 我们常用的是10g ,因为10g有scott的用户,而11和12现在还没有(哪位大神看到有问题可以指出哦), ...

  2. WEB开发中一些常见的攻击方式及简单的防御方法

    WEB开发中一些常见的攻击方式及简单的防御方法 转载:http://blog.csdn.net/seven__________7/article/details/70896913

  3. 洛谷 P1591 阶乘数码

    P1591 阶乘数码 题目描述 求n!中某个数码出现的次数. 输入输出格式 输入格式: 第一行为t(≤10),表示数据组数.接下来t行,每行一个正整数n(≤1000)和数码a. 输出格式: 对于每组数 ...

  4. 安装个wampserver 环境 执行php

    php代码执行要有相关环境. 在这里推荐一个环境工具.wampserver :内置了下面工具: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5 ...

  5. 转:向IOS设备发送推送通知

    背景 SMS 和 MMS 消息是由无线运营商通过设备的电话号码向特定设备提供的.实现 SMS/MMS 的服务器端应用程序的开发人员必须费大量精力才能与现有的封闭电信基础架构进行交互(其中包括获取电话号 ...

  6. Thinkphp5图片上传正常,音频和视频上传失败的原因及解决

    Thinkphp5图片上传正常,音频和视频上传失败的原因及解决 一.总结 一句话总结:php中默认限制了上传文件的大小为2M,查找错误的时候百度,且根据错误提示来查找错误. 我的实际问题是: 我的表单 ...

  7. kafka自带没web ui界面,怎么办?安装个第三方的

    见 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)(默认端口或任意自定义端口)  

  8. 用SSL保Samba安全

    用SSL保Samba安全          在企业中用Samba做为文件服务器是非常容易的事了,那如何保证存储数据的安全,如何保证数据传输的安全呢?我以前介绍过通过Samba安全级别和加装防病毒软件在 ...

  9. Exercise : Self-Taught Learning

    First, you will train your sparse autoencoder on an "unlabeled" training dataset of handwr ...

  10. 使用Java语言开发微信公众平台(六)——获取access_token

             在前四期的文章中,我们分别学习了“环境搭建与开发接入”.“文本消息的接收与响应”.“被关注回复与关键词回复”.“图文消息的发送与响应”等环节.那么,从本篇博文开始,我们将进去更高级的 ...