如何獲得第一篇博主最近發布的 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>