个人博客【博客发布页】---学习08

一、思维导图

二、博客发布页

1、功能：

添加二级菜单
分类转载还是原创
控制赞赏是否显示
留言是否打开

2、创建博客发布页

3、编写导航栏

<!--导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui teal header item">管理后台</h2>
      <a href="#" class="active m-item item m-mobile-hide"><i class="mini home icon"></i>博客</a>
      <a href="#" class=" m-item item m-mobile-hide"><i class="mini idea icon"></i>分类</a>
      <a href="#" class="m-item item m-mobile-hide"><i class="mini tags icon"></i>标签</a>
      <div class="right m-item m-mobile-hide menu">
        <div class="ui dropdown  item">
          <div class="text">
            <img class="ui avatar image" src="https://unsplash.it/100/100?image=1005">
            李仁密
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" class="item">注销</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>
<div class="ui attached pointing menu">
  <div class="ui container">
    <div class="right menu">
      <a href="#" class="teal active item">发布</a>
      <a href="#" class="teal active item">列表</a>
    </div>
  </div>
</div>

4、运行查看效果

5、开发表单的原内容

• fluid 充满
• multiple 多选
• search 搜索
• type : ‘empty’ 非空
• required 必须输入
• error 错误信息
  

6、运行查看效果

7、编写底部部分

  <!--底部footer-->
  <footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced " >最新博客</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
            <a href="#" class="item m-text-thin">用户故事（User Story）</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
          <div class="ui inverted link list">
            <a href="#" class="item m-text-thin">Email：lirenmi@163.com</a>
            <a href="#" class="item m-text-thin">QQ：123456789</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
          <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2016 - 2017 Lirenmi Designed by Lirenmi</p>
    </div>

  </footer>

8、运行查看效果

9、验证标题非空

10、运行查看效果