html渐变

最新推荐文章于 2023-04-06 20:31:52 发布

计算机技术之指尖密码

最新推荐文章于 2023-04-06 20:31:52 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/w1374401940/article/details/106254536

版权

<html>
<head>
<title></title>
<style>
.example{
	width: 98%;
    color: #000;
    background-color: #f6f4f0;
    background-color: hsl(78, 60%, 76%);
    background-color: #dcecb5;
    background-color: #e5eecc;
    margin: 0 0 5px 0;
    padding: 5px;
    border: 1px solid #d4d4d4;
    background-image: -webkit-linear-gradient(#fff,#e5eecc 100px);
    background-image: linear-gradient(#fff,#e5eecc 100px);
}
.example_code {
    line-height: 1.4em;
    width: 98%;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #d4d4d4;
    font-size: 110%;
    font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;
    word-break: break-all;
    word-wrap: break-word;
}
.hl-main {
    background-color: #fff;
    font-family: Menlo,Monaco,Consolas,"Andale Mono","lucida console","Courier New",monospace;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}
.hl-brackets {
    color: Olive;
}
.hl-code {
    color: Gray;
}
.hl-var {
    color: #00008b;
}
.hl-reserved {
    color: Green;
}
.hl-quotes {
    color: #8b0000;
}
</style>
</head>
<body>
<div class="example">
<h4 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-code">!</span><span class="hl-var">DOCTYPE</span><span class="hl-code"> </span><span class="hl-var">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">meta</span><span class="hl-code"> </span><span class="hl-var">charset</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">utf-8</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">title</span><span class="hl-brackets">&gt;</span><span class="hl-code">教程(grebell.com)</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">title</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">head</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
    </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">h1</span><span class="hl-brackets">&gt;</span><span class="hl-code">我的第一个标题</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">h1</span><span class="hl-brackets">&gt;</span><span class="hl-code">
    </span><span class="hl-brackets">&lt;</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">我的第一个段落。</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">p</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">body</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">html</span><span class="hl-brackets">&gt;</span></div>
</div>
</div>
</body>
</html>

计算机技术之指尖密码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html渐变

<html><head><title></title><style>.example{ width: 98%; color: #000; background-color: #f6f4f0; background-color: hsl(78, 60%, 76%); background-color: #dcecb5; background-color: #e5eecc; margin: 0
复制链接

扫一扫