image.png

图片不完整显示


image.png

解决方法

aside .banner img {
width: 100%;
}
image.png

没有显示边框


热搜

欢迎加入中国博客联盟


这里收录国内各个领域的优秀博客，是一个全人工编辑的开发式博客联盟交流和展示平台……


aside .hot {
border: 1px solid #ccc;
}

image.png
原因是 a 标签是行内元素，无边框属性，得转换为块级元素
aside .hot {
display: block;
border: 1px solid #ccc;
margin-top: 20px;
padding: 0 20px 20px;
}
image.png

热搜那里快速做法

image.png
热搜

aside .hot span {
/ 去掉圆角效果 /
border-radius: 0;
}

image.png

效果图

image.png

代码

  1. <aside class="col-md-3">
  2.   <a href="#" class="banner">
  3.     <img src="upload/zgboke.jpg" alt="">
  4.   </a>
  5.   <a href="#" class="hot">
  6.     <span class="btn btn-primary">热搜</span>
  7.     <h4 class="text-primary">欢迎加入中国博客联盟</h4>
  8.     <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开发式博客联盟交流和展示平台......</p>
  9.   </a>
  10.       </aside>

/* aside模块 */
aside .banner img {
  width: 100%;
}

aside .hot {
  display: block;
  border: 1px solid #ccc;
  margin-top: 20px;
  padding: 0 20px 20px;
}

aside .hot span {
  /* 去掉圆角效果 */
  border-radius: 0;
  margin-bottom: 15px;
}

aside .hot p {
  font-size: 12px;
}