前端经验

javascript实现切割轮播效果,从左到右切换

效果: 完整demo代码: !DOCTYPE htmlhtml lang= en headmeta charset= UTF-8 titleDocument/titlescript src= https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js /scriptstyle.container {position: relative;width: 560 px;height: 300 px...

前端经验

CSS设置首字放大下沉及段首缩进2字符

1、CSS首字放大下沉 对首字进行放大下沉,需用到css的伪元素:first-letter。 !doctype html html head style type = text/css .text { font-family :Microsoft YaHei; font-size : 16px ; color : #676767 ; float :left; clear :...

前端经验

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

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

前端经验

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

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

前端经验

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

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

前端经验

使用html2canvas 页面转图片

!DOCTYPE html html lang = en head meta charset = UTF-8 title 页面转图片 / title link rel = stylesheet href = https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css integrity = sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T...

前端经验

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

!DOCTYPE html html head title 折叠菜单 / title style body { background :grey; font-family :Microsoft Yahei; color :white;} .types a { text-decoration :none; color :white;} .types ul { display :none;} .files ul { display :none;} / style...

前端经验

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

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