精华内容
下载资源
问答
  • 1、属性选择器说明选取标签带有某些特殊属性的选择器常用E[attr] 选择选择具有attr属性的E元素<style> button{ color: red; } button[disabled]{ color: #cccccc; } </style> <button>...

    1、属性选择器

    • 说明
      选取标签带有某些特殊属性的选择器
    • 常用

    8d9599ab53ba2d03ca9abc495681cc71.png

    E[attr] 选择器

    选择具有attr属性的E元素

    <style>
        button{
            color: red;
        }
        button[disabled]{
            color: #cccccc;
        }    
    </style>
    
    
    <button>Button</button>
    <button>Button</button>
    <button disabled='disabled'>Button</button>
    <button disabled='disabled'>Button</button>

    E[attr="val"] 选择器

    选择具有attr属性且属性值等于val的E元素

    <style>
    input[type='search']{
    	color: pink;
    }
    </style>
    
    <input type="text" value="文本框" />
    <input type="text" value="文本框" />
    <input type="search" value="搜索框" />    
    <input type="search" value="搜索框" />

    E[attr^="val"] 选择器

    选择具有attr属性且属性值以val开头的E元素

    举例:

    <style>
    div[cladd^='']{
    	color: pink;
    }
    </style>
    
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>

    E[attr$="val"] 选择器

    选择具有attr属性且属性值以val结尾的E元素

    举例:

    div[cladd$='4']{
    	color: pink;
    }

    E[attr*="val"] 选择器

    选择具有attr属性且属性值含有val的E元素

    举例:

    div[cladd*='2']{
    	color: pink;
    }

    注意

    类选择器、属性选择器、伪类选择器权重都为10

    2、结构伪类选择器

    • 常用

    50d1d260c41e040aa71d336a273a5e59.png

    :first-child 选择器

    表示选择父元素的第一个子元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

    举例:

    ol > li:first-child{
      color: red;
    }

    :last-child 选择器

    选择的是元素的最后一个子元素。比如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器。

    举例:

    ol > li:last-child{
      color: red;
    }
    

    :nth-child(n) 选择器

    用来定位某个父元素一个或多个特定的子元素。其中“n”是其参数,不仅可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

    举例:

    ol li:nth-child(even){
      background: orange;
    }
    • 注意
      选择父元素里面的第n个孩子,不管父元素里面是否是同一种类型。
    • :empty 选择器
      表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格
      举例:
    p{
     background: orange;
     min-height: 30px;
    }
    p:empty {
      display: none;
    }

    :root 选择器

    从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。

    :root{
        background:pink;
    }
    /*等同于*/
    html {background:pink;}
    

    :nth-last-child(n)选择器

    从最后一个开始算索引。

    举例:

    ol > li:nth-last-child(1){
      color: blue;
    }
    

    E:first-of-type选择器

    匹配同级兄弟元素中的第一个E元素,of-type 选择指定类型的元素

    举例:

    div span:first-of-type{
        background-color: yellowgreen;
    }
    
     <div>
         <p>p标签</p>
         <span>span1</span>
         <span>span2</span>
         <span>span3</span>
         <span>span4</span>
    </div>

    E:last-of-type选择器

    匹配同级兄弟元素中的最后一个E元素,of-type 选择指定类型的元素

    举例:

    div span:last-of-type{
        background-color:rebeccapurple;
    }
     <div>
         <p>p标签</p>
         <span>span1</span>
         <span>span2</span>
         <span>span3</span>
         <span>span4</span>
    </div>

    E:nth-of-type选择器

    匹配同级兄弟元素中的最后一个E元素,of-type 选择指定类型的元素

    举例:

    div span:nth-of-type(2){
        background-color: blue;
    }
    <div>
         <p>p标签</p>
         <span>span1</span>
         <span>span2</span>
         <span>span3</span>
         <span>span4</span>
    </div>

    注意

    1. ul 里面中允许放li,所以nth-child和nth-of -type是一样的
    2. 伪类选择器权重为10

    3、伪元素选择器

    常用

    e9558b098db5e8bc21ecab4926037b7c.png

    E::before和E::after

    • 说明
      在E元素内部的开始位置和结束位创建一个元素,该元素为==行内元素==,且必须要结合content属性使用,因为在dom中看不见创建的元素,所以称为伪元素。
    • 语法
    div::befor {
      content:"开始";
    }
    div::after {
      content:"结束";
    }

    注意

    1. E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。
    2. ":" 与 "::" 区别在于区分伪类和伪元素
    3. 伪元素和标签选择器一样,权重为1

    E::first-letter

    • 说明
      文本的第一个单词或字(如中文、日文、韩文等)
    • 语法
    p::first-letter {
      font-size: 20px;
      color: hotpink;
    }

    E::first-line

    • 说明
      文本第一行
    • 语法
    /* 首行特殊样式 */
    p::first-line {
      color: skyblue;
    }

    E::selection

    • 说明
      可改变选中文本的样式
    • 语法
    p::selection {
      /* font-size: 50px; */
      color: orange;
    }
    展开全文
  • 许多人们每天的大部分时间都是待在办公室里,不停地干着手里的工作。但是在工作的过程中也经常会遇到很多的麻烦,就比如很多上班族每天都会收到各种纸质文件,文件中有着一些工作任务需要去做。而使用完的文件也没有...
    dbd091fe878faf1722e7e098711a45f1.png

    很多人每天都显得格外的匆忙和紧张,因为现在的工作形式发生了不小的改变,不仅工作节奏变得更快了,工作要求也变得很严格。许多人们每天的大部分时间都是待在办公室里,不停地干着手里的工作。但是在工作的过程中也经常会遇到很多的麻烦,就比如很多上班族每天都会收到各种纸质文件,文件中有着一些工作任务需要去做。而使用完的文件也没有时间去整理,只能丢放在一边,因此很多人的办公作桌显得非常的凌乱不堪。

    cebf676db9dada3afd3412b9e11c8338.png

    时间很短暂,很多人都把有限的时间用来完成工作任务,其他的事情自然很少去管。不过有着一个干净的工作环境还是很重要的,整洁利落的办公桌面看起来都会舒服一些,那么在工作时心情也会好不少。很多上班族会使用一些工具去整理桌面的杂乱,比如他们会使用一些文件夹或者文件框,把文件全部集中放置。文件框在工作中很常见,很多上班族们也会经常使用。最近发现一款得力四联文件框,觉得非常不错,今天就来为大家测评一下,看看使用效果如何。

    https://item.jd.com/100009225454.html

    时尚的外观,大气美观

    要说对这款得力文件框的第一印象,那就是它的外观设计了。浅灰的颜色,是它的主要色调。浅灰令人感到清新愉悦,可以让心情变得很轻松。用在文件框上,让文件框变得非常的美观,再配合着简约的设计,不禁让人联想到欧式的审美风格。把它放在办公桌上,也可以让工作格调提升不少。镂空的设计,有着良好的通风性,可以有效保护文件。各种贴心的设计融合在一起,可见设计者的细腻用心。

    f611caa433e33cd95dd7e241ee449a3c.png

    轻松的安装,使用起来更方便

    这款得力文件框有着折叠功能,要使用的时候,只需拉伸然后固定好卡扣,就可以快速的安装,能够节省不少的时间,减少工作的麻烦。独特的拉伸设计,也能有效的控制文件框的空间,满足文件不同的放置需求,既实现了有效利用,也省去了很多的桌面空间。当这款得力文件框的四联完全展开时,空间也大的惊人,即使文件很多,也可以很轻松的容纳,不同的文件可以放在不同的地方,使用时也会很方便。

    选材优质,细节更多

    既然是用来存放文件,那么文件框的稳定性自然也很重要。这款得力文件框自然也考虑到了这一点,它选用了加厚PP材质,表面非常的光滑平整,也使得整个文件框的结构非常稳固,不易发生形变,支持长期使用。同时,它还有着贴心的圆角设计,角度圆润光滑不会伤手,在日常的工作里使用起来也会非常的舒适,足见这款得力文件框在设计上的人性化。

    6b7789d6720b207aa0cd9d27f3d36dc1.png

    总结

    得力文件框在工作中非常的实用,不仅外观非常的时尚,使用起来也很方便。更为主要的是它还很注重细节,既可以让人感到贴心,也可以减少工作的烦恼。

    展开全文
  • 安装以后好久没再动过它,今天因为一个小问题重新打开,发现连快速生成html模块的方式都给忘记了,然后就从网上搜了一大堆,几乎都是通过!+Tab键或html:5 + Tab键的,结果一试在我这里全都没反应,我就纳了那个闷儿...

    其实sublime text3之前电脑安装过,但后面系统被迫刷机软件都没了,又全部重装。安装以后好久没再动过它,今天因为一个小问题重新打开,发现连快速生成html模块的方式都给忘记了,然后就从网上搜了一大堆,几乎都是通过!+Tab键或html:5 + Tab键的,结果一试在我这里全都没反应,我就纳了那个闷儿了,咋他们的都可以就我的不行,后面又翻了好一会儿才发现,我连Package Controll都没安装,更比说通过Emmet插件才能快速生成HTML模块了,当时只想说:emm...你们写方法的时候就不能多说上安装Package Controll再安装Emmet插件后才可以吗???这样太浪费搜索时间了。。。

    (再次说明:此文只为小白服务,本来就懵懂的时候不想因为一个小问题耽误大家那么久的时间)

    说回正题:下载好sublime text3以后,想使用快捷生成html的方法,必须首先安装Package Controll,然后再安装Emmet插件。

    1、Package Controll的安装分自动安装和手动安装,手动安装在官网https://packagecontrol.io/installation里可以找到然后下载,官网有详细的安装步骤:

    9dab35a6bdb7622a34d95c3aef7a9ca4.png

    我按照官网方法手动安装后,重启sublime后发现还是没有Package Controll,果断弃用换自动安装。

    自动安装方法:打开sublime后安装ctrl + ` ,然后把下面这段话拷贝进去之后按enter键即可。

    import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'the Sublime Text package manager' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

    此时再从perferences里查看,将会看到Package Controll

    c5d0347f881b59a951f1c3322a459982.png

    2、安装完Package Controll后再安装Emmet插件,该插件可以实现快速生成html模板。

    打开Package Controll然后选中它(注意此处要稍等一会儿才会弹出安装其他包的框

    f87816179c781cd83ed8eb27a5eda99e.png

    然后输入Emmet进行查找并进行下载

    ffb30173f3b7a622492826ab54882c40.png

    下载完成后,看到如下提示就表示安装成功:

    43776f96c2e3d6d8010acf1a142e286c.png

    此时,再输入html:5 + Tab将会自动快速生成如下模板(此处要注意你该界面右下角选择的是HTML而不是默认的text)

    8622668ceb40ff828bfe26197ab37a18.png

    好了,完成。

    展开全文
  • Html 选择时间框

    2020-05-26 08:24:38
    1\ <input type="datetime-local" id="JBStartTime" /> <script type="text/javascript"> $(function () { $("#JBStartTime").val("2020-05-24T00:00:00"); ...这里的type实际上是可以为“date”、...

    1\

    <input type="datetime-local" id="JBStartTime" />
    <script type="text/javascript">
    	$(function () {
    		$("#JBStartTime").val("2020-05-24T00:00:00");
    	})
    <script>
    

    这里的type实际上是可以为“date”、“week”、“month”、“time”、“datetime”和“datetime-local”
    2\

    <script src="~/plugin/My97DatePicker/WdatePicker.js"></script>
    <input readonly="readonly" type="text" onfocus="WdatePicker({ dateFmt: 'yyyy-MM-dd' })" class="Wdate" id="JBStartTime" name="EndDate" style="width: 150px;" />
    
    展开全文
  • 时间选择框.html

    万次阅读 2011-12-15 22:08:40
    HTML 代码 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档      请输入日期:     请输入日期: function ...
  • Layui 时间选择框

    千次阅读 2019-07-22 10:06:43
    Layui中 时间格式的输入框: html代码: <div class="layui-inline" style="width: fit-content;"> <label class="layui-form-label" style="width: fit-content;">选择日期:</label> <...
  • 本文实例讲述了JS实现漂亮的时间选择框效果。分享给大家供大家参考,具体如下: HTML代码部分: <html> [removed][removed] <body> (1)只选择日期 <input type=text name=date readOnly onClick=...
  • 输入框时间选择框

    千次阅读 2018-07-31 17:27:18
    &lt;%@ taglib prefix="c" uri="... %&...-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;  &lt;%--项目路径 -
  • 时间选择框datepicker的使用

    千次阅读 2019-05-06 20:30:39
    bootstrap框架中的一个重要内容,时间选择框datepicker。 如,想要实现选择从某天到某天的两个输入框: 在HTML中写如下内容 <div class="input-daterange date-picker input-group" id="datepicker"> <...
  • Layui中 时间格式的输入框:html代码:选择日期:---js代码:layui.use(['layer', 'form', 'table', 'laydate'], function () {var layer = layui.layer,$ = layui.jquery,form = layui.form,laydate = layui.laydate...
  • 此外,使用laydate时间选择框生效的关键一点是,laydate框架会给input输入框增加一个lay-key=“1”,1也可能是其他数字。 例如下图所示,js实现动态添加多行数据,并使用laydate动态创建多个时间选择框 HTML代码...
  • Layui中 时间格式的输入框:html代码:选择日期:---js代码:layui.use(['layer', 'form', 'table', 'laydate'], function () {var layer = layui.layer,$ = layui.jquery,form = layui.form,laydate = layui.laydate...
  • 时间 分钟 选择框

    2011-12-08 17:04:41
    功能预览:           &lt;html&gt; &lt;script language=javascript src="datetwo.js"&gt;&lt;/script&gt; &lt;table align="... (1)选择
  • 漂亮的时间选择框

    2011-12-08 17:09:54
    &lt;html&gt; &lt;script language=javascript src="dataone.js"&gt;&lt;/script&gt; &lt;table align="center"...(1)只选择日期 &lt;input type=
  • layui下拉选择框select禁止点击_设置禁用_设置不可操作的实现方法直接上代码: ...可以直接 放到下拉选择框 select 上 (HTML),这样默认渲染出来的效果就是这样的:...也可以用 jq 控制下拉框 select 禁用效果:l...
  • 时间插件,弹出时间选择框,可以选择本月,最近7天等  请看演示最后一个,可以选择的项目不同于一般的时间插件 演示     XML/HTML Code &lt;div class="container"&gt;   &...
  • select框选择时间

    千次阅读 2018-07-24 17:34:42
    &lt;...DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="...
  • css加js实现时间选择框

    千次阅读 2018-06-19 20:54:33
    html部分 &lt;input type='text' id="datepicker" &gt; css部分 @charset "UTF-8"; .pika-single { z-index: 9999; display: block; position: relative; width: 240px; ...
  • 本篇主要介绍跟后台数据绑定相关度不大的简单控件,直接写了一个详细的例子,需要说明的东西都在注释里面。先看示意图: ...DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
  • 今天找到一个显示日期时间选择框的js控件 简直是太帅了 http://www.my97.net/dp/demo/index.htm 转载于:https://www.cnblogs.com/bluemaplestudio/archive/2010/04/13/1710746.html...
  • 轻量级的时间插件 input时间输入选择框   演示     XML/HTML Code &lt;input type="text" id="mydate" gldp-id="mydate" /&gt;  &lt;div gldp-...
  • layui表单的下拉选择框select禁止点击/禁用/不可操作的实现方法直接上代码: 行业...可以直接 放到下拉选择框 select 上 (html),这样默认渲染出来的效果就是这样的:...也可以用 jq 控制下拉框 select 禁用效果:la...
  • html: <inputtype="text"id="datetime"> js: <script type="text/javascript"> $(function() { $('#date').datebox({ onShowPanel : function() {// 显示日趋选择对象后再触...
  • html如下: <el-date-picker v-model="value" type="datetimerange" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions0"> </el-...
  • 关于自定义控件或属性 [url=http://www.cnblogs.com/xiaoQLu/archive/2011/07/20/2112004.html]请转此...时间选择 [img]http://dl.iteye.com/upload/attachment/589888/29cf86f5-8846-309b-88c4-34dd9276ab6e.p...
  • ==》上次介绍了bootstrap框架日期时间 开始日期和结束日期选择 http://www.cnblogs.com/wjqblogs/p/4043198.html 今天又做了个只选择年月的日期选择,而且对其进行汉化,如下: 引入js 1 jQuery.min.js 2 ...
  • html: <view class="khinputbox"> <view class="jibeninfo"> <view class="jibentit">客户来访</view> </view> <view class="yilaifang"> <view class="yilaitit"> ...
  • 说明:代码取自网络,注释为笔者学习时添加! <!DOCTYPE html> <html> <head> <meta charset="utf-8" />...复选框选择</title> <style> body,dl,dt,dd,p{ /*清除...
  • <p>I am trying to populate a table with times the client has booked an appointment(eg....so I have a select box with the times of the day starting from 9:00AM to 7:00PM going up in 15minute steps(9:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,324
精华内容 529
关键字:

html时间选择框