书页与普通样式间的切换
本帖最后由 马黑黑 于 2022-4-25 07:43 编辑 <br /><br /><style>.normal, .book { margin: auto; padding: 16px; width: 700px; min-height: 420px; font: normal 16px '新宋体', '微软雅黑', Sans-serif; }
.book { background: linear-gradient(to right, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%); columns: 2; column-gap: 40px; column-fill: auto; }
.normal h2 .book h2 { margin: 6px; padding-bottom: 0px; }
.normal p, .bookp { margin: 0px; padding-bottom: 8px; }
.normal input, .book input { position: absolute; background: transparent; border: 1px solid #ccc; cursor: pointer; }
</style>
<div id="txt" class="book">
<input id="btn" type="button" value="普通样式" />
<h2 style="text-align:center">恶毒的眼镜王蛇</h2>
<p> 上帝造物应出于善意，理论上不造邪恶之物。问题是万能的上帝已经被证实并非万能，他创造的世界终于失控，失控的原因与蛇有些关联：撒旦借用了蛇的形体说服了夏娃品尝知识之果，人类于是有了智慧，于是懂得羞耻，于是被逐出伊甸园，于是世间的灾难从此一发不可收。</p>
<p> 受到上帝处罚的蛇并未因为失去了脚而痛定思痛，反之，它们与阴险结缘，成了邪恶的象征。</p>
<p> 眼镜王蛇的毒性尽人皆知，但是人们可能不太清楚的是眼镜王蛇那令人不可理喻的对同类异性的恶毒残害。</p>
<p> 为取得与雌性眼镜王蛇的交配权，和大多数动物一样，两条雄性眼镜王蛇也发生一场决斗，不同之处在于雄性眼镜王蛇间的决斗没有惨烈的场面出现，它们肢体相互缠绕，头部高高抬起，看上去是两条蛇在翩翩起舞，舞姿还美轮美奂。二者均自始至终不使出对付他敌的致命狠招，如有君子协定一般，比人类为爱情而进行的你死我活的决斗不知文明多少倍。两条雄蛇比拼的是体力，体力消耗殆尽者最后逃离决斗现场，放弃了一心一意想要得到的交配权。</p>
<p> 然而事情至此还远远没有结束。若干时日之后，败退的眼镜王蛇找到了与自己情敌结下爱情之果的母蛇，意欲与之求欢，母蛇不从，雄蛇极为败兴，一怒之下咬住母蛇的身体并尽可能多地往母蛇体内注入毒液，直至母蛇死亡。雄蛇还没有作罢，它接着尝试吞食母蛇，无奈母蛇的个体也不小，雄蛇再怎么努力都无法吞下去，只好又吐出来，恋恋不舍地离开奸杀犯罪现场。</p>
<p> 蛇没有奸尸行为或许可以理解为蛇的智慧不够，最好的解释则可能是蛇明白交配的目的，而为何要弄死母蛇可以理解为蛇的种族唯我血统的强烈诉求。不论如何，悲剧已经发生，雄蛇在制造悲剧过程中所使用的招法过于阴险邪恶，在我们人类看来是一种种族自毁式的复仇手段。</p>
<p> 上帝即使厌恶蛇也已力不从心了，对蛇的教化也无能为力，只好听之任之，让邪恶的蛇的故事不断上演。</p>
</div>
<script>
let txt = document.getElementById("txt");
let btn = document.getElementById("btn");
btn.onclick = function(){ this.value == "书页样式" ? (txt.className = "book", this.value = "普通样式") : (txt.className = "normal", this.value = "书页样式"); }
</script> 代码分享（适用于字数一千上下的文章）：
<style>
.normal, .book { margin: auto; padding: 16px; width: 700px; min-height: 420px; font: normal 16px '新宋体', '微软雅黑', Sans-serif; }
.book { background: linear-gradient(to right, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%); columns: 2; column-gap: 40px; column-fill: auto; }
.normal h2 .book h2 { margin: 6px; padding-bottom: 0px; }
.normal p, .bookp { margin: 0px; padding-bottom: 8px; }
.normal input, .book input { position: absolute; background: transparent; border: 1px solid #ccc; cursor: pointer; }
</style>
<div id="txt" class="book">
<input id="btn" type="button" value="普通样式" />
<h2 style="text-align:center">文章标题</h2>
<p> 段落一</p>
<p> 段落二</p>
<p> 段落三</p>
<p> 段落N</p>
</div>
<script>
let txt = document.getElementById("txt");
let btn = document.getElementById("btn");
btn.onclick = function(){ this.value == "书页样式" ? (txt.className = "book", this.value = "普通样式") : (txt.className = "normal", this.value = "书页样式"); }
</script>
我只看出了，颜色深浅不一样，太笨了，我{:4_198:} 樵歌 发表于 2022-4-25 09:45
我只看出了，颜色深浅不一样，太笨了，我
普通样式和平时在论坛上发文没啥区别；书页样式分左右两半，然后和你说的一样。 这个还能切换的，黑黑厉害{:4_199:} 红影 发表于 2022-4-25 14:18
这个还能切换的，黑黑厉害
樵歌没看出来呢 马黑黑 发表于 2022-4-25 19:03
樵歌没看出来呢
估计没注意吧{:4_173:} 红影 发表于 2022-4-25 23:01
估计没注意吧
大概是吧 明天来学习。 加林森 发表于 2022-4-25 23:26
明天来学习。
这个貌似不难 马黑黑 发表于 2022-4-25 23:27
这个貌似不难
是的是的。我一看就明白了的。谢谢！{:4_190:} 加林森 发表于 2022-4-25 23:32
是的是的。我一看就明白了的。谢谢！
队长喝茶{:4_190:} 马黑黑 发表于 2022-4-26 06:44
队长喝茶
谢谢老黑！ 加林森 发表于 2022-4-26 09:30
谢谢老黑！
甭客气 马黑黑 发表于 2022-4-26 12:17
甭客气
好的好的
页:
[1]