master

分支 (8)

管理

管理

master

new-2

new-1

pc

prod

dev

test

develop

git-learn
/
_bem.html

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>BEM</title>
</head>

<body>

  <!-- 站点主干级: 站点任何页面都会存在的模块 -->
  <!-- .site__topbar+.site__header+.site__container+.site__footer+.site__pendant -->
  <div class="site__nav"></div>
  <div class="site__header"></div>
  <div class="site__container"></div>
  <div class="site__footer"></div>
  <div class="site__pendant"></div>

  <!-- 页面主干级 -->
  <!-- .page>header.page__header+main.page__container+footer.page__footer+.page__pendant -->
  <div class="page">
    <header class="page__header"></header>
    <main class="page__container"></main>
    <footer class="page__footer"></footer>
    <div class="page__pendant"></div>
  </div>

  <!-- 结构区块级 -->
  <!-- section.section>.section__wrapper>(.section__header>(.section__main>h2.section__title)+.section__aside)+.section__container -->
  <section class="section">
    <div class="section__wrapper">
      <div class="section__header">
        <div class="section__main">
          <h2 class="section__title"></h2>
        </div>
        <div class="section__aside"></div>
      </div>
      <div class="section__container"></div>
    </div>
  </section>

  <!-- 栅格布局级: 目前采用pure.css -->
  <!-- (.pure-u-1-4>.column)+(.pure-u-3-4>.column) -->
  <div class="pure-u-1-4">
    <div class="column-inner"></div>
  </div>
  <div class="pure-u-3-4">
    <div class="column-inner"></div>
  </div>

  <!-- 模块级 -->
  <!-- .module>(.module__header>(.module__main>h3.module__title)+.module__aside)+.module__container -->
  <div class="module">
    <div class="module__header">
      <div class="module__main">
        <h3 class="module__title"></h3>
      </div>
      <div class="module__aside"></div>
    </div>
    <div class="module__container"></div>
  </div>

  <!-- 组件 -->

  <!-- 组件尺寸 -->
  <!--小型 .component_small -->
  <!--默认 .component/.component_default -->
  <!--中等 .component_medium -->
  <!--大型 .component_large -->

  <!-- 组件交互感: 默认(default), 主要(primary), 次要(secondary), 提示信息(info), 成功信息(success), 警告信息(warning), 错误危险(danger), 禁用(disabled), Ligth(light), Dark(dark) -->

  <!-- 图文组件: 上下 -->
  <!-- .media__item.media-normal.media_medium>(.media__object>a[href="#"]>img.img-responsive[src="http://placeholder.qiniudn.com/220x132/ff9500/000" width="width" height="height"])+(.media__caption>h4.media__title+(.media__abstract>p)) -->
  <div class="media-normal">
    <div class="media__object">
      <a href="#">
        <img src="http://placeholder.qiniudn.com/220x132/ff9500/000" alt="" class="img-responsive" width="width" height="height">
      </a>
    </div>
    <div class="media__caption">
      <h4 class="media__title"></h4>
      <div class="media__abstract">
        <p></p>
      </div>
    </div>
  </div>

  <!-- 图文组件: 左右 -->
  <!-- .media__item.media-aside.media_large>(.pure-u-1-4>.column>.media__object>a[href="#"]>img.img-responsive[src="http://placeholder.qiniudn.com/220x132/ff9500/000" width="width" height="height"])+(.pure-u-3-4>.column>.media__caption>h4.media__title+(.media__abstract>p)+.attach>.attach__main+.attach__aside) -->
  <div class="media-aside media_large">
    <div class="pure-u-1-4">
      <div class="column-inner">
        <div class="media__object">
          <a href="#">
            <img src="http://placeholder.qiniudn.com/220x132/ff9500/000" alt="" class="img-responsive" width="width" height="height">
          </a>
        </div>
      </div>
    </div>
    <div class="pure-u-3-4">
      <div class="column-inner">
        <div class="media__caption">
          <h4 class="media__title"></h4>
          <div class="media__abstract">
            <p></p>
          </div>
          <div class="attach">
            <div class="attach__main"></div>
            <div class="attach__aside"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 图文组件: 遮罩 -->
  <!-- .media-cover.media_medium>(.media__object>a[href="#"]>img.img-responsive[src="http://placeholder.qiniudn.com/220x132/ff9500/000" width="width" height="height"])+(.media__caption>h4.media__title+(.media__abstract>p)) -->
  <div class="media-cover media_medium">
    <div class="media__object">
      <a href="#">
        <img src="http://placeholder.qiniudn.com/220x132/ff9500/000" alt="" class="img-responsive" width="width" height="height">
      </a>
    </div>
    <div class="media__caption">
      <h4 class="media__title"></h4>
      <div class="media__abstract">
        <p></p>
      </div>
    </div>
  </div>

  <!-- 图文组件: 扩展: 卡片式阴影 media_card, 图片伸缩 media_scale -->

  <!-- 组件附属元素 -->
  <!-- .attach>.attach__main+.attach__aside -->

  <div class="attach">
    <div class="attach__main"></div>
    <div class="attach__aside"></div>
  </div>

  <!-- 按钮组件: 默认颜色填充, button-outline线条状 -->

  <!-- btn.btn.btn_primary.btn_medium[type="button"]{按钮} -->
  <!-- btn.btn.btn-outline_primary.btn_medium[type="button"]{线条按钮} -->

  <button class="btn btn_primary" type="button">按钮</button>
  <button class="btn btn-light_primary" type="button">线条按钮</button>

  <!-- 表单组件 -->
  <!-- form.form.form_normal>(.form__wrapper>label.form__label{标题}+input.form__input[autocomplete="off" placeholder="placeholder"]+span.form__required-field{必填项}+)+(.checkbox__wrapper>input.form__checkbox[type="checkbox"]+label.form__label{标题})+(.radio__wrapper>label.form__label{标题}+label.radio__label[for="id"]>input.form__radio[type="radio" id="id" name="name"])+(.select__wrapper>label.form__label{标题}+select.form__select>option[value="value"]{选项})+.btn__wrapper -->
  <form action="post" class="form form_default">
    <div class="form__wrapper">
      <label for="" class="form__label">标题</label>
      <input type="text" class="form__input" autocomplete="off" placeholder="placeholder">
      <span class="form__required-field">必填项</span>
    </div>
    <div class="checkbox__wrapper">
      <input type="checkbox" class="form__checkbox">
      <label for="" class="form__label">标题</label>
    </div>
    <div class="radio__wrapper">
      <label for="" class="form__label">标题</label>
      <label for="id" class="radio__label">
        <input type="radio" class="form__radio" id="id" name="name">
      </label>
    </div>
    <div class="select__wrapper">
      <label for="" class="form__label">标题</label>
      <select class="form__select">
        <option value="value">选项</option>
      </select>
    </div>
    <div class="btn__wrapper"></div>
  </form>

  <form action="post" class="form form_primary">
    <div class="form__wrapper">
      <label for="" class="form__label">标题</label>
      <input type="text" class="form__input" autocomplete="off" placeholder="placeholder">
      <span class="form__required-field">必填项</span>
    </div>
    <div class="checkbox__wrapper">
      <input type="checkbox" class="form__checkbox">
      <label for="" class="form__label">标题</label>
    </div>
    <div class="radio__wrapper">
      <label for="" class="form__label">标题</label>
      <label for="id" class="radio__label">
        <input type="radio" class="form__radio" id="id" name="name">
      </label>
    </div>
    <div class="select__wrapper">
      <label for="" class="form__label">标题</label>
      <select class="form__select">
        <option value="value">选项</option>
      </select>
    </div>
    <div class="btn__wrapper"></div>
  </form>

  <!-- 表单验证提示 -->
  <!-- span.form__verify-msg.has-msgType>i.iconfont.icon-msgType+{提示信息}-->
  <!-- msgType: error, success, info -->
  <span class="form__verify-msg has-msgType"><i class="iconfont icon-msgType"></i>提示信息</span>

  <!-- 标签、徽章组件 -->
  <!-- apan.label.label_primary{标签} -->
  <!-- span.badge[title="9条未读信息"]{9} -->
  <apan class="label label_primary">标签</apan>
  <span class="badge" title="9条未读信息">9</span>

  <!-- 面包屑组件 -->
  <!-- .breadcrumb>(a.breadcrumb__item[href="#"]{栏目}+span.breadcrumb__separator{&gt;})+(a.breadcrumb__item.breadcrumb__item_active[href="javascript:void(0);"]{当前栏目}) -->
  <div class="breadcrumb">
    <a class="breadcrumb__item" href="#">栏目</a>
    <span class="breadcrumb__separator">&gt;</span>
    <a class="breadcrumb__item breadcrumb__item_active" href="javascript:void(0);">当前栏目</a>
  </div>

  <!-- 筛选标签组件 -->
  <!-- .filter>h4.filter__title{标题}+.filter__list>a.filter__item[href="javascript:void(0);"]*5{过滤标签} -->
  <div class="filter">
    <h4 class="filter__title">标题</h4>
    <div class="filter__list">
      <a class="filter__item filter__item_active" href="javascript:void(0);">过滤标签</a>
      <a class="filter__item" href="javascript:void(0);">过滤标签</a>
      <a class="filter__item" href="javascript:void(0);">过滤标签</a>
      <a class="filter__item" href="javascript:void(0);">过滤标签</a>
      <a class="filter__item" href="javascript:void(0);">过滤标签</a>
    </div>
  </div>

  <!-- 展开折叠组件 -->
  <!-- .fold.fold_active>.fold__container+.fold__toggle>span.fold__state+i.iconfont.icon-fold_active -->
  <div class="fold fold_active">
    <div class="fold__container"></div>
    <div class="fold__toggle"><span class="fold__state">展开/折叠</span><i class="iconfont icon-fold_active"></i>
    </div>
  </div>

  <!-- 轮播图组件 -->
  <!-- .slide>(.swiper-container>.swiper-wrapper>.swiper-slide*3)+.swiper-pagination+.swiper-pager.swiper-prev+.swiper-pager.swiper-next -->
  <div class="slide">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-pager swiper-prev"></div>
    <div class="swiper-pager swiper-next"></div>
  </div>

  <!-- 社交(收藏/喜欢/关注/点赞)之类交互组件，再抽象一下，就是点击一个组件，此组件内部有文字切换，对应图标切换，甚至数字增删 -->
  <!-- .social-tag>i.iconfont.social-tag__icon[data-icon="默认图标" data-icon-active="激活图标"]+span.social-tag__text[data-text="操作" data-text-active="已操作" data-text-hover="取消操作"]+span.social-tag__count[data-count="操作数"]{操作数} -->
  <div class="social-tag social-tag_active">
    <i class="iconfont social-tag__icon" data-icon="" data-icon-active=""></i>
    <span class="social-tag__text" data-text="收藏" data-text-active="已收藏" data-text-hover="取消收藏"></span>
    <span class="social-tag__count" data-count="126">126</span>
  </div>

  <!-- 行政区域组件 -->


  <!-- 下拉组件 -->
  <!-- .dorpdown>(.dropdown__toggle>h4.dropdown__title)+(.dropdown__container) -->
  <div class="dorpdown">
    <div class="dropdown__toggle">
      <h4 class="dropdown__title"></h4>
    </div>
    <div class="dropdown__container"></div>
  </div>

  <!-- 弹出组件 -->
  <!-- .modal>(.modal__header>h4.modal__title+span.modal__close{&times;})+.modal__container+.modal__footer -->
  <!-- .modal__backdrop -->
  <!-- body.modal_in -->

  <body class="modal_in"></body>
  <div class="modal__backdrop modal__backdrop_active"></div>
  <div class="modal modal_active">
    <div class="modal__header">
      <h4 class="modal__title"></h4>
      <span class="modal__close">&times;</span>
    </div>
    <div class="modal__container"></div>
    <div class="modal__footer"></div>
  </div>

  <!-- 弹出警告组件 -->
  <!-- .alert.alert_primary -->
  <!-- .alert.alert_success>a.alert__link[href="#"]{链接}+span.alert__close{&times;} -->
  <div class="alert alert_primary"></div>
  <div class="alert alert_success"><a href="#" class="alert__link">链接</a><span class="alert__close">&times;</span>
  </div>

  <!-- 图片详情 -->
  <!-- 体积太大，不展开 -->

  <!-- 视频详情 -->
  <!-- 体积太大，不展开 -->

  <!-- 文章详情 -->
  <!-- .article__wrapper>(article.article__main>h1.article__headline{文章标题}+(.article-attach>.article-attach__main{文章元信息}+.article-attach__aside{其它操作})+(.article__keywords>a.label.label_primary[href="#"]{关键字}*3)+(.article__brief>p{文章摘要})+(section.article__container>(figure.article-media>img.img-responsive+figcaption.article-media__caption{引用图片说明})+(h6{h1~h6标题})+(p{正常段落样式，}>strong{内部着重文字})+(blockquote>p{引用的段落内容})))+(.article__copyright{文章转载及版权说明})+(.article__social{社交化分享})+(.article__reminder>{站内推广})+(.comment{评论系统})+(.article__recommend>{内容推荐}) -->
  <div class="article__wrapper">
    <article class="article__main">
      <h1 class="article__headline">文章标题</h1>
      <div class="article-attach">
        <div class="article-attach__main">文章元信息</div>
        <div class="article-attach__aside">其它操作</div>
      </div>
      <div class="article__keywords">
        <a href="#" class="label label_primary">关键字</a>
        <a href="#" class="label label_primary">关键字</a>
        <a href="#" class="label label_primary">关键字</a>
      </div>
      <div class="article__brief">
        <p>文章摘要</p>
      </div>
      <section class="article__container">
        <figure class="article-media">
          <img src="" alt="" class="img-responsive">
          <figcaption class="article-media__caption">引用图片说明</figcaption>
        </figure>
        <h6>h1~h6标题</h6>
        <p>正常段落样式，<strong>内部着重文字</strong>
        </p>
        <blockquote>
          <p>引用的段落内容</p>
        </blockquote>
      </section>
    </article>
    <div class="article__copyright">文章转载及版权说明</div>
    <div class="article__social">社交化分享</div>
    <div class="article__reminder">站内推广</div>
    <div class="comment">评论系统</div>
    <div class="article__recommend">内容推荐</div>
  </div>

  <!-- 文字列表 -->
  <!-- ul.news-list>li.news-list__item*5>a[href="#"]{列表项 $} -->
  <ul class="news-list">
    <li class="news-list__item"><a href="#">列表项 1</a>
    </li>
    <li class="news-list__item"><a href="#">列表项 2</a>
    </li>
    <li class="news-list__item"><a href="#">列表项 3</a>
    </li>
    <li class="news-list__item"><a href="#">列表项 4</a>
    </li>
    <li class="news-list__item"><a href="#">列表项 5</a>
    </li>
  </ul>

  <!-- 分页器 -->
  <!-- ul.pager>(li.pager__item.pager__prev.pager__disabled>a.pager__link[href="javascript:void(0)"]{上一页})+(li.pager__item.pager__item_active>a.pager__link[href="javascript:void(0)"]{1})+(li.pager__item*4>a.pager__link[href="javascript:void(0)"]{$@2})+(li.pager__item.pager__next>a.pager__link[href="javascript:void(0)"]{下一页}) -->
  <ul class="pager">
    <li class="pager__item pager__prev pager_disabled"><a class="pager__link" href="javascript:void(0)">上一页</a>
    </li>
    <li class="pager__item pager__item_active"><a class="pager__link" href="javascript:void(0)">1</a>
    </li>
    <li class="pager__item"><a class="pager__link" href="javascript:void(0)">2</a>
    </li>
    <li class="pager__item"><a class="pager__link" href="javascript:void(0)">3</a>
    </li>
    <li class="pager__item"><a class="pager__link" href="javascript:void(0)">4</a>
    </li>
    <li class="pager__item"><a class="pager__link" href="javascript:void(0)">5</a>
    </li>
    <li class="pager__item pager__next"><a class="pager__link" href="javascript:void(0)">下一页</a>
    </li>
  </ul>

  <!-- 评论模块 -->

  <!-- .comment-post>form.comment-form[method="post"]>(.form__wrapper>label.form__label.hidden[for="commentFormInput"]+textarea#commentFormInput.form__input[name="commentFormInput" rows="4" placeholder="评论..."])+(.comment-attach>(.comment-attach__main>.comment__emotion)+(.comment-attach__aside>(.captcha>label.captcha__label.hidden[for="captchaInput"]{验证}+input#captchaInput.captcha__input[type="text" autocomplete="off"]+.captcha__media+(.captcha__refresh>i.iconfont.icon-captcha-refresh+span.captcha__text.hidden{看不清换一张}))+.btn__wrapper>btn.btn.btn_primary{评论})) -->

  <div class="comment-post">
    <form action="" class="comment-form" method="post">
      <div class="form__wrapper">
        <label for="commentFormInput" class="form__label hidden"></label>
        <textarea id="commentFormInput" cols="30" rows="4" class="form__input" placeholder="评论..."></textarea>
      </div>
      <div class="comment-attach">
        <div class="comment-attach__main">
          <div class="comment__emotion"></div>
        </div>
        <div class="comment-attach__aside">
          <div class="captcha">
            <label for="captchaInput" class="captcha__label hidden">验证</label>
            <input type="text" id="captchaInput" class="captcha__input" autocomplete="off">
            <div class="captcha__media"></div>
            <div class="captcha__refresh"><i class="iconfont icon-captcha-refresh"></i><span class="captcha__text hidden">看不清换一张</span>
            </div>
          </div>
          <div class="btn__wrapper">
            <button class="btn btn_primary">评论</button>
          </div>
        </div>
      </div>
    </form>
  </div>

  <!-- .comment-list>section.comment__item>(.comment__avatar>a[href="#"]>img.img-responsive[src="http://temp.im/72x72/ff2d55/000" width="width" height="height"])+(.comment__wrapper>.comment__container>(a.comment__author[href="#"]{评论人}+span.comment__content{一条回复内容})+(.comment__attach>span.comment__time{评论时间}+(span.comment__social>i.iconfont.icon-comment-praise[title="赞一个"]+i.comment__count{计数})+(span.comment__reply>i.iconfont.icon-comment-reply[title="回复"]))+.comment-nest>section.comment__item>(.comment__avatar>a[href="#"]>img.img-responsive[src="http://temp.im/72x72/ff2d55/000" width="width" height="height"])+(.comment__wrapper>.comment__container>(a.comment__author[href="#"]{评论人}+span.reply__separator{回复了}+a.comment__author[href="#"]{被评论人}+span.comment__content{一条回复内容})+(.comment__attach>span.comment__time{评论时间}+(span.comment__social>i.iconfont.icon-comment-praise[title="赞一个"]+i.comment__count{计数})+(span.comment__reply>i.iconfont.icon-comment-reply[title="回复"])))) -->
  <div class="comment-list">
    <section class="comment__item">
      <div class="comment__avatar">
        <a href="#">
          <img src="http://temp.im/72x72/ff2d55/000" alt="" class="img-responsive" width="width" height="height">
        </a>
      </div>
      <div class="comment__wrapper">
        <div class="comment__container">
          <a href="#" class="comment__author">评论人</a>
          <span class="comment__content">一条回复内容</span>
          <div class="comment__attach">
            <span class="comment__time">评论时间</span>
            <span class="comment__social"><i class="iconfont icon-comment-praise" title="赞一个">赞</i><i class="comment__count">计数</i></span>
            <span class="comment__reply"><i class="iconfont icon-comment-reply" title="回复">回复</i></span>
          </div>
          <div class="comment-nest">
            <section class="comment__item">
              <div class="comment__avatar">
                <a href="#">
                  <img src="http://temp.im/72x72/ff2d55/000" alt="" class="img-responsive" width="width" height="height">
                </a>
              </div>
              <div class="comment__wrapper">
                <div class="comment__container">
                  <a href="#" class="comment__author">评论人</a>
                  <span class="reply__separator">回复了</span>
                  <a href="#" class="comment__author">被评论人</a>
                  <span class="comment__content">一条回复内容</span>
                  <div class="comment__attach">
                    <span class="comment__time">评论时间</span>
                    <span class="comment__social"><i class="iconfont icon-comment-praise" title="赞一个">赞</i><i class="comment__count">计数</i></span>
                    <span class="comment__reply"><i class="iconfont icon-comment-reply" title="回复">回复</i></span>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 加载更多 -->
  <!-- .btn.btn_load-more>i.iconfont.icon-load-more+{加载更多} -->
  <div class="btn btn_load-more"><i class="iconfont icon-load-more"></i>加载更多</div>

</body>

</html>