gpt4 book ai didi

html - 样式化
 标签

转载 作者:行者123 更新时间:2023-11-28 04:28:28 26 4
gpt4 key购买 nike

在我的网站文档中,我有一些应该显示的代码,建议用户如何按照显示的代码更改网站的外观。我不想在此 pre 标记内使用背景图像,但需要为其设置一些样式。就像每一行代码都应该有一个替代的背景颜色。我已经链接了灵感图片。

demo image

  pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
}
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>

最佳答案

正如@Mr Lister 所说,使用渐变。

.my-pre{
line-height:1.2em;
background:linear-gradient(180deg,#ccc 0,#ccc 1.2em,#eee 0);
background-size:2.4em 2.4em;
background-origin:content-box;

/* some extra styles*/
padding:0 20px;
text-align:justify;
font-family:calibri,arial,sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<pre class="my-pre">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptate ab pariatur assumenda ipsum exercitationem tempore
architecto, adipisci, id nihil culpa molestias rerum, dolore alias?
Fugit eos doloribus dolore, expedita officiis.
</pre>
</body>
</html>

关于html - 样式化 <pre> 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45477206/

26 4 0