Maison > Article > interface Web > CSS pour modifier la conception et le style de l'écran lors de l'impression (exemple de code)

CSS pour modifier la conception et le style de l'écran lors de l'impression (exemple de code)

不言original: 2018-11-12 10:48:212073parcourir

Dans cet article, nous présenterons le code permettant d'utiliser CSS pour modifier la conception et le style de l'écran pendant le processus d'impression. Pour modifier le style pendant l'impression, vous pouvez spécifier l'attribut media dans la balise de lien du lien de la feuille de style dans le fichier. ou dans le fichier CSS. Utilisez les requêtes multimédias dans .

Lors de la spécification des attributs multimédias à l'aide de balises de lien

Code

Il s'agit du code permettant de spécifier les attributs multimédias à l'aide de balises de lien.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="print.css" type="text/css" media="print" /> 
  </head>
  <body>
   <div class="MenuFrame">
    菜单1<br />
    菜单2<br />
    菜单3<br />
    菜单4<br />
    菜单5<br />
    菜单6<br />
  </div>
  <div class="ContentsFrame">
    <h2>题记</h2>
    <p>内容</p>
    <p>
     竹外桃花，纷纷飘落。卿舞霓裳，君弹曲。高山流水，绕指尖幽幽荡漾。执一叶扁舟，在岁月的河流上，演绎一场不离散的笙歌，可好……——题记
     犹记曾经，君袭一屡白衣，从陌上花开的小径款款而来，桃花灼灼，惊起了我的一帘幽梦。从此，诗词歌赋，烟雨桃花，都失去了色彩，只有君的身影，丝丝抨击着心海。
     </p>
    <h2>第一段</h2>
    <p>内容</p>
    <p>
    不再叹天若有情，不再盼三寸天堂。只因这素洁的红尘有了你的陪伴，相思惹起了无边的牵盼。情到深处无怨尤，不想，与君共享人世繁华，只愿，流年今夕，共看云卷云舒，花开花落。
　　初相见，惊素心。你来时，陌上花开，纷繁的花瓣，灿烂了我的眼眸。纵使，东风恶，人情薄，烟花不堪剪。</p>
    <h2>第二段</h2>
    <p>内容</p>
    <p>
      仍愿为你，尝尽这无边的相思之苦。也许，我就是你千百年前放走的白狐，今生，只为你醉，只为你舞。君可知，那天空飘落的雪花呀，就是我对你深深的思念。那日，你说。凡尘寂寥，不能遗忘远方的梦想。山一程，水一程，你离开了这个令我百转千回的相思地。
　　一年一度秋风近，风儿翩翩吹起来。此时，桥边的芍药，正生的红艳，梨花艳艳地开着。熟悉的地方，陌生的氛围，却没有了你的踪影。日日思君不见君，即使花艳又如何。</p>
    </div>
  <div class="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;
}

Description :

Appliquez la feuille de style de style.css lorsqu'elle est affichée normalement dans le navigateur Web. Lors de l'impression, appliquez print.css avec media="print". Dans print.css, le MenuFrame de gauche est masqué et il devient un affichage de niveau 1. De plus, la largeur du ContentsFrame est supposée être de 100 % et sera disposée en fonction de la largeur du papier. De plus, en rendant la couleur du personnage ambiguë, nous lui donnons un fond blanc avec des lettres noires.

Résultats de l'exécution :

Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché.

CSS pour modifier la conception et le style de lécran lors de limpression (exemple de code)

Afficher l'aperçu avant impression à partir du navigateur Web. Dans l'aperçu avant impression, vous pouvez voir que le menu de gauche n'est pas affiché et que les couleurs sont modifiées en noir et blanc.

CSS pour modifier la conception et le style de lécran lors de limpression (exemple de code)

Regardons le traitement d'un seul style

Le code est le suivant :

index2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
  <link rel="stylesheet" href="style2.css" type="text/css" />
</head>
<body>
  <div class="MenuFrame">
    菜单1<br />
    菜单2<br />
    菜单3<br />
    菜单4<br />
    菜单5<br />
    菜单6<br />
  </div>
  <div class="ContentsFrame">
    <h2>题记</h2>
    <p>内容</p>
    <p>
     竹外桃花，纷纷飘落。卿舞霓裳，君弹曲。高山流水，绕指尖幽幽荡漾。执一叶扁舟，在岁月的河流上，演绎一场不离散的笙歌，可好……——题记
     犹记曾经，君袭一屡白衣，从陌上花开的小径款款而来，桃花灼灼，惊起了我的一帘幽梦。从此，诗词歌赋，烟雨桃花，都失去了色彩，只有君的身影，丝丝抨击着心海。
     </p>
    <h2>第一段</h2>
    <p>内容</p>
    <p>
    不再叹天若有情，不再盼三寸天堂。只因这素洁的红尘有了你的陪伴，相思惹起了无边的牵盼。情到深处无怨尤，不想，与君共享人世繁华，只愿，流年今夕，共看云卷云舒，花开花落。
　　初相见，惊素心。你来时，陌上花开，纷繁的花瓣，灿烂了我的眼眸。纵使，东风恶，人情薄，烟花不堪剪。</p>
    <h2>第二段</h2>
    <p>内容</p>
    <p>
      仍愿为你，尝尽这无边的相思之苦。也许，我就是你千百年前放走的白狐，今生，只为你醉，只为你舞。君可知，那天空飘落的雪花呀，就是我对你深深的思念。那日，你说。凡尘寂寥，不能遗忘远方的梦想。山一程，水一程，你离开了这个令我百转千回的相思地。
　　一年一度秋风近，风儿翩翩吹起来。此时，桥边的芍药，正生的红艳，梨花艳艳地开着。熟悉的地方，陌生的氛围，却没有了你的踪影。日日思君不见君，即使花艳又如何。</p>
    </div>
  <div class="ClearLeft"></div>
</body>
</html>

style2.css

.MenuFrame{
  width:200px;  
  float:left;  
  background-color:#fff8aa;  
  color:#ff6a00;
}
.ContentsFrame {
  float:left;  
  width:600px;  
  background-color:#ededed;  
  color:#535353;
}
@media print {
  .MenuFrame{
      display:none;
  }  
  .ContentsFrame {
      width:100%;    
      background-color:#FFFFFF;    
      color:#000000;
  }
}
.ClearLeft{
  clear:left;
}

Description :

Appliquez le contenu de la feuille de style lorsqu'elle est affichée normalement dans le navigateur web. Lors de l'impression, les styles des blocs @media print {} s'appliquent également. Dans le bloc @media print {}, le MenuFrame de gauche est masqué et il s'affiche dans un bloc. De plus, la largeur du ContentsFrame est supposée être de 100 % et sera disposée en fonction de la largeur du papier. De plus, la couleur du texte est également spécifiée comme noire (#000000), ce qui définit la couleur d'arrière-plan comme étant également blanche (#FFFFFF).

L'effet d'exécution est le même que ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir l'indentation de la première ligneArticle suivant：Comment définir l'indentation de la première ligne

Articles Liés

Voir plus