CSS部分
<style>
body {
background: #F1F1F1;
}
.wrapper{
width: 1200px;
}
.duoxuanti {
color: #4D76E0;
}
.blue-bg {
background-color: #4C76E2;
color: #fff;
border-radius: 3px;
}
.search-main {
position: relative;
background: #ffffff;
overflow: hidden;
padding-bottom: 15px;
}
.swiper-title2 {
position: fixed;
top: 0px;
width: 1200px;
height: 50px;
font-size: 16px;
line-height: 50px;
color: #333;
border-left: 2px solid #189349;
font-weight: 600;
background-color: #fff;
z-index: 99;
border: 1px solid #DEDEDE;
}
.xx {
display: flex;
text-align: center;
white-space: nowrap;
font-size: 15px;
}
.screen {
flex: 1;
font-weight: 600;
color: red;
font-size: 17px;
}
.xx a {
flex: 1;
margin-left: 2px;
}
.xx a:hover {
background-color: #4C76E2;
color: #fff;
border-radius: 3px;
}
.zikao-tr {
display: flex;
padding: 3px;
}
.td-item1 {
flex: 3;
padding-left: 15px;
}
.td-item2 {
flex: 97;
display: flex;
flex-wrap: wrap;
}
.td-item1 button {
border: 1px solid #E1E1E1;
background-color: #F8F8F8;
color: #FD3938;
font-size: 13px;
width: 22px;
height: 22px;
text-align: center;
line-height: 22px;
}
.td-item1 button:hover {
color: #FFFFFf;
background-color: red;
}
.td-item2 div {
width: 20%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.td-item2 div a {
line-height: 29px;
}
.td-item2 div a:hover {
color: #FD3938;
}
.zikaozhuan-title {
line-height: 30px;
font-weight: 600;
color: red;
font-size: 17px;
margin-left: 15px;
margin-top: 10px;
}
.click_but {
border: 1px solid #D8D8D8;
background: #4E76DE !important;
color: #FFF !important;
}
.table3 {
position: relative;
top: 60px;
}
</style>
HTML部分
<div class="search-main wrapper">
<div class="swiper-title2 xx nav-top">
<span class="screen">筛选:</span>
<a href="#" class="blue-bg">全部</a>
<a href="#" data-typeid="1">A</a>
<a href="#" data-typeid="2">B</a>
<a href="#" data-typeid="3">C</a>
<a href="#" data-typeid="4">D</a>
<a href="#" data-typeid="5">E</a>
<a href="#" data-typeid="6">F</a>
<a href="#" data-typeid="7">G</a>
<a href="#" data-typeid="8">H</a>
<a href="#" data-typeid="9">I</a>
<a href="#" data-typeid="10">J</a>
</div>
<table class="table3" align="center" cellpadding="20" cellspacing="0" width=1200px>
<tbody>
<tr class="zikao-tr" id="type-1" data-typeid="1">
<td class="td-item1"><button>A</button></td>
<td class="td-item2">
<div><a href="#" name="A">04145安全生产法及相关04145安全生产法及相关法律知识法律知识</a></div>
<div><a href="#">01B0206_国际贸易(停考)</a></div>