CSS自定义原生下拉列表的样式

下拉列表的默认样式: 下面介绍自定义下拉列表的两种方法: 方法一: 用纯CSS自定义下拉列表的样式。 原理:将默认的下拉列表样式清除,自定义样式,并附上一张向右对齐的小箭头...

  • 0
  • 0
  • 王凯
  • 发布于 2020-07-07 17:17
  • 阅读 ( 445 )

CSS实现单、多行文本溢出时显示省略号

1、单行文本溢出: (1)截断溢出文本: ---同时设置以下属性: width:*px;overflow: hidden;text-overflow:clip;  white-space: nowrap;  (2)溢出文本显示省略号: ---同时设置以下属...

  • 0
  • 0
  • 王凯
  • 发布于 2020-07-07 17:11
  • 阅读 ( 518 )

如何用CSS自定义下划线的样式

问题描述: 使用:first-letter将首字母的font-size增大后,下划线text-underline也会变粗。 eg: <!doctype html><html><head><style type="text/css">.text{te...

  • 0
  • 0
  • 王凯
  • 发布于 2020-07-07 16:55
  • 阅读 ( 502 )

使用html2canvas 页面转图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面转图片</title> <link rel="stylesheet" href="https://c...

  • 0
  • 0
  • 全易
  • 发布于 2020-07-07 13:28
  • 阅读 ( 644 )

CSS+jQuery实现点击展开折叠菜单

<!DOCTYPE html> <html> <head> <title>折叠菜单</title> <style> body{ background:grey; font-family:Microsoft Yahei; color:whi...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-07 12:42
  • 阅读 ( 639 )

JavaScript阻止事件冒泡与事件捕获

1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 <body οnclick="alert('body')"><div οnclick="alert('div')"><a href="" οn...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-07 12:34
  • 阅读 ( 648 )

CSS3动画使用-transform: rotate(旋转) | scale(缩放) | translate(移动) | skew(倾斜)

1、CSS3 transform属性 应用于2D或3D转换,允许对元素进行倾斜、移动、缩放或旋转。 2D转换元素能够改变元素 x 和 y 轴,3D转换元素还能改变其 Z 轴。 属性: none定义不进行转换。matr...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-07 12:05
  • 阅读 ( 679 )

Css实现图片斜切效果

css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。 渐变图作为mask,置于另一张图片上面。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-07 11:51
  • 阅读 ( 702 )

windows下搭建Vue.js开发环境教程

1、安装node.js node.js的官方地址为:https://nodejs.org/en/download/。 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用程序,一路next就可以安装成功,建议不要安...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-07 11:41
  • 阅读 ( 660 )

HTML5离线存储的使用及原理注意事项

在用户没有与因特网连接时,可以正常访问站点或应用;在用户与因特网连接时,更新用户机器上的缓存文件。 原理: HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-07 11:38
  • 阅读 ( 663 )

JS实现仿淘宝鼠标移入图片右侧显示区域大图片

// 获取左侧图片路径后赋值给右侧大图片 如果左侧有多张小图片 请将获取的ID改成class,然否使用for循环,不会的去社会猿提问,我会在答案区留下demo,地址:www.shehuiyuan.com <!DOCTYPE html...

  • 1
  • 1
  • admin
  • 发布于 2020-07-06 23:34
  • 阅读 ( 827 )

javascript实现视频弹幕的效果

简单版本: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; he...

  • 0
  • 0
  • admin
  • 发布于 2020-07-06 22:42
  • 阅读 ( 438 )

javascript实现弹幕墙效果

刚开始入门前端,想仿照FreeCodeCamp中的一个项目制作简单的弹幕墙。创建一个弹幕显示墙,以及两个按钮,分别为“发送”和“清屏”,并在文本框中设置placeholder为“说点什么吧?”以提示用户在此输...

  • 0
  • 0
  • admin
  • 发布于 2020-07-06 22:25
  • 阅读 ( 447 )

jquery实现视频或直播弹幕效果

本文实例为大家分享了jquery直播弹幕展示的完整代码,供大家参考,具体内容如下 理论知识: 实现效果主要涉及jq对节点的操作,以及动画函数的使用… 思路: 1.获取到评论文本框的值...

  • 0
  • 0
  • admin
  • 发布于 2020-07-06 22:14
  • 阅读 ( 441 )

CSS实现鼠标移到图片上,图片变亮效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css3动画-图片开关灯阴影效果</title><style type="text/css">ul,li{list-style: none;}...

  • 0
  • 0
  • admin
  • 发布于 2020-07-06 21:45
  • 阅读 ( 435 )

解决CSS中<li>之间的空白间隔问题

有时候,我们需要将&lt;li&gt;横向排列,而又为了能设置其宽度和高度,为其设置display:inline-block,相邻&lt;li&gt;之间会出现8px的空白间隔,不是margin也不是padding。 &lt;html&gt;&lt;he...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-06 17:41
  • 阅读 ( 651 )

CSS中的visibility: hidden | collapse 与display: none的区别

对于CSS里的visibility属性,通常其值被设置成visible或hidden。 visibility: hidden相当于display:none,能把元素隐藏起来,但两者的区别在于: ① display:none 元素不再占用空间。...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-06 17:35
  • 阅读 ( 761 )

使用纯CSS绘制圆形、椭圆形、菱形、三角形

1、圆形: width: 50px;height: 50px;border-radius: 50%; // 50%~100%之间都行background: pink; 2、半圆形:(以左圆形为例) width: 50px;height: 100px;border-radius: 50px 0 0 50px;...

  • 0
  • 0
  • 李沁雪
  • 发布于 2020-07-06 13:09
  • 阅读 ( 670 )

使用CSS清除浮动的原理及效果

1、为什么会出现浮动? 浮动的产生的最根本的原因是为了实现文字环绕效果。 2、什么时候需要清除浮动? 清除浮动是为了清除使用浮动元素产生的影响。浮动的元素,高度会塌陷,而高度的塌陷...

  • 0
  • 0
  • 牟雪峰
  • 发布于 2020-07-06 12:56
  • 阅读 ( 616 )

JavaScript在new一个实例对象的四个过程

new对象: function Person(name, age) {  this.name = name;  this.age = age;   }  var person = new Person("Alice", 23);  new一个对象的四个过程: 1、创建一个空对象 var obj =...

  • 0
  • 0
  • 牟雪峰
  • 发布于 2020-07-06 12:51
  • 阅读 ( 686 )