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>1td>
                    <td>刻意练习清单td>
                    <td>认知升级td>
                    <td>是td>
                    <td>2020-02-12 11:00td>
                    <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>