如何获得第一篇博主最近发布的 js 和 css 代码是否很大？

Question

我已经在我的网站上安装了这个博主最近的帖子代码 JavaScript。

使用此代码，我得到如下第一个 image-1 的结果。 但我正在尝试使用此代码（如 image-2）获得结果。 我需要有关此 JavaScript function 的帮助。

下面我附上Javascript、Css和HTMl代码。 我需要有关此 JavaScript function 的帮助。

图像-1 图像-2

Image-3

 .mbtlist { list-style-type: none; overflow: hidden }.mbtlist li { margin: 0px auto 20px auto; clear: both; color: #666; font-family: Helvetica; font-size: 12px; border-bottom: 1px dotted #ddd; padding-bottom: 10px; overflow: auto; }.mbtlist.mbttitle { font-family: oswald; font-size: 16px; color: #0080ff; font-weight: normal; text-decoration: none; }.mbtlist.mbttitle:hover { color: #00A5FF; } font-family:georgia; font-size:15px; font-weight:bold }.mbtlist div span { margin: 0 10px 0 0; display: inline-block; }.mbtlist span { display: block; margin: 5px 0px 0px; padding-right: 5px; }.mbtlist.imore { font-size: 16px; font-weight: bold; text-decoration: none; color: #666; line-height: 0.7em; }.mbtlist img { float: left; margin: 0px 10px 10px 0px; border: 6px solid #fff; padding: 0px; width: 80px; height: 65px; box-shadow: -1px -1px 4px #777; }.mbtlist.icontent { text-align: justify; }

 <script> function getPosts(json) { var posts = "<ul class=mbtlist>"; for (var i = 0; i < json.feed.entry.length; i++) { var title = json.feed.entry[i].title.$t; var url = json.feed.entry[i].link.pop().href; if (json.feed.entry[i].media$thumbnail){thumbUrl = json.feed.entry[i].media$thumbnail.url;thumbnail= thumbUrl.replace("/s72-c/","/s"+80+"/");} posts += "<li><a class='mbttitle' href='" + url + "'><img src='" + thumbnail + "'>" + title + "</a></li>"; } posts+='</ul>'; document.getElementById('container').innerHTML = posts; } </script> <div id="container"></div> <script src="https://www.sebahotnews.org/feeds/posts/default/-/জাতীয়?max-results=5&alt=json&callback=getPosts"></script>

Answer 1

如果只设置图像宽度而不设置高度，则不会失真。

对于顶部图像，您可以使用li:first-of-type选择器

 .mbtlist { list-style-type: none; overflow: hidden }.mbtlist li { margin: 0px auto 20px auto; clear: both; color: #666; font-family: Helvetica; font-size: 12px; border-bottom: 1px dotted #ddd; padding-bottom: 10px; }.mbtlist.mbttitle { font-family: oswald; font-size: 16px; color: #0080ff; font-weight: normal; text-decoration: none; }.mbtlist.mbttitle:hover { color: #00A5FF; } font-family:georgia; font-size:15px; font-weight:bold }.mbtlist div span { margin: 0 10px 0 0; display: inline-block; }.mbtlist span { display: block; margin: 5px 0px 0px; padding-right: 5px; }.mbtlist.imore { font-size: 16px; font-weight: bold; text-decoration: none; color: #666; line-height: 0.7em; }.mbtlist.mbttitle.imgbox { max-width: 80px; max-height: 65px; margin: 0px 10px 10px 0px; padding: 6px; box-shadow: -1px -1px 4px #777; display: inline-block; vertical-align: top; text-align: center; overflow: hidden; }.mbtlist.mbttitle.imgbox > img{ width: 100%; vertical-align: middle; }.mbtlist.icontent { text-align: justify; }.mbtlist li:first-of-type.mbttitle.imgbox { display: block; width: 100%; max-width: unset; max-height: unset; }

 <script> function getPosts(json) { var posts = "<ul class=mbtlist>"; for (var i = 0; i < json.feed.entry.length; i++) { var title = json.feed.entry[i].title.$t; var url = json.feed.entry[i].link.pop().href; if (json.feed.entry[i].media$thumbnail) { thumbUrl = json.feed.entry[i].media$thumbnail.url; thumbnail = thumbUrl.replace("/s72-c/", "/s" + 80 + "/"); } posts += "<li><a class='mbttitle' href='" + url + "'><span class='imgbox'><img src='" + thumbnail + "'></span>" + title + "</a></li>"; } posts += '</ul>'; document.getElementById('container').innerHTML = posts; } </script> <div id="container"></div> <script src="https://www.sebahotnews.org/feeds/posts/default/-/জাতীয়?max-results=5&alt=json&callback=getPosts"></script>