<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/checkDeom.css" /> </head> <body> <div class="HongShanNews"> <ul class="listItem tab-container radio "> <li> <input class="tab-toggle" id="tab-1" type="radio" name="toggle" checked /> <label data-title="Tab 1" class="tab l-b" for="tab-1">今日红山</label> <ul class="tab-content-container"> <li class="tab-content display__flex"> <a href=" #" class="display__flex"> <span class="content">1区政府区长林晶华主持召开迎接国家卫区政府区长林晶华主持召开迎接国家卫区政府区长林晶华主持召开迎接国家卫区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href=" #" class="display__flex"> <span class="content">1区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href=" #" class="display__flex"> <span class="content">1区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href=" #" class="display__flex"> <span class="content">1区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href=" #" class="display__flex"> <span class="content">1区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href=" #" class="display__flex"> <span class="content">1区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> </ul> </li> <li> <input class="tab-toggle" id="tab-2" type="radio" name="toggle" /> <label class="tab" for="tab-2">部门动态</label> <ul class="tab-content-container"> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">2区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">2区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">2区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">2区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">2区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">2区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> </ul> </li> <li> <input class="tab-toggle" id="tab-3" type="radio" name="toggle" /> <label class="tab" for="tab-3">镇街动态</label> <ul class="tab-content-container"> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">3区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">3区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">3区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">3区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">3区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">3区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> </ul> </li> <li> <input class="tab-toggle" id="tab-4" type="radio" name="toggle" /> <label class="tab" for="tab-4">政府公告</label> <ul class="tab-content-container"> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">4区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">4区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">4区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">4区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">4区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> <li class="tab-content display__flex"> <a href="#" class="display__flex"> <span class="content">4区政府区长林晶华主持召开迎接国家卫</span> <span class="date">2018-07-18</span> </a> </li> </ul> </li> </ul> </div> </body> </html>
.HongShanNews{border:1px solid red;} .HongShanNews .listItem.tab-container.radio{border:1px solid green;} .tab-container {list-style-type: none;padding: 0; position: relative;background: #fff; padding: 1.5rem; } .tab-container:after {content: "";display: table;clear: both;} .tab-container ul {list-style-type: none;padding: 0;} .tab-container .arrows {display: block;width: 60px;font-size: 32px;bottom: 10px;right: 0px;position: absolute;} .tab-container .arrows label {display: inline-block;cursor: pointer;color: #aaa;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;margin-left: 5px;} .tab-container .arrows label:hover {color: #333;} .tab-container .tab-content-container {border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;height: 0;opacity: 0;overflow: hidden;line-height: 22px;background: #fff; position: absolute;top: 66px;border-top: 0;left:1.5rem; right:1.5rem;border-top: 0;} .tab-container .tab-content-container>li{border:0px solid red; align-items:center; justify-content: center; } .tab-container .tab-content-container>li::before{ content:""; width:0.625rem; height:0.625rem; display:block; background-color:#eb4339; margin-right:1rem; } .tab-container .tab-content-container>li a{border:0px solid red; flex:9; justify-content:space-between; padding: 1.1vw 0; } .tab-container .tab-content-container>li a .content{flex: 3;overflow: hidden;height: 1.5rem;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;border: 0px solid red;} .tab-container .tab-content-container>li a .date{ flex: 1;color: #999999;border: 0px solid red;text-align: right;} .tab-container .tab-content-container .tab-content {opacity: 0;transition: opacity 0.1s ease-in;} .tab-container .tab {border-bottom:2px solid #ff9933;outline: 0;float: left;cursor: pointer;opacity: 1;width: 25%;line-height: 40px;display: block;margin: 0;position: relative;background:url(../images/03.png) no-repeat;color: #333333;text-align: center; } .tab-container>li:first-child .tab{ background:url(../images/00.png) no-repeat; background-size:100% 100%; background-position-y: 4px !important;} .tab-container>li:nth-child(2) .tab, .tab-container>li:nth-child(3) .tab{ background:url(../images/00.png) no-repeat; background-size:100% 100%; background-position-y: 4px !important; } .tab-container>li:nth-child(4) .tab{ background:url(../images/00.png) no-repeat; background-size: 100% 100%; background-position-y: 4px !important;} .tab-container .tab.l-b {} .tab-container>li .tab:hover {background:url(../images/000.png) no-repeat; background-size: 100% 120%;background-position-y: -2px !important;} .tab-container .tab-toggle {display: none;} .tab-container>li .tab-toggle.active + .tab, .tab-container>li .tab-toggle:checked + .tab {background:url(../images/0.png) no-repeat;background-size: 100% 120%;background-position-y: -4px !important;color:tomato; } .tab-container .tab-toggle.active ~ .tab-content-container, .tab-container .tab-toggle:checked ~ .tab-content-container {height:auto;opacity: 1; } .tab-container .tab-toggle.active ~ .tab-content-container .tab-content, .tab-container .tab-toggle:checked ~ .tab-content-container .tab-content {opacity: 1;} .tab-container .tab-toggle.active ~ .tab-content-container .tab-content label, .tab-container .tab-toggle:checked ~ .tab-content-container .tab-content label {opacity: 1;}