当前位置: 首页  - 标签“CSS“ - 列表 免费服务器领取!

CSS

前端设计

解决移动端滑动验证时页面跟随移动的问题

在写一个移动端网页的滑动验证时,如果手指在屏幕上滑动会触发手机自带的事件。比如手机切屏或返回上一页等等。查了下百度,发现有两种网页端的方法可以阻止移动端左右滑动触发上一下和下一页的操作。阻止移动端滑动触发上一页下一页的方法方法1:CSS方法:html{touch-action:none;touch-action:pan-y;}方法2:使用

前端设计

css 修改placeholder属性文字颜色的方法

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

前端设计

css中几种内容垂直居中的方法

在css+div的布局中,有时候需要内容在div中的位置进行垂直居中。下面提供了几种方法可供参考!css内容垂直居中的方法1、设置CSS行高属性使用内容垂直居中设置 css line-height 属性的值与DIV元素的height的值相同,可以使DIV内的内容垂直居中!HTML代码:<!DOCTYPE html><ht

前端设计

css 获取浏览器可视窗口的宽度与高度的方法

在web页面中,如果想设置一个div元素的高度与高度等于浏览器可视窗口的宽度与高度的话一般都是要借助js脚本来进行设置,除了js脚本外css样式代码中也提供了一个好的方法。css 获取浏览器窗口的宽度与高度的方法在桌面端(这里不涉及移动端),浏览器的可视区域也被称为“视口“,而它的宽度与高度也有相应的单位来表示,分别为"vw&q

前端设计

CSS定义字母全部大写或小写的方法

在css样式代码中有一个 text-transform 属性,此属性可以强制改变其控制的元素中内容中字母的大小状态,具体的使用方法参考下面的内容。CSS text-transform 属性text-transform:控制文本中字母的大小写。属性值:none:默认,展示默认的文本内容!capitalize:每个英文单词以大字字母开头!u

前端设计

CSS隐藏文字的方法

在前端web的一些特殊场合下,有时假需要对HTML元素中的文字讲行隐藏,如果使用JS脚本的话,可以很方便实现文字的隐藏,但如果使用CSS样式来搞呢。下面就说二种利用CSS轻松实现隐藏元素文字的方法。CSS隐藏HTML元素文字的方法1、使用css font-size 属性来隐藏文字css font-size属性是控制文字大小的方法,如果将其

前端设计

javascript隐藏鼠标的方法

今天发现项目中有一个很有意思的小功能,就是鼠标移入某个区域后自动隐藏。虽说这个小需求非常的罕见,但写起来也很简单,下面是一个示例的代码,大家可以参考一下!javascript 隐藏鼠标的方法隐藏鼠标的示例源码<html><head><title>隐藏鼠标的示例</title><styl

前端设计

html页面仿黑客帝国代码雨源码示例

今天无意间看到抖音上有人直播用html加JS脚本写了一个仿黑客帝国电影中的代码雨的特效,就觉的很稀奇,就在网上找了一个源码然后自己修改了一下,感觉效果还可以,就分享一下。html+js使用黑客帝国代码雨的效果下面是使用黑客帝国代码雨的源码,直接复制到本地,保存为后缀为.html文件即可!<html><head>&l

前端设计

css3实现文本内容禁止选中的方法

今天在浏览网页的时候发现有些网页上的内容无法使用鼠标来进行选中,就深入的研究了下,发现是使用CSS的 user-select 属性来现实的,就记录一下。css user-select: 属性介绍user-select:规定用户用鼠标在页面上是否可以选中文字、图片等值:none:禁止用户选中。text:对用户的选择没有限制。all:目标元素

前端设计

禁止 textarea 调整大小的方法

HTML页面中的 textarea 输入框是默认在右下角显示一个小三角的,用鼠标拖动小三角是可以调整 textarea 输入框的大小的。如果html的页面布局比较复杂,那么调整 textarea 大小会破坏掉页面整体布局的完整性,那么如何来禁止 textarea 调用大小呢?可以参考下面的方法。禁止 textarea 调用大小的方法css

前端设计

js压缩与格式化CSS代码的方法

网上有很多CSS压缩与格式化的工具,就想着模仿人家的功能自己写个专门用来压缩CSS代码的小工具。尝试了一下用JS脚本来写,没想到压缩后的效果还是可以的。js压缩CSS代码的方法JS自定义压缩CSS代码的函数function yasuoCss (s) {s = s.replace(/\/\*(.|\n)*?\*\//g, "&qu

后端开发

php实现压缩css文件的方法

前端web中css样式文件如果压缩后再进行传输,可以大大的加快网页的载入速度同时也可以节省服务器的宽带资源,下面提供了两种php压缩css文件的方法,各位都可以尝试一下。php直接压缩css文件在后台可以使用单独的一个php文件对所有的css样式文件进行压缩处理,只需要去除css代码中的空格,换行,注释等等!php代码:<?php

前端设计

CSS隐藏滚动条的方法

web前端中,在正常的情况下如果隐藏滚动条,则会导致页面无法上下或左右滚动。但如果想达到隐藏滚动条又想不妨碍页面的滚动该如何做呢?下面我们就说一说如何使用CSS代码来达到隐藏滚动条的目的!firefox(火狐)浏览器CSS隐藏滚动条的方法对于火狐浏览器隐藏滚动条,只需要将滚动条的宽度设置为none即可!CSS代码:scrollbar-wi

前端设计

去掉input(number类型)输入框箭头的方法教程

在web前端中,number类型的input输入框在获得鼠标焦点的情况下,会出现两个向上和向下的箭头。虽然箭头可用于input输入框中的数字增大和减小,但在某些特定的场景中反而会让用户产生错乱的感觉。为了避免此情况的发生,我们可以使用css样式来隐藏掉 input 中的箭头,下面来说说方法!number类型input输入框去掉箭头的教程1

前端设计

禁止 input 自动弹出下拉框的方法

经常设计 form 表单的开发应该知道,用户在浏览器中向表单输入信息的时候会被 input 记录下来,以后每次双击 input 文本框时都会展示以前输入过的信息,虽然这样很方便,但会暴露用户的隐私数据。那如何禁止 input 输入框不记录用户输入的信息呢?下面就来说一下!input 中的 autocomplete 属性autocomple

前端设计

js实现鼠标拖动div改变其位置的教程

今天接到一个小小的需求,就是利用 JS 来实现鼠标拖动一个div,来实现其位置的改变。虽然说要求看着很简单,但实现起来还是比较难一点的,下面就说说实现的方法!js实现鼠标拖动div改变其位置的方法先上个图示,大家看一下效果!js实现鼠标拖动的div的代码html完整代码<!DOCTYPE html><html>&l

前端设计

DIV+CSS制作(table)表格的方法

在前端的网页设计需求中,有时候需要使用表格来展示一些数据,但又不能使用 html 中的 table 标签来做,那么我们只有使用 DIV + CSS 来画一个表格了。下面就介绍几种方法,大家来参考一下!使用 DIV+CSS 制作一个表格先上一个由CSS+DIV简单制作的表格样式的示例!html示例代码:<!DOCTYPE html&g

前端设计

css 选择没有内容的元素的方法

今天在写一个主题时,需要把一些没有内容的元素给隐藏掉,由于是由后台动态生成的页面,不知道没有内容的元素在哪。当然这种问题对于技太大姥来说,是简单的一笔,但对于像我这种菜鸟来说,就很难了。所以就想出了,用CSS来隐藏一些空内容元素的方法。CSS :empty 选择器介绍css 选择内容为空的元素,需要用到 CSS 的 :empty 选择器!

前端设计

css calc() 进行计算的方法

css3 中给我们提供了一个很有意思的函数 calc(),此函数可以让浏览器在解析CSS时,对元素的长度,宽度,以及其它的属性进行加,减,乘,除的计算。它的应用不是很广泛,但一般在自适应类型的网页中会经常看到它的身影。css calc() 计算函数calc():函数用于动态计算。语法:calc(expression)参数:expressi

前端设计

table 表格边框合并为单一的边框的方法

在 html table 表格元素的默认设置中,如果为每个表格定义它的边框,整体看起来就感觉非常的凌乱,所以这篇博文就说一说,如果将 table 表格的单元格边框合成一条单线。table 表格边框默认的样式例代码:<!DOCTYPE html><html><head><meta charset=&

前端设计

CSS3 选择倒数第几个元素的方法

上午在写一段HTML时CSS样式时,需要对一个父元素下的最后两个子元素的样式进行额外的定义,由于以前没有遇到过类似的需求,就仔细得查了下网上相似的案例,发现可以使用 CSS3 中的 “:nth-last-child() ”选择器来实现此效果。CSS3 :nth-last-child() 选择器:nth-last-child(n):匹配其父

1 2 3 4 末页
点击下拉

ZBLOG主题/插件定制开发流程

ZBLOG主题/插件定制开发流程