amazeui学习笔记--css（基本样式3）--打印样式Print

一、总结

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

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

二、打印样式Print

显示 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-block、am-print-inline-block、am-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>

参考链接

html5-boilerplate main.css

转载于:https://www.cnblogs.com/Renyi-Fan/p/9006083.html

amazeui学习笔记--css（基本样式4）--打印样式Print相关推荐

amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
amazeui学习笔记--css（常用组件4）--关闭按钮Close
amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...
amazeui学习笔记--css（HTML元素2）--代码Code
amazeui学习笔记--css(HTML元素2)--代码Code 一.总结 1.行内代码:code标签<code> 2.代码片段:pre标签<pre> 3.限制代码块高度:添 ...
amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
amazeui学习笔记--css（布局相关3）--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
amazeui学习笔记--css（常用组件1）--小徽章Badge
amazeui学习笔记--css(常用组件1)--小徽章Badge 一.总结 1.am-badge:添加am-badge来声明小徽章对象 <span class="am-badge a ...
amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

amazeui学习笔记--css（基本样式4）--打印样式Print