HTML教程

html元素中checkbox与radio元素的样式在每个浏览器中显示的效果是不同的，为了统一它们在各个品牌浏览器中的显示样式，我们可以对它们做个简单的美化。html checkbox 元素美化实例：使用纯CSS代码就可以实现 checkbox 元素的美化，只需要隐藏掉 checkbox 选择元素，并使用css中的相邻兄弟选择器，来控制他

web页面中使用一些CSS动画效果，可以使用网站看着更加的炫酷。下面这篇博文由飞鸟慕鱼说一个关于网页导航栏实现下划线跟随滑动效果的方法，此方法全部由CSS代码实现，非常的简单方便。CSS导航栏下划线跟随滑动效果示例图：实现代码：下面示例代码，复制保存到本为为html格式的文件，即可查看！<style>.items {disp

在web页面中，如果要输入内容，就需要使用 input 或 textarea 元素，但它们只能输入或显示纯文本的内容，无论对一个带有CSS样式的内容进行显示或手机编辑的，所以DIV元素就提供了一个可编辑内容的属性 contenteditable 。HTML contenteditable 属性contenteditable 属性规定元素内

在web页面中 textarea 元素是默认可以通过鼠标来拖动大小的，但CSS也提供了一个 resize 属性，此属性可以用来设置 textarea 是否可以被鼠标拖动大小，以及拖动的方向等等。textarea 的 resize 属性resize：用来定义 textarea 元素是否可以被拖动大小。属性值：none：不能调整元素的尺寸；b

写前端的一个input输入框的样式时，需要修改一下 input placeholder属性值字体的颜色，网上查了一下非常的简单，但也要记录一下，方便以后查看。CSS 设置修改 placeholder 的样式的方法使用下面的CSS选择器，就可以对指定的输入框 placeholder 属性进行设置！选择器代码：input::-webkit-i

Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。sortable.js

记录几个CSS属性定义文本换行，不换行以及超出隐藏显示省略号的方法。CSS定义文本自动换行div{ word-wrap:break-word; word-break:normal;}CSS强制英文单词换行div{ word-break:break-all;}CSS强制不换行的方法div{ white-space:nowra

在使用可编辑的DIV标签做为输入框时，发现按回车后会自动生成一个div元素，如果想回车时直接生成一个br的标签该如何做呢？下面就介绍一种利用JQ实现可编辑DIV标签按回车后生成<br/>标签的方法。div可编辑时回车自动生成<br/>标签的方法在浏览器中，div可编辑时如果按回车，会自动生成一个DIV或P标签。可以

利用CSS样式中的 filter 属性可以设置图片元素的可视效果，再配合使用 brightness() 来调整图片的亮度，就可以实现图片元素变暗的效果。CSS实现图片变暗的方法示例代码：<!--正常图片--><img src="https://www.feiniaomy.com/zb_users/upload/

在css中，可利用transform属性实现垂直翻转效果，此属性可对DIV元素，图片元素都有效果。而这篇博文所要说的图片垂直效果也要使用这个CSS属性。CSS 实现图片垂直翻转的方法实现代码：<img src="https://www.feiniaomy.com/zb_users/upload/2020/08/202008

在前端web页面中，美化表格时一般都是使用隔行变色的方案。而这种方案实现起来也非常的简单....table表格隔行变色的方法table表格选择奇数行或偶数数要利用CSS中的 nth-child() 选择器，其 nth-child() 选择器中的值可以是数字，关键词或公式。nth-child(2n-1) //奇数行nth-child(odd

如果CSS中的 pointer-events 属性，设置其值为 none 的话，可以禁止 button 元素被点击，并且也可禁止其 JS 点击事件。CSS pointer-events 属性pointer-events：设置元素是否对指针事件做出反应语法：pointer-events: auto|none;可选值：auto：默认值，可以

在给别人调试网站时，在前端网站的头部代码中发现了一串 <base target="_blank"> 代码，虽然以前没少用这东西，但也有新手不太了解，下面就详细的说一下。HTML base 标签base：固定页面上的所有链接默认地址或默认打开方式的标签！语法：<base href="xxxxx

在css样式代码中，可以利用 text-indent 属性来设置文本块的首行缩进，使用方法也非常的简单，可以参考下面的示例。css text-indent 属性text-indent：为CSS样式代码中的一个属性，它规定文本块中首行文本的缩进大小，其默认值为0，可以将值设置为其父元素的百分比或指定的缩进长度。例：text-indent:

禁止 input 元素输入内容可以给其添加 disabled 和 readonly 属性，虽然这两个属性都可以禁止 input 的输入，但也是有一些差别的！disabled 属性禁止 input 输入input 元素添加 disabled 属性，可以使用 input 输入框变灰，并且不可把选中以及复制，在form提交时也不会提交其inpu

接到了个小活，其中就有一个需求是利用 CSS 样式代码将图片变灰，这个需求很只需要使用 CSS filter 属性中的 greyscale 值即可，下面具体的来说一下。css3 greyscale 样式css3 中 greyscale 是 filter 中的一种属性，可以对HTML元素进行灰色滤镜，它的用法也非常的简单，并可以适用于a，d

在前端web页中，一些input输入框尤其一些登录窗口的用户名输入框或搜索类型的输入框在鼠标点击或选中时会出现下拉的提示，这也是浏览器自带的内容自动填充完成功能，虽然这些提示可以很方便的让用户进行输入操作，但为了不爆露用户的个别隐私(密码或搜索记录等)，需要对指定的输入框进行禁止自动填充的操作。下面提供一种利用 html 标签属性来禁止浏

利用CSS可以画多边形状的，比如平行四形，三角形，四边形，五边形，六边形等。具体方法参考下面的内容吧。CSS画四边形的方法css里面最简单的就是画四边形了，这个经常用到，具体不再多说，直接上CSS代码。CSS代码：<style>.m {width: 200px;&

闲着没事研究了下利用CSS样式代码画三角形的方法，比如CSS画直角三角形，CSS画等边三角形等。CSS画三角形是利用了DIV元素的边框的宽度以及颜色来实现的，具体可以参考下面的几个CSS画三角形的方法。css定义边框的宽度以及颜色css代码：<style>.m{width: 0px; &

遇到了一个需要修改html页面中input与text元素中 placeholder 属性值颜色的需求，利用CSS很快的就解决了。解决方法如下。CSS 修改 placeholder 属性文字颜色的方法css代码：input::-webkit-input-placeholder{color:red;}input::-moz-placehold

在前端含有form表单的web页或表单提交后的重定向页面中，如果使用f5或手动刷新时浏览器为了防止表单重复二次提交会弹出“确认重新提交表单”的提示，为了页面对访客更加的友好，我们可以利用js脚本代码来去除这个浏览器的提交。js去掉浏览器“确认重新提交表单”提示的方法解决方法：在页面中添加以下js代码window.history.repla