html+css实战(3)

新闻页面(bootstrap)


  • 设置头像除了在html中用img之外还可以设置为背景图片
classname{
    background:url(路径);
    background-size:百分比;
    background-repeat:no-repeat;
    background-position:center center;
    width:
}
  • nav navbar-nav是给ul的!
  • 分清楚作用的对象!比如是a还是li
  • 两个类若是作用于同一个对象则写的时候之间没有间隙: .xx.xx
  • 用col设置div后,对于图片可能不管用,需要把图片设置为display:block和max-width:100%
  • 每一块都作为div给个名字,当把div换成a时要令a为block否则格式消失
  • 一行呈现的就用span
  • 调整间距:line-height(常用于文章)
  • 在行内(如span)添加img需要把image设置为inline-block再调整width、height
  • 当复制多个块发现格式紊乱时或者有元素没有出现时->取消float:clearfix,如栅格元素的父元素要令class=clearfix
  • 有列就有item,有item一般也命个list,可以多名几个类,方便统一不同页面不同块公用样式
  • 首先统一一大块内不同块的padding(如title和item),再具体到某一块调
  • 只要是label类型,就算在div内也还是行内
  • opacity:.x透明度
  • 当属性无效时,可把类的路径写的清楚一点
  • input-group可以组合输入框和其他元素在一行,若是和button组合,则input的兄弟为input-group-btn->button
  • 响应式:把需要隐藏的东西放到一个div里面class=“hidden-xs/sm”,相应地有class=“visible-尺寸((-inline)-block)
  • display:block是显示;在属性后面加上!important优先级最高
  • 用hidden类把input隐藏,再给它一个专属的label
  • checkbox:checked ~或者>[classname]{}
  • 调整位置:当position设为absolute之后应该是调整right不是margin-right
{
    display:inline-block;
    position:absolute;
    right/:
}

猜你喜欢

转载自blog.csdn.net/weixin_41761478/article/details/88749506
今日推荐