验证中...
本周日(5月27日)码云企业技术分享会【微服务】专场将与你相约上海。阿里、华为、ThoughtWorks的技术大咖齐聚,等你来撩!
片段 1 片段 2 片段 3 片段 4
页面切换.html
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<title>页面切换</title>
<meta charset="utf-8">
<style type="text/css">
*{
margin:0;
padding: 0;
}
#container{
width: 500px;
height: 400px;
margin:20px auto;
border:1px solid red;
padding: 20px;}
h2{
background: pink;
padding-left: 10px;
}
.part_1_content{
display: inline-block;
width: 80px;
height: 30px;
margin-top: 20px;
border:1px solid #686868;
background: pink;
text-align: center;
border-radius: 6px 6px 0 0;
}
.radio{display: none;}
.radio:checked + .part_1_content{
position: relative;
width: 80px;
height: 31px;
top:1px;
border-bottom: none;
background: skyblue;
}
.radio_content{
border:1px solid pink;
display:none;
clear:left;
}
table{
border-collapse: collapse;
margin-top: 20px;
margin-left: 40px;
margin-bottom: 40px;
width: 80%;
}
table td{
padding:5px;
border:1px solid black;
}
.radio:nth-of-type(1):checked ~ .radio_content:nth-of-type(1),
.radio:nth-of-type(2):checked ~ .radio_content:nth-of-type(2),
.radio:nth-of-type(3):checked ~ .radio_content:nth-of-type(3),
.radio:nth-of-type(4):checked ~ .radio_content:nth-of-type(4),
.radio:nth-of-type(5):checked ~ .radio_content:nth-of-type(5){
display: block;
}
</style>
</head>
<body>
<div id="container">
<h2>项目组一</h2>
<input type="radio" name="radio_content" id="part_1" checked class="radio">
<label for="part_1" class="part_1_content">项目组一</label>
<input type="radio" name="radio_content" id="part_2" class="radio">
<label for="part_2" class="part_1_content">项目组二</label>
<input type="radio" name="radio_content" id="part_3" class="radio">
<label for="part_3" class="part_1_content">项目组二</label>
<input type="radio" name="radio_content" id="part_4" class="radio">
<label for="part_4" class="part_1_content">项目组四</label>
<input type="radio" name="radio_content" id="part_5" class="radio">
<label for="part_5" class="part_1_content">项目组五</label>
<div class="radio_content">
<table >
<tr>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
</tr>
<tr>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
</tr><tr>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
</tr><tr>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
</tr><tr>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
<td>产品一</td>
</tr>
</table>
</div>
<div class="radio_content">
<table >
<tr>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
</tr>
<tr>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
</tr><tr>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
</tr><tr>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
</tr><tr>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
<td>产品二</td>
</tr>
</table>
</div>
<div class="radio_content">
<table >
<tr>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
</tr>
<tr>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
</tr><tr>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
</tr><tr>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
</tr><tr>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
<td>产品三</td>
</tr>
</table>
</div>
<div class="radio_content">
<table >
<tr>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
</tr>
<tr>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
</tr><tr>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
</tr><tr>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
</tr><tr>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
<td>产品四</td>
</tr>
</table>
</div>
<div class="radio_content">
<table >
<tr>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
</tr>
<tr>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
</tr><tr>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
</tr><tr>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
</tr><tr>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
<td>产品五</td>
</tr>
</table>
</div>
</div>
</body>
</html>
QQ图片20180408160405.png
QQ图片20180408160413.png
QQ图片20180408160420.png

评论列表( 0 )

你可以在登录后,发表评论

9_float_left_people 9_float_left_close