如何获得 First Post 是大博主最近的 post js 和 css 代码？

Question

我在我的网站上安装了这个博主最近的 post 代码 JavaScript。

使用此代码，我得到的结果如下图 1 所示。但我正在尝试使用像 image-2 这样的代码获得结果。我需要有关此 JavaScript 函数的帮助。

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

图片-1 图-2

图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>

如何获得 First Post 是大博主最近的 post js 和 css 代码？

how to get First Post Is big with below blogger recent post js and css code?

javascript

html

css

blogger