HTMl5 锚点制作

最新推荐文章于 2021-07-12 09:10:25 发布

对酒丶当歌

最新推荐文章于 2021-07-12 09:10:25 发布

阅读量1k

点赞数

分类专栏： Html5 文章标签： html5 锚点制作小知识

本文链接：https://blog.csdn.net/qq_37133856/article/details/69946463

版权

Html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html5: 锚点制作选项卡

<style>

*{margin: 0;padding: 0;}
li{list-style: none;}
.warp{width: 700px; margin: 100px auto}
.warp ul{position: relative;}
.warp .tab{ height:285px; }
.warp .tab li{
float:left;
width:100px;
height:100px;
margin-left: 20px;
}
.warp .tab li:nth-child(2)
{
margin-left: 30px;
}
.warp .tab li input[type='radio']{ position:absolute; }
.warp .tab li label{
font-size:18px;
padding:14px 21px;
background-color:#8bc1de;;
position:absolute;
top:0;
}
.tab [id^='select']:checked + label{
top:-5px;
padding-top:20px;
background:#2aaf67;
}
.warp .tab li label:hover{
background-color: #9999dd;;
}
.warp .tab li .content{
position:absolute;
top:53px;
left:0;
width:700px;
padding:25px;
background: #ededed;
display:none;
}

.tab [id^='select']:checked ~[id^='content']{
display:block;
}
div :nth-child(1) p{color:#52C5FC;}

</style>
</head>
<body>
<div class="warp">
<ul class="tab">
<li>
<input type="radio" name="tabs" id="select" checked>
<label for="select">三国演义</label>
<div id="content" class="content">
<p>《三国演义》是中国古典四大名著之一，是中国第一部长篇章回体历史演义小说，全名为《三国志通俗演义》（又称《三国志演义》），作者是元末明初的著名小说家罗贯中。描写了从东汉末年到西晋初年之间近105年的历史风云，以描写战争为主，反映了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军事斗争和最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史巨变，塑造了一批叱咤风云的三国英雄人物。全书可大致分为黄巾之乱、董卓之乱、群
雄逐鹿、三国鼎立、三国归晋五大部分。在广阔的背景上，上
演了一幕幕气势磅礴的战争场面。编者罗贯中将兵法三十六计融于字
里行间，既有情节，也有兵法韬略。</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="select1">
<label for="select1">红楼梦</label>
<div id="content1" class="content">
<p>红楼梦是中国古代四大名著之一，写于十八世纪中叶的清乾隆时代，内容以贾、王、史、薛四大家族为背景，以贾宝玉、
林黛玉的爱情悲剧为主线，描写了封建官僚贾、王、史、薛四大家族，
特别是贾家的衰落过程，揭露了封建统治者的罪恶，说明了封建王朝必将衰落的
历史命运。</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="select2">
<label for="select2">西游记</label>
<div id="content3" class="content">
<p>《西游记》为明代小说家吴承恩所著。取材于《大唐西域记》和民间
传说、元杂剧。宋代《大唐三藏取经诗话》（本名《大唐三藏取经记》
）是西游记故事见于说话文字的最早雏形，其中，唐僧就是以玄奘法师为原型的。
作为中国古代第一部浪漫主义长篇神魔小说，该书深刻地描绘了当时的
社会现实，是魔幻现实主义的开创作品。先写了孙悟空出世，然后遇见了唐
僧、猪八戒和沙和尚三人，但还是主要描写了孙悟空、猪八戒、沙和尚三人保护唐僧西行取经，唐僧从投胎到取经受了九九八十一难，一路降妖伏魔，九九归一，终于到达西天见到如来佛祖，最终五圣成真。
自《西游记》问世以来在民间广为流传，各式各样的版本层出不穷，明
代刊本有六种，清代刊本、抄本也有七种，典籍所记已佚版本十三种。鸦
片战争以后，中国古典文学作品大量被译为西文，西渐欧美，已有英、法、德
、意、西、手语、世（世界语）、俄、捷、罗、波、日、朝、越等文种。并发
表了不少研究论文和专著，对这部小说作出了极高的评价。被尊为中国古典
四大名著之一。</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="select3">
<label for="select3">水浒传</label>
<div id="content4" class="content">
<p>[1]《水浒传》，是中国四大名著之一，全书描写北宋末年以宋江为首的108位好汉在梁山起义，以及聚义之后接受招安、四处征战的故事。《水浒传》也是汉语文学中最具备史诗特征的作品之一。是中国历史上最早用白话文写成的章回小说之一。版本众多，流传极广，脍炙人口，对中国乃至东亚的叙事文学都有极其深远的影响。《水浒传》是一部以描写古代农民起义为题材的长篇小说。它形象地描绘了农民起义从发生、发展
直至失败的全过程，深刻揭示了起义的社会根源，满
腔热情地歌颂了起义英雄的反抗斗争和他们的社会理想，也具体揭示
了起义失败的内在历史原因。[2]</p>
</div>
</li>
</ul>
</div>
</body>

</html>

效果图::