技术总结

  来到传智博客这个大家庭已经差不多一个月了，从一开始对编程的懵懵懂懂，再到现在对前端网页开发已经慢慢的了解。课程的流程的安排也颇为合理，一开始的HTML 的入门，然后对css的了解，也能简单的做一些div加css的网页框架。然后学习JavaScript，再到后来的jQuery，慢慢也明白一切都只是 在打基础，特别对我们这些0基础的同学来说特别的重要，在将来面对就业班的PHP中学到的知识点不再那么迷茫，学了一个月，感觉重点还是一个字“敲”，只 有多敲几次代码，你才能真正的认识它！

jquery.multiselect 多选下拉框实现

首先要引入Jquery

<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/style.css" />
<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/prettify.css" />

<script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquerymultiselect/prettify.js"></script>
<script type="text/javascript" src="~/Scripts/jquerymultiselect/jquery.multiselect.min.js"></script>

 

第二步：定义html代码

 <select name="Users" multiple="multiple" id="select_users">
                    @foreach (DModel.Model.User item in ViewBag.users)
                    {
                        if (Model.Users.Contains(item.Name))
                        {
                            <option value="@item.Name" selected="selected">@item.Name</option>
                        }
                        else
                        {
                            <option value="@item.Name">@item.Name</option>
                        }
                    }
                </select>

第三步：加载插件渲染

<script>
  
    $(function () {
        $("#select_users").multiselect({
            noneSelectedText: "==请选择==",
            checkAllText: "全选",
            uncheckAllText: '全不选',
            selectedList: 5
           
        });
    });


</script>

① :frist-line伪元素：用于向文本首行设置特殊样式，但是只能用于块级元素。

以下属性可应用于 “ frist-line ” 伪元素：
        font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear 。

② :first-letter伪元素：用于向文本首字母设置特殊样式，只能用于块级元素。

以下属性可应用于 “ first-letter ” 伪元素：
        font、color、background、margin、padding、border、text-decoration、vertical-align(仅当float为none时)、text-transform、line-height、float、clear 。

③ 伪元素和css类可以配合使用：p.article: first-letter { }，可以使所有 class 为 article 的段落的首字母样式改变 。

④ 多重伪元素：可以结合多个伪元素来使用。p: first-letter { }，p: first-line { }：段落的第一个字母根据p: first-letter具体样式显示，第一行其余文本根据p: first-line具体样式显示，段落中其余文本以具体段落设置的其他样式显示。

⑤ :before伪元素：可以在元素内容前面插入新内容 。

⑥ :after伪元素：可以在元素的内容之后插入新内容 。

⑦ 许多人喜欢给 blockquote 引用段添加巨大的引号作为背景，这种时候我们就可以用 :before 来代替 background 了，既可以给背景留下空间，还可以直接使用文字而非图片：