SpringBoot--个人博客--8.页面设计与开发--博客管理列表页

8.1 笔记

<div class="right menu">
     <div class="ui dropdown item">
         <div class="text">
              <img class="ui avatar image" src="https://i.picsum.photos/id/1014/100/100.jpg">
              XXX
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
               <a href="#" class="item">注销</a>
          </div>
      </div>
 </div>


<script>
    $('.ui.dropdown')
        .dropdown({
            on:'hover'
        });
</script>

• 实现下拉列表（鼠标放上去显示列表）
  

<div class="ui selection dropdown">
    <input type="hidden" name="type">
    <i class="dropdown icon"></i>
    <div class="default text">分类</div>
    <div class="menu">
        <div class="item" data-value="1">错误日志</div>
        <div class="item" data-value="2">开发者手册</div>
    </div>
</div>

• 下拉框实现
  

<div class="field">
    <div class="ui checkbox">
         <input type="checkbox" id="recommend" name="recommend">
         <label for="recommend">推荐</label>
    </div>
</div>

• 通过id把label和checkbox关联起来，使点击文字“推荐”时也能打钩
  
  4.th、tr、td的区别
• tr：表中的“行”。每一行是一个tr（table row）
• th：表头，也就是每一列的标题（table head）
• td：表的每一个单元格
• th与td的区别是：th内部的文本样式为居中+粗体，td 内的文本样式为左对齐+普通文本

8.2代码

blogs.html

<!--二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" class="item">发布</a>
            <a href="#" class="teal active item">列表</a>
        </div>
    </div>
</div>


<!--中间内容-->
<div class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <form action="#" method="post" class="ui segment form">
            <div class="inline fields">
                <div class="field">
                    <input type="text" name="title" placeholder="标题">
                </div>

                <div class="field">
                    <div class="ui selection dropdown">
                        <input type="hidden" name="type">
                        <i class="dropdown icon"></i>
                        <div class="default text">分类</div>
                        <div class="menu">
                            <div class="item" data-value="1">错误日志</div>
                            <div class="item" data-value="2">开发者手册</div>
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div class="ui checkbox">
                        <input type="checkbox" id="recommend" name="recommend">
                        <label for="recommend">推荐</label>
                    </div>
                </div>

                <div class="field">
                    <button class="ui mini teal basic button"><i class="search icon"></i>搜索</button>
                </div>
            </div>
        </form>

        <table class="ui celled table">
            <thead>
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>推荐</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>刻意练习清单</td>
                    <td>认知升级</td>
                    <td>是</td>
                    <td>2020-02-12 11:00</td>
                    <td>
                        <a href="#" class="ui mini teal basic button">编辑</a>
                        <a href="#" class="ui mini red basic button">删除</a>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="6">
                        <div class="ui mini pagination menu">
                            <a href="#" class="item">上一页</a>
                            <a href="#" class="item">下一页</a>
                        </div>
                        <a class="ui mini right floated teal basic button">新增</a>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>