【开发心得】非美工做的html+ccs待办列表

实现效果

先上图，本人不是美工，所以对界面要求的，就不用吐槽了。由于平时做前台修改的工作不多，所以做一个记录，以备将来自己可以回头查查代码。

实现代码

这段代码很简单，虽然看着很多，其实只有几个标签是重要的。下面重点说一下自己的理解：

1. fieldset：这个标签可以把标签内部的元素框起来，可以看到设置了border: none以后，边框就隐藏了，感觉效果不错；
2. legend：这个标签可以作为标题体现，一开始做待办的时候没有这个标签，很难看；
3. float：这个标签是位置，有几个选项，我使用的是float:left，这样只要在上层标签足够宽的情况下，这些div会自动排列，见上面的图，可以做到响应式布局；
4. display：一开始没有注意这个标签，结果拷贝上去，发现待办不显示了，才知道这个标签是这个作用，有点小白；

<fieldset id="fieldToDoList" style="border: none;background-color: #eee;float:left">
    <legend class="mylegend">我的待办legend>
    <div id="toDoList" style="background-color: #eee;">
        <ol>
        <li><a class="1-btn 1-btn-plain" id="tdlRiskNumber" href="../Mf/ApprovalCheck">待##审批<span id="spanRiskNumber" style="color:red">span>个a>li>
        <li><a class="1-btn 1-btn-plain" id="tdlReviewNumber" href="../Mf/ApprovalCheck">待##审批<span id="spanReviewNumber" style="color:red">span>个a>li>
        <li><a class="1-btn 1-btn-plain" id="tdlEndNumber" href="../Mf/ApprovalCheck">待##审批<span id="spanEndNumber" style="color:red">span>个a>li>
        <li><a class="1-btn 1-btn-plain" id="tdlRefuseNumber" href="../Mf/ApprovalCheck">退回审批<span id="spanRefuseNumber" style="color:red">span>个a>li>
        <li><a class="1-btn 1-btn-plain" id="tdlReleaseNumber" href="../Mf/LoanRelease">待##<span id="spanReleaseNumber" style="color:red">span>个a>li>
        ol>
    div>
    
<fieldset id="fieldMessage" style="border: none; background-color: #eee;display: none;">
    <legend class="mylegend">我的广播legend>
    <input style="margin-left: 14px;" type="button" value="发送消息" onclick="sendMessage()" />
    <div class="form-group">
        <div class="myControls col-md-12">
            <textarea id="txtContext" name="txtContext" rows="6" class="form-control myInput">textarea>
        div>
    div>
fieldset>

fieldset>

总结

一个很简单的开发任务，不过里面涉及到的东西还不少。之前都是拷贝别人现成的代码，只要结果正确，就不深究了。这次耐心研究了一下，其实也没有花更多的时间，至少在下次再碰到类似问题或者项目的时候不会太白丁。
分享一下，更主要的提醒自己，今后无论做什么事情，都要把相关知识研究一下。