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、什么是响应式设计?