HTML+CSS3横向导航栏

2022-03-10 22:17栏目:互联网
TAG:

效果图:

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML+CSS3横向导航栏</title> <link rel="stylesheet" href="index.css" media="screen" type="text/css" /> </head> <body> <article class="tabs"> <input checked id="one" name="tabs" type="radio"> <label for="one">Tab One</label> <input id="two" name="tabs" type="radio" value="Two"> <label for="two">Tab Two</label> <input id="three" name="tabs" type="radio"> <label for="three">Tab Three</label> <input id="four" name="tabs" type="radio"> <label for="four">Tab Four</label> <div class="panels"> <div class="panel"> <h2>This is Panel One</h2> <p>This is Panel One</p> </div> <div class="panel"> <h2>This is Panel Two</h2> <p>this is panel two</p> </div> <div class="panel"> <h2>This is Panel Three</h2> <p>this is panel three</p> </div> <div class="panel"> <h2>This is Panel four</h2> <p>this is panel four</p> </div> </div> </article> </body> </html>

index.css

body { font-family: Cambria, Arial; background: #333; } .tabs { width: 100%; max-width: 600px; margin: 50px auto; } input { opacity: 0; } label { cursor: pointer; background: -webkit-linear-gradient(#666, #555); color: #eee; border-radius: 5px 5px 0 0; padding: 1.5% 3%; float: left; margin-right: 2px; font:1em cambria; } label:hover { background: -webkit-linear-gradient(#777, #666); } input:checked + label { background: #fff; color: #333; } .tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2), .tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3), .tabs input:nth-of-type(4):checked ~ .panels .panel:last-child { opacity: 1; -webkit-transition: .3s; } .panels { float: left; clear: both; position: relative; width: 100%; background: #fff; border-radius: 0 10px 10px 10px; min-height: 315px; } .panel { width: 100%; opacity: 0; position: absolute; background: #fff; border-radius: 0 10px 10px 10px; padding: 4%; box-sizing: border-box; } .panel h2 { margin: 0; } 内容转自作者CSDN博客帐号

本文来自网络,不代表山斋月平台立场,转载请注明出处: https://www.shanzhaiyue.top