File size: 1,902 Bytes
b6d39a8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | css = """
.news-container {
display: flex; /* 使用 flex 布局 */
flex-wrap: wrap; /* 如果内容过多，允许换行 */
gap: 10px; /* 卡片之间的间距 */
justify-content: flex-start; /* 卡片从左到右排列 */
}
.news-card {
border: 1px solid #ccc; /* 边框 */
border-radius: 5px; /* 圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
padding: 10px; /* 内边距 */
margin: 10px 0; /* 外边距 */
width: 100%; /* 卡片宽度适应父容器 */
max-width: 150px; /* 最大宽度为300px */
max-height: 100px;
overflow: hidden; /* 确保内容不会溢出卡片 */
}
.news-card img {
display: block; /* 将图片设为块级元素，避免底部空隙 */
width: 20px; /* 固定宽度为 60px */
height: 20px; /* 固定高度为 60px */
border-radius: 5px; /* 图片圆角 */
object-fit: cover; /* 裁剪图片以适应容器 */
margin-bottom: 5px; /* 图片下方间距 */
}
.news-card .title {
font-weight: bold; /* 标题加粗 */
font-size: 10px; /* 标题字体大小 */
}
.news-card .source {
font-size: 10px;
font-style: italic !important; /* 来源文字斜体 */
color: #666 !important; /* 来源文字颜色 */
}
.new-container2{
width: 200px; /* 容器宽度 */
height: 200px; /* 容器高度 */
overflow-y: auto; /* 超出容器的内容显示滚动条 */
border: 1px solid #ccc; /* 给容器添加边框 */
padding: 10px;
box-sizing: border-box; /* 使得 padding 和 border 包含在容器大小内 */
}
.title2 {
margin-bottom: 10px; /* 每条新闻之间的间距 */
font-weight: bold;
font-size: 14px;
line-height: 1.6;
}
.title2 a {
text-decoration: none;
color: #007bff;
}
.title2 a:hover {
text-decoration: underline;
}
""" |