zoukankan      html  css  js  c++  java
  • h5+css3 考试题

    1、css3实现圆角属性?阴影?边框图片?

    答:border-radius: 百分比 和像素    box-shadow : 水平方向阴影    垂直方向的阴影   阴影模糊程度  颜色     border-image

    2、对文字添加阴影属性? 线性渐变? 旋转?  

    答 : text-shadow : 水平方向阴影    垂直方向的阴影   阴影模糊程度  颜色     linear-gradient( red  green) 默认方向为由上到下  至少两种颜色   ;  transform:rotate( 30deg)

    3、对背景图尺寸修改属性

    background-size

    background-origin

    background-clip

    4、伪类选择器和伪元素的区别?

         伪类是在原有存在的元素进行渲染,没有添加新元素;

         而伪元素创建了新元素,但却不是真实存在。

    5、简要说明H5拖拽的过程?

       <style>
            #box{
                 500px;
                height: 300px;
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="box" ondrop="drop(event)" ondragover ='over(event)'></div>
        <img src="./images/logo.png" alt="" draggable="true" ondragstart="start(event)" id="img1">
    </body>
    <script>
    
        // 1.获取元素
        var oBox = document.getElementById('box');
        var oImg = document.getElementById('img1');
    
    
        // 2.定义方法
        // 开始拖拽
        function start(event){
            // dataTransfer.setData    设置属性    
            console.log(event)
            // 相当于设置一个属性a用来存储img的id值。目的:方便再放下的时候可以知道放下的是谁
            event.dataTransfer.setData('a',event.target.id)
            // console.log(event.target.id)  //img1
            // console.log(this.id)
            // console.log(this)
        }
        
        // 准备放下
        function drop(event){
            event.preventDefault();//阻止事件的默认行为
           var data =  event.dataTransfer.getData('a')
            console.log(event.dataTransfer.getData('a'))
            document.getElementById('box').appendChild(document.getElementById(data))
        }
    
        // 已经放下
        function over(event){
            event.preventDefault();
        }
    
    
    
        // oImg.ondragstart = function () {  }
    </script>

    6、H5新增的表单属性有哪些?分别代表什么意思?

    (1)placeholder 占位符   

    (2)autofocus 获取焦点

    autofocus 属性是一个 boolean 属性.

    autofocus 属性规定在页面加载时,域自动地获得焦点。

    "First name" input 输入域在页面载入时自动聚焦:

    First name:<input type="text" name="fname" autofocus>

    (3)autocomplete 自动完成,用于表单元素,也可用于表单自身

    autocomplete 属性规定 form input 域应该拥有自动完成功能。

    当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

    提示: autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。

    注意: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color

    HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

    <form action="https://www.runoob.com/try/demo_source/demo-form.php" autocomplete="on"> 

    First name:<input type="text" name="fname"><br> 

    Last name: <input type="text" name="lname"><br> 

    E-mail: <input type="email" name="email" autocomplete="off"><br> 

    <input type="submit"> 

    </form>

    (4)name 指定表单项属于哪个form,处理复杂表单时会需要

    (5)novalidate 关闭验证,可用于<form>标签

    novalidate 属性是一个 boolean(布尔) 属性.

    novalidate 属性规定在提交表单时不应该验证 form input 域。

    <form action="https://www.runoob.com/try/demo_source/demo-form.php" novalidate> 

    E-mail: <input type="email" name="user_email"> 

    <input type="submit"> </form>

    (6) required 验证条件,必填项

    required 属性是一个 boolean 属性.

    required 属性规定必须在提交之前填写输入域(不能为空)。

    注意:required 属性适用于以下类型的 <input> 标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

    (7) pattern 正则表达式 验证表单

    pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

    注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, password.

    提示: 是用来全局 title 属性描述了模式.

    提示: 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容

    (8)maxlength 最大长度 minlength最小长度

    一般用于text文本属性

    7、什么是响应式设计?

     

  • 相关阅读:
    Oracle中的函数——Row_Number()
    Oracle中的函数——Concat()
    EM13C添加agent记录两个报错
    优化SQL集一
    只能在工作时间内更新某表
    WARNING OGG-01519
    plsql developer连接oracle 12.2报错 ora-28040 No matching authentication protocol
    Oracle 12.2 报错:ORA-12012: error on auto execute of job "SYS"."ORA$AT_OS_OPT_SY_7458"
    ORA-04021: timeout occurred while waiting to lock object
    记一次 oracle 12.2 RAC : Transaction recovery: lock conflict caught and ignored
  • 原文地址:https://www.cnblogs.com/guirong/p/13556694.html
Copyright © 2011-2022 走看看