* {
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:"Microsoft YaHei",sans-serif;
background:#f2f4f6;
color:#222;
line-height:1.8;
}
a{
color:#165DFF;
text-decoration:none;
}
a:hover{
color:#0040CC;
}
img{
max-width:100%;
height:auto;
border-radius:4px;
}
.container{
max-width:1180px;
margin:0 auto;
padding:0 15px;
} .header{
background:#165DFF;
padding:15px 0;
margin-bottom:30px;
}
.header .container{
display:flex;
justify-content:space-between;
align-items:center;
}
.logo a{
color:#fff;
font-size:22px;
font-weight:bold;
}
.nav ul{
list-style:none;
display:flex;
gap:22px;
}
.nav a{
color:#fff;
font-size:15px;
} .wrap{
display:flex;
flex-direction:row-reverse;
gap:25px;
}
.content{
width:74%;
}
.sidebar{
width:26%;
} .item{
background:#fff;
border-radius:8px;
padding:22px;
margin-bottom:20px;
box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.item h2{
font-size:20px;
margin-bottom:10px;
line-height:1.5;
}
.meta{
font-size:13px;
color:#888;
margin-bottom:12px;
display:flex;
gap:15px;
}
.desc{
color:#555;
font-size:15px;
} .pages{
text-align:center;
margin:30px 0;
}
.pages a,.pages span{
display:inline-block;
padding:8px 14px;
background:#fff;
border-radius:4px;
margin:0 3px;
font-size:14px;
}
.pages .current{
background:#165DFF;
color:#fff;
} .article{
background:#fff;
border-radius:8px;
padding:30px;
margin-bottom:25px;
}
.article h1{
font-size:26px;
margin-bottom:15px;
line-height:1.5;
}
.article .text{
margin:30px 0;
font-size:16px;
line-height:2;
}
.article .text p{
margin-bottom:22px;
} .near{
display:flex;
justify-content:space-between;
background:#fff;
padding:15px 20px;
border-radius:8px;
margin-bottom:25px;
} .related{
background:#fff;
border-radius:8px;
padding:20px;
margin-bottom:25px;
}
.related h3,.like h3{
font-size:17px;
margin-bottom:15px;
padding-bottom:8px;
border-bottom:1px solid #eee;
}
.related ul{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:12px;
}
.related li{
width:48%;
} .like{
background:#fff;
border-radius:8px;
padding:20px;
}
.like ul{
list-style:none;
}
.like li{
padding:8px 0;
border-bottom:1px dashed #eee;
} .comment{
background:#fff;
border-radius:8px;
padding:20px;
margin-top:25px;
}
.comment-form input,.comment-form textarea{
width:100%;
padding:10px;
margin-bottom:10px;
border:1px solid #ddd;
border-radius:4px;
}
.comment-form .submit{
background:#165DFF;
color:#fff;
border:none;
padding:10px 20px;
border-radius:4px;
cursor:pointer;
} .side-box{
background:#fff;
border-radius:8px;
padding:18px;
margin-bottom:20px;
}
.side-box h3{
font-size:16px;
margin-bottom:15px;
padding-bottom:8px;
border-bottom:1px solid #eee;
}
.side-box ul{
list-style:none;
}
.side-box li{
padding:6px 0;
}
.tags a{
display:inline-block;
padding:4px 8px;
background:#f5f7fa;
border-radius:3px;
margin:0 4px 6px 0;
font-size:13px;
} .footer{
background:#222;
color:#fff;
text-align:center;
padding:25px 0;
margin-top:40px;
} .to-top{
position:fixed;
right:20px;
bottom:20px;
width:42px;
height:42px;
background:#165DFF;
color:#fff;
text-align:center;
line-height:42px;
border-radius:50%;
cursor:pointer;
display:none;
} @media(max-width:768px){
.wrap{
flex-direction:column;
}
.content,.sidebar{
width:100%;
}
.related li{
width:100%;
}
.nav ul{
flex-wrap:wrap;
gap:12px;
}
.near{
flex-direction:column;
gap:10px;
}
} .waterfall-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.water-item {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: all 0.2s;
}
.water-item:hover {
transform: translateY(-3px);
}
.water-thumb {
width: 100%;
height: 200px;
object-fit: cover;
}
.water-info {
padding: 18px;
}
.water-title {
font-size: 16px;
margin-bottom: 8px;
line-height: 1.5;
}
.water-meta {
font-size: 12px;
color: #999;
} @media (max-width:991px) {
.waterfall-box {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:768px) {
.waterfall-box {
grid-template-columns: repeat(1, 1fr);
}
} .waterfall-box {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.water-item {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
transition: all 0.2s;
}
.water-item:hover {
transform: translateY(-3px);
}
.water-thumb {
width: 100%;
height: 200px;
object-fit: cover;
}
.water-info {
padding: 18px;
}
.water-title {
font-size: 16px;
margin-bottom: 8px;
line-height: 1.5;
font-weight: 600;
}
.water-excerpt {
font-size: 14px;
color: #555;
line-height: 1.6;
margin: 10px 0;
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.water-meta {
font-size: 12px;
color: #999;
margin-top: 10px;
} @media (max-width:991px) {
.waterfall-box {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:768px) {
.waterfall-box {
grid-template-columns: repeat(1, 1fr);
}
}