| 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; | |
| } | |
| """ |