文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS打印时怎么更改屏幕设计和样式

2024-04-02 19:55

关注

今天小编给大家分享一下CSS打印时怎么更改屏幕设计和样式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

  index.html

  <!DOCTYPEhtml>

  <html>

  <head>

  <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

  <title></title>

  <metacharset="utf-8"/>

  <linkrel="stylesheet"href="style.css"type="text/css"media="screen"/>

  <linkrel="stylesheet"href="print.css"type="text/css"media="print"/>

  </head>

  <body>

  <divclass="MenuFrame">

  菜单1<br/>

  菜单2<br/>

  菜单3<br/>

  菜单4<br/>

  菜单5<br/>

  菜单6<br/>

  </div>

  <divclass="ContentsFrame">

  <h3>题记</h3>

  <p>内容</p>

  <p>

  竹外桃花,纷纷飘落。卿舞霓裳,君弹曲。高山流水,绕指尖幽幽荡漾。执一叶扁舟,在岁月的河流上,演绎一场不离散的笙歌,可好&hellip;&hellip;&mdash;&mdash;题记

  犹记曾经,君袭一屡白衣,从陌上花开的小径款款而来,桃花灼灼,惊起了我的一帘幽梦。从此,诗词歌赋,烟雨桃花,都失去了色彩,只有君的身影,丝丝抨击着心海。

  </p>

  <h3>第一段</h3>

  <p>内容</p>

  <p>

  不再叹天若有情,不再盼三寸天堂。只因这素洁的红尘有了你的陪伴,相思惹起了无边的牵盼。情到深处无怨尤,不想,与君共享人世繁华,只愿,流年今夕,共看云卷云舒,花开花落。

  初相见,惊素心。你来时,陌上花开,纷繁的花瓣,灿烂了我的眼眸。纵使,东风恶,人情薄,烟花不堪剪。</p>

  <h3>第二段</h3>

  <p>内容</p>

  <p>

  仍愿为你,尝尽这无边的相思之苦。也许,我就是你千百年前放走的白狐,今生,只为你醉,只为你舞。君可知,那天空飘落的雪花呀,就是我对你深深的思念。那日,你说。凡尘寂寥,不能遗忘远方的梦想。山一程,水一程,你离开了这个令我百转千回的相思地。

  一年一度秋风近,风儿翩翩吹起来。此时,桥边的芍药,正生的红艳,梨花艳艳地开着。熟悉的地方,陌生的氛围,却没有了你的踪影。日日思君不见君,即使花艳又如何。</p>

  </div>

  <divclass="ClearLeft"></div>

  </body>

  </html>

  screen.css

  .MenuFrame{

  width:200px;

  float:left;

  background-color:#fff8aa;

  color:#ff6a00;}

  .ContentsFrame{

  float:left;

  width:600px;

  background-color:#ededed;

  color:#535353;

  }

  .ClearLeft{

  clear:left;

  }

  print.css

  .MenuFrame{

  display:none;

  }

  .ContentsFrame{

  width:100%;

  }

  .ClearLeft{

  clear:left;

  }

  说明:

  在Web浏览器中正常显示的情况下,应用style.css的样式表。打印时,应用带有media=“print”的print.css。在print.css中,左侧的MenuFrame被隐藏,它变为1级显示。此外,ContentsFrame的宽度假定为100%,并且将根据纸张的宽度进行布局。此外,通过使角色的颜色不明确,我们将其设置为黑色字母的白色背景。

以上就是“CSS打印时怎么更改屏幕设计和样式”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯