一、随机一言(今日诗词 - 一言API)
食用方法:后台页面(文章)-新建页面(文章)-加入即可。
<style>
.poem-wrap {
position: relative;
width: 730px;
max-width: 80%;
border: 2px solid #797979;
border-top: none;
text-align: center;
margin: 40px auto;
}
.poem-left {
left: 0;
}
.poem-right {
right: 0;
}
.poem-border {
position: absolute;
height: 2px;
width: 27%;
background-color: #797979;
}
.poem-wrap p {
width: 70%;
margin: auto;
line-height: 30px;
color: #797979;
}
.poem-wrap h1 {
position: relative;
margin-top: -20px;
display: inline-block;
letter-spacing: 4px;
color: #797979;
font-size: 2em;
margin-bottom: 20px;
}
#poem_sentence {
font-size: 25px;
color: #797979;
}
#poem_info {
font-size: 15px;
margin: 15px auto;
color: #797979;
}
</style>
<div class="poem-wrap">
<div class="poem-border poem-left"></div>
<div class="poem-border poem-right"></div>
<h1>念两句诗</h1><p id="poem">
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<div id="poem_sentence"></div>
<div id="poem_info"></div>
<script type="text/javascript">
jinrishici.load(function(result) {
var sentence = document.querySelector("#poem_sentence")
var info = document.querySelector("#poem_info")
sentence.innerHTML = result.data.content
info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
});
</script>
</div>
二、固定一言
食用方法:同上。
<style>
.poem-wrap {
position: relative;
width: 730px;
max-width: 80%;
border: 2px solid #797979;
border-top: none;
text-align: center;
margin: 40px auto;
}
.poem-left {
left: 0;
}
.poem-right {
right: 0;
}
.poem-border {
position: absolute;
height: 2px;
width: 27%;
background-color: #797979;
}
.poem-wrap p {
width: 70%;
margin: auto;
line-height: 30px;
color: #797979;
}
.poem-wrap h1 {
position: relative;
margin-top: -20px;
display: inline-block;
letter-spacing: 4px;
color: #797979;
font-size: 2em;
margin-bottom: 20px;
}
#poem_sentence {
font-size: 25px;
color: #797979;
}
#poem_info {
font-size: 15px;
margin: 15px auto;
color: #797979;
}
</style>
<div class="poem-wrap">
<div class="poem-border poem-left"></div>
<div class="poem-border poem-right"></div>
<h1>这是标题</h1>
<div id="poem_sentence">内容</div>
<div id="poem_info">名称</div>
</div>
Comments | NOTHING