{:4_206:}
<style>
/* 父盒子 */
.wrap{ margin: auto; width: fit-content; height: fit-content; display:flex; flex-direction: column; font: normal 1em sans-serif; }
/* h1标题样式 */
.wrap h1{ margin: auto; font-size:2em; }
/* radio选项按钮 用于与菜单、内容建立关联*/
.wrap input { display: none; }
/* 项目菜单父盒子 */
.menu { margin: 20px 0 5px 6px; width: fit-content; height: fit-content; position: relative; }
/* 菜单样式 */
.menu label{ padding: 6px 10px; cursor: pointer; }
/* 内容父盒子 */
.contents{ padding: 20px; width: 600px; min-height: 400px; background: #fff; border: 1px solid; box-shadow: 0 2px 10px #000; }
/* 内容盒子 */
.conts{ display: none; }
/* radio选项按钮与菜单关联 */
#rad1:checked ~ .menu #menu1,
#rad2:checked ~ .menu #menu2,
#rad3:checked ~ .menu #menu3 { border: 1px solid; border-bottom: none; background: #fff; }
/* radio选项按钮与内容关联 */
#rad1:checked ~ .contents #cont1,
#rad2:checked ~ .contents #cont2,
#rad3:checked ~ .contents #cont3 { display: block; }
</style>
<div class="wrap">
<h1>纯CSSh5选项卡</h1>
<input id="rad1" name="group" type="radio" checked />
<input id="rad2" name="group" type="radio" />
<input id="rad3" name="group" type="radio" />
<div class="menu">
<label id="menu1" for="rad1">天葬</label>
<label id="menu2" for="rad2">正在飞翔的鹰</label>
<label id="menu3" for="rad3">天葬-亚东</label>
</div>
<div class="contents">
<style>
.mama { left: -214px; width: 1024px; height: 600px; background: lightblue url('https://pic.imgdb.cn/item/62a9753e0947543129c7e310.jpg') no-repeat center / cover; position: relative; overflow: hidden;}
</style>
<div class="conts" id="cont1">
<p>正在飞翔的鹰</p>
</div>
<div class="conts" id="cont2">
<p><div style="position: absolute; left:320px; top: 1000px; width:75px; height: 20px; ">
<img alt="" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif"/></div>
</div></p>
</div>
<div class="conts" id="cont3">
<p><audio id="aud" src="https://music.163.com/song/media/outer/url?id=178178.mp3" autoplay="autoplay" loop="loop">old browser</audio></p>
</div>
</div>
</div>
小辣椒 发表于 2022-5-19 20:49
队长现在的图图在进步了，继续加油！
好的好的。我还学会了移动子与播放器了。 加林森 发表于 2022-5-19 19:39
没有喝，吃面条的。
我猜你可能会喝酒吧？ 梦油 发表于 2022-5-20 10:32
我猜你可能会喝酒吧？
平时不喝的。 加林森 发表于 2022-5-19 20:15
是的，都换了，颜色都统一了。
按钮好像没换，还是我原来的配色的啊{:4_173:} 红影 发表于 2022-5-20 13:35
按钮好像没换，还是我原来的配色的啊
这个没有换的。 加林森 发表于 2022-5-20 10:36
平时不喝的。
还是少喝酒的好。我年轻时因工作关系喝酒喝伤了。现在我滴酒不沾。 梦油 发表于 2022-5-20 14:04
还是少喝酒的好。我年轻时因工作关系喝酒喝伤了。现在我滴酒不沾。
是啊，原来喝多了现在干脆不喝了。 加林森 发表于 2022-5-20 14:10
是啊，原来喝多了现在干脆不喝了。
不喝挺好。 梦油 发表于 2022-5-20 14:59
不喝挺好。
是的。 红影 发表于 2022-5-20 13:35
按钮好像没换，还是我原来的配色的啊
现在已经换了颜色了。
页:
1
[2]