精华内容
下载资源
问答
  • 常见的表单元素有哪些?各有什么属性? 】 大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。 表单元素是允许用户在表单中(比如:文本域,下拉列表,...

    这里是修真院前端小课堂,每篇分享文从

    【常见的表单元素有哪些?各有什么属性? 】

    大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。

    表单元素是允许用户在表单中(比如:文本域,下拉列表,单选框,复选框等等)输入信息的元素,最主要的作用就是收集信息。表单元素是页面中不可缺少的元素,在最新的H5中,表单元素也新增了一些属性,在页面构建中发挥了重要的作用。一般来说,表单包含如下几个部分:

    1. 提示信息:表单中包含的说明性文字

    2. 表单控件:包含了具体的表单功能项

    3. 表单域:容纳所有表单控件和提示信息

    常用的表单元素,包括:

    1. form: 定义供用户输入的表单。

    2. fieldset: 定义域。即输入区加有文字的边框。

    3. legend:定义域的标题,即边框上的文字。

    4. label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。

    5. input: 定义输入域,常用。可设置type属性,从而具有不同功能。

    6. textarea: 定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。

    7. button: 定义一个按钮。

    8. select: 定义一个选择列表,即下拉列表。

    9. option: 定义下拉列表中的选项。

    接下来是对这些表单元素的具体分析。

    ……

    name : 表单名称;action : 用来指定表单处理程序的位置(url);method : 定义表单结果从浏览器传送到服务器的方式,默认为"get"(也可以是post)

    name:控件名称;value:input控件默认文本值;size:input控件在页面中的显示宽度(必须是正整数)

    input常用type属性如下:

    1. text:单行文本输入框,可以通过正整数的size控制框长度。

    2. password:密码输入框。

    3. radio:单选按钮,同一组的单选按钮必须要有相同的name。

    4. checkbox:复选框,同一组的单选按钮必须要有相同的name。

    5. button:普通按钮。

    6. submit:提交按钮,每出现一次,一个 Submit 对象就会被创建。

    7. reset:重置按钮,会重置当前表单中全部的内容。

    8. image:图像形式的提交按钮,写法是“”。

    9. hidden:隐藏域,隐藏字段对于用户是不可见的。

    10. file:文件域,用于文件上传。

    选项1

    ……

    size:下拉菜单的可见选项数;multiple:多选。

    在最新的html5中,有一些表单的新增属性,多用于js,如

    datalist : 定义填写一个input时,提示几个option用于提示。可通过input的list特性与此元素作关联。

    output : 表示计算的结果。可通过for特性与其它能够影响运算的元素(如input)作关联。

    还有一些新增的type属性:

    1. search:input会呈现为搜索框(与text类型的唯一区别在于当鼠标覆盖时尾部出现叉号可快速清除输入的内容)。

    2. tel:编辑电话号码的控件,提交时换行符会自动从输入框中去掉。

    3. url:编辑url的控件,提交时换行符与首位的空格都将自动去除。

    4. email:可输入一个邮件地址。

    5. color : 选择颜色的控件。

    6. date : 选择年月日的控件。

    此外,还有time、datetime、datetime-local、month、week、number、range类型。

    html5中input新增的一些较常用的特性:

    1. list:关联datalist所用的该datalist的id(即datalistform外建立,通过list关联即可)。

    2. pattern:一个正则表达式,用于检查控件的值,可作用于text、search、tel、url、email类型的input。

    3. form:一个字符串(为关联的form表单的id),用于表明该input属于哪个form表单(作用类似list)。

    4. formmethod:表明使用GET还是POST,能覆盖form表单的method。仅在type为image或submit,且上面的form特性被设置的情况下才能使用。相似的有formtarget特性。

    5. readonly:一个boolean值,表明该input值是否能被用户修改,可用于信息展示等页面。作用于type为hidden、range、color、checkbox、radio、file、button的input将被忽略。

    6. maxlength:type为text、emal、search、password、tel或url(都为文本)时允许输入的最大字符个数。

    7. autocomplete:浏览器是否根据之前提交的输入情况对此input自动填值(即以option形式匹配之前的输入值),取值on或off,默认on。如在登陆页面不想显示上一个登陆的用户名等时,可设置为off。

    参考文献

    1. html元素-表单元素及实用属性:http://blog.csdn.net/qq_19865749/article/details/52490882" target="_blank"

    2. W3School HTML 表单 : http://www.w3school.com.cn/html/html_forms.asp" target="_blank"

    3. HTML5-input元素新特性 :http://blog.csdn.net/garvisjack/article/details/63683201#Menu3-date

    相关ppt见:https://ptteng.github.io/PPT/PPT/css-04-%E8%A1%A8%E5%8D%95.html#/

    腾讯视频:https://v.qq.com/x/page/o05246f2ah7.html

    问题整理

    1. 使用input上传文件或图片应该怎么办

    涉及到angularjs,可参考插件https://github.com/nervgh/angular-file-upload

    1. input为什么不使用闭合标签

    input为自闭和标签,详见W3C标准

    1. type="number"在输入框右侧有上下箭头可以加减数字,怎么去掉箭头?

    使用type="tel"时没有右侧上下箭头

    展开全文
  • 获取元素方法有很多,在本文将为大家详细介绍下使用jquery是如何做到,感兴趣朋友不要错过
  • layui 常见的表单元素

    2019-09-30 10:56:36
    -- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地 --> layui.use( ' laydate ' , function () { var laydate = layui.laydate; // 常规用法 laydate.render({ elem: ' #test1 ' }); /...

    第一步:引用文件

    效果图(日期、文件上传在下面):

    <form class="layui-form" action="">
    <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
    <select name="city" lay-verify="required">
    <option value=""></option>
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">杭州</option>
    </select>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
    <input type="checkbox" name="like[write]" title="写作">
    <input type="checkbox" name="like[read]" title="阅读" checked>
    <input type="checkbox" name="like[dai]" title="发呆">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
    <input type="checkbox" name="switch" lay-skin="switch">
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
    <input type="radio" name="sex" value="" title="">
    <input type="radio" name="sex" value="" title="" checked>
    </div>
    </div>
    <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
    </div>
    </form>
    
    <script>
    //Demo
    layui.use('form', function () {
    var form = layui.form();
    
    //监听提交
    form.on('submit(formDemo)', function (data) {
    layer.msg(JSON.stringify(data.field));
    return false;
    });
    });
    </script>

     

    日期选择效果图:

     

    <body>
    <!--layui各种日期对象-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规用法</legend>
    </fieldset>
    
    <div class="layui-form">
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">中文版</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
    </div>
    </div>
    </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>范围选择</legend>
    </fieldset>
    
    <div class="layui-form">
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">日期范围</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test6" placeholder=" - ">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">年范围</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test7" placeholder=" - ">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">年月范围</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test8" placeholder=" - ">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">时间范围</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test9" placeholder=" - ">
    </div>
    </div>
    </div>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>自定义格式</legend>
    </fieldset>
    
    <div class="layui-form">
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">请选择日期</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test11" placeholder="yyyy年MM月dd日">
    </div>
    </div>
    </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>同时绑定多个</legend>
    </fieldset>
    
    <div class="layui-form">
    <div class="layui-form-item">
    <div class="layui-inline">
    <input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
    </div>
    <div class="layui-inline">
    <input type="text" class="layui-input test-item" placeholder="yyyy-MM-dd">
    </div>
    </div>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>其它功能示例</legend>
    </fieldset>
    
    <div class="layui-form">
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">初始赋值</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test19" placeholder="yyyy-MM-dd">
    </div>
    </div>
    
    <div class="layui-inline">
    <label class="layui-form-label">不出现底部栏</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test22" placeholder="yyyy-MM-dd">
    </div>
    </div>
    
    
    <div class="layui-inline">
    <label class="layui-form-label" id="test25-1">点我触发</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test25" placeholder="yyyy-MM-dd">
    </div>
    </div>
    </div>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>其它主题</legend>
    </fieldset>
    
    <div class="layui-form">
    <div class="layui-form-item">
    <div class="layui-inline">
    <label class="layui-form-label">墨绿主题</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test29" placeholder="yyyy-MM-dd">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">自定义颜色主题</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test30" placeholder="yyyy-MM-dd">
    </div>
    </div>
    <div class="layui-inline">
    <label class="layui-form-label">格子主题</label>
    <div class="layui-input-inline">
    <input type="text" class="layui-input" id="test31" placeholder="yyyy-MM-dd">
    </div>
    </div>
    </div>
    </div>
    
    <script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('laydate', function () {
    var laydate = layui.laydate;
    //常规用法
    laydate.render({
    elem: '#test1'
    });
    //日期范围
    laydate.render({
    elem: '#test6'
    , range: true
    });
    //年范围
    laydate.render({
    elem: '#test7'
    , type: 'year'
    , range: true
    });
    //年月范围
    laydate.render({
    elem: '#test8'
    , type: 'month'
    , range: true
    });
    //时间范围
    laydate.render({
    elem: '#test9'
    , type: 'time'
    , range: true
    });
    //自定义格式
    laydate.render({
    elem: '#test11'
    , format: 'yyyy年MM月dd日'
    });
    //同时绑定多个
    lay('.test-item').each(function () {
    laydate.render({
    elem: this
    , trigger: 'click'
    });
    });
    //初始赋值
    laydate.render({
    elem: '#test19'
    , value: '1989-10-14'
    });
    //不出现底部栏
    laydate.render({
    elem: '#test22'
    , showBottom: false
    });
    //点我触发
    laydate.render({
    elem: '#test25'
    , eventElem: '#test25-1'
    , trigger: 'click'
    });
    //日期只读
    laydate.render({
    elem: '#test27'
    , trigger: 'click'
    });
    //墨绿主题
    laydate.render({
    elem: '#test29'
    , theme: 'molv'
    });
    //自定义颜色
    laydate.render({
    elem: '#test30'
    , theme: '#393D49'
    });
    //格子主题
    laydate.render({
    elem: '#test31'
    , theme: 'grid'
    });
    });
    </script>
    <!--layui各种日期对象-->
    </body>

     

    上传文件效果图:

     

    <body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>常规使用:普通图片上传</legend>
    </fieldset>
    
    <div class="layui-upload">
    <button type="button" class="layui-btn" id="test1">上传图片</button>
    <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
    </div>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>上传多张图片</legend>
    </fieldset>
    
    <div class="layui-upload">
    <button type="button" class="layui-btn" id="test2">多图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图:
    <div class="layui-upload-list" id="demo2"></div>
    </blockquote>
    </div>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>指定允许上传的文件类型</legend>
    </fieldset>
    
    <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
    <button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon"></i>只允许压缩文件</button>
    
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>设定文件大小限制</legend>
    </fieldset>
    
    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
    <div class="layui-inline layui-word-aux">
    这里以限制 60KB 为例
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>选完文件后不自动上传</legend>
    </fieldset>
    
    <div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
    <button type="button" class="layui-btn" id="test9">开始上传</button>
    </div>
    
    <script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
    <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
    <script>
    layui.use('upload', function () {
    var $ = layui.jquery
    , upload = layui.upload;
    
    //普通图片上传
    var uploadInst = upload.render({
    elem: '#test1'
    , url: '/upload/'
    , before: function (obj) {
    //预读本地文件示例,不支持ie8
    obj.preview(function (index, file, result) {
    $('#demo1').attr('src', result); //图片链接(base64)
    });
    }
    , done: function (res) {
    //如果上传失败
    if (res.code > 0) {
    return layer.msg('上传失败');
    }
    //上传成功
    }
    , error: function () {
    //演示失败状态,并实现重传
    var demoText = $('#demoText');
    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
    demoText.find('.demo-reload').on('click', function () {
    uploadInst.upload();
    });
    }
    });
    
    //多图片上传
    upload.render({
    elem: '#test2'
    , url: '/upload/'
    , multiple: true
    , before: function (obj) {
    //预读本地文件示例,不支持ie8
    obj.preview(function (index, file, result) {
    $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
    });
    }
    , done: function (res) {
    //上传完毕
    }
    });
    
    //指定允许上传的文件类型
    upload.render({
    elem: '#test3'
    , url: '/upload/'
    , accept: 'file' //普通文件
    , done: function (res) {
    console.log(res)
    }
    });
    upload.render({ //允许上传的文件后缀
    elem: '#test4'
    , url: '/upload/'
    , accept: 'file' //普通文件
    , exts: 'zip|rar|7z' //只允许上传压缩文件
    , done: function (res) {
    console.log(res)
    }
    });
    //设定文件大小限制
    upload.render({
    elem: '#test7'
    , url: '/upload/'
    , size: 60 //限制文件大小,单位 KB
    , done: function (res) {
    console.log(res)
    }
    });
    //选完文件后不自动上传
    upload.render({
    elem: '#test8'
    , url: '/upload/'
    , auto: false
    //,multiple: true
    , bindAction: '#test9'
    , done: function (res) {
    console.log(res)
    }
    });
    });
    </script>
    
    </body>

     

    转载于:https://www.cnblogs.com/bin521/p/8349868.html

    展开全文
  • 常规用法中文版范围选择日期范围年范围年月范围时间范围自定义格式请选择日期同时绑定多个其它功能示例初始赋值不出现底部栏点我触发其它主题墨绿主题自定义颜色主题格子主题layui.use('laydate', function () {var ...

    常规用法

    中文版

    范围选择

    日期范围

    年范围

    年月范围

    时间范围

    自定义格式

    请选择日期

    同时绑定多个

    其它功能示例

    初始赋值

    不出现底部栏

    点我触发

    其它主题

    墨绿主题

    自定义颜色主题

    格子主题

    laydate.render({

    elem:'#test1'});//日期范围

    laydate.render({

    elem:'#test6', range:true});//年范围

    laydate.render({

    elem:'#test7', type:'year', range:true});//年月范围

    laydate.render({

    elem:'#test8', type:'month', range:true});//时间范围

    laydate.render({

    elem:'#test9', type:'time', range:true});//自定义格式

    laydate.render({

    elem:'#test11', format:'yyyy年MM月dd日'});//同时绑定多个

    lay('.test-item').each(function () {

    laydate.render({

    elem:this, trigger:'click'});

    });//初始赋值

    laydate.render({

    elem:'#test19', value:'1989-10-14'});//不出现底部栏

    laydate.render({

    elem:'#test22', showBottom:false});//点我触发

    laydate.render({

    elem:'#test25', eventElem:'#test25-1', trigger:'click'});//日期只读

    laydate.render({

    elem:'#test27', trigger:'click'});//墨绿主题

    laydate.render({

    elem:'#test29', theme:'molv'});//自定义颜色

    laydate.render({

    elem:'#test30', theme:'#393D49'});//格子主题

    laydate.render({

    elem:'#test31', theme:'grid'});

    });

    展开全文
  • html5常见的表单元素

    千次阅读 2015-09-17 22:21:30
    在html5当中新增了很多的表单元素属性,这些属性使得我们开发人员在开发移动应用的时候更快,更方便。常用的表单属性form属性 <input type="submit" value="submit

    在html5当中新增了很多的表单元素属性,这些属性使得我们开发人员在开发移动应用的时候更快,更方便。

    常用的表单属性

    form属性

    <form id="formtest" action="formServlet" method="post">
            <input type="text" name="name">
            <input type="submit" value="submit">
     </form>
     <input type="text" name="pass" form="formtest">

    上面代码中,我们在form表单外部同样存在一个input的输入框,这个输入框和form表单是兄弟元素,在html4中,所有需要提交的元素都必须位于form表单当中,然而,在html5中,只需要为表单元素添加id值,并且在该表单外部的元素中使用form属性指定即可
    ps: 该效果需要在支持html5属性的浏览器中运行。

    placeholder属性

    placeholder属性的主要作用是当文本处于并未输入的状态并且内容为空的时候给出文本框的提示:

    <input type="text" name="name" placeholder="请输入用户名">

    autofocus属性

    autofocus属性用于指定当前控件自动获得焦点。

    <input type="text" name="name" placeholder="请输入用户名"  autofocus="autofocus">

    required属性

    required属性用来表明表单中的该元素在提交之前必须要有值,否则不能提交

     <input type="text" name="pass" form="formtest" required="required">

    在google浏览器下的效果如下:
    这里写图片描述

    html5移动表单类型

    <input type="email" name="email" placeholder="邮箱">
    <input type="url" name="url" placeholder="url">
    <input type="tel" name="tel"placeholder="电话">
    <input type="number" name="number" placeholder="数字">
    <input type="date" name="date" placeholder="日期">
    <input type="time" name="time" placeholder="时间">
    <input type="datetime" name="datetime" placeholder="datatime">
    <input type="month" name="month" placeholder="月份">
    <input type="range" min="30" max="50" placeholder="范围">

    Media Query移动设备样式

    什么是媒体查询,就是根据css3会根据当前的设备屏幕大小加载指定的css样式文件。这样,只需要维护一套页面代码,就可以在不同的设别,包括PC,以及移动端都可以适配。

    使用viewport

    viewport的主要作用是设置web页面适应移动设备的屏幕大小,在meta元素中定义,如下:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

    width=device-width 指定当前虚拟窗口大小为屏幕大小
    initial-scale=1.0 指定初始缩放比例
    maximum-scale=1.0 指定允许用户缩放的最大比例
    minimum-scale=1.0 指定允许用户缩放的最小比例
    user-scalable=no” 指定是否允许用户手动缩放

    Media Queries语法总结

    Media Queries的语法如下所示:
    必须以@media开头

    @media [media_query] media_type and media_feature

    其中:
    media_query表示需要过滤查询的关键字,可以使用not和only,如下:

    @media not screen and (min-width:480px)
    @media only screen and (min-width:480px)
    
    <!--
        max-device-width:表示设备的实际分辨率
        240px的宽度
    -->
    <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
    
    <!--
        大于240px,小于360px的宽度
    -->
    <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
    
    <!--
        大于360px,小于480px的宽度
    -->
    <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />
    
    <!--
        在纵向(portrait)时采用portrait.css来渲染页面
    -->
    <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 
    
    <!--
        在横向(landscape)时采用landscape.css来渲染页面
    -->
    <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />
    
    <!--
        另外还有使用逗号(,)被用来表示并列或者表示或,下面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。
    -->
    <link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
    

    媒体查询demo

    下面我简单的写一个简单的关于媒体查询的demo:

    在css中使用媒体查询

    新建view_port.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="high.css">
    </head>
    <body>
    
    </body>
    </html>

    这里我只是引入了一个high.css文件
    high.css

    * {
        margin: 0;
        padding: 0;
    }
    
    @media (min-width: 200px) {
        body{
            background-color: #ff0000;
        }    
    }
    
    @media (min-width: 800px) {
        body{
            background-color: #00ffff;
        }  
    }
    
    @media (min-width: 1024px) {
      body{
            background-color: #f98767;
        }  
    }
    
    @media (min-width: 1240px) {
     body{
            background-color: #985408;
        }  
    }

    在html内部嵌入媒体查询

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
         <style type="text/css">
         * {
            margin: 0;
            padding: 0;
         }
    
        @media (min-width: 200px) {
            body{
                background-color: #ff0000;
             }    
         }
    
    @media (min-width: 800px) {
        body{
            background-color: #00ffff;
        }  
    }
    
    @media (min-width: 1024px) {
      body{
            background-color: #f98767;
        }  
    }
    
    @media (min-width: 1240px) {
     body{
            background-color: #985408;
        }  
    }
         <style>
    </head>
    <body>
    
    </body>
    </html>

    通过link引入不同的css

    link.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" media="screen and (min-width:400px)" href="small.css" type="text/css" />
        <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:800px)" href="middle.css" type="text/css" />
        <link rel="stylesheet" media="screen and (min-width:1024px)" href="big.css" type="text/css" />
    </head>
    <body>
    
    </body>
    </html>

    small.css

    body{
            background-color: #ff0000;
    }    

    middle.css

    body{
            background-color: #00ff00;
    }    

    big.css

    body{
            background-color: #0000ff;
    }    

    简单说明一下,这里的所有相同的样式都使用了@media关键字包住了,在指定的屏幕上使用指定的样式,这里比如”min-width: 200px”表示当屏幕的宽度小于200px的时候使用的样式。效果如下:
    这里写图片描述

    可以看到,已经实现了在不同的屏幕大小上加载不同的不同的样式属性值了。

    展开全文
  • 1.input :标签用于搜集用户信息。 2.textarea标签定义多行文本输入控件。 3.select:定义一个选择列表,即下拉列表。 option:定义下拉列表中选项。
  • 常见的表单元素选中

    2015-08-10 14:30:00
    二:redio元素的选中 点击汉字即可以选中,但是后边一定是label标签才行 " radio " name= " shouji " id= " p1 " /> for = " p1 " style= " cursor: pointer " >苹果 " radio " name= " shouji " ...
  • 工具能让我们省很多事。Firebug,firefox浏览器一个插件,可以方便...Selenium的元素定位主要有以下几种方式。 find_element_by_id() find_element_by_name() find_element_by_class_name() find_elemen
  • 转载于:https://www.cnblogs.com/redheart/p/7296411.html...

空空如也

空空如也

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

常见的表单元素