当前位置: 首页  - 标签“CSS“ - 列表 学而时习之,不亦说乎

CSS

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

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

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

前端设计禁止 input 自动弹出下拉框的方法

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

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

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

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

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

前端设计DIV+CSS制作(table)表格的方法

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

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

前端设计css 选择没有内容的元素的方法

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

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

前端设计css calc() 进行计算的方法

css calc() 进行计算的方法

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

前端设计table 表格边框合并为单一的边框的方法

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

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

前端设计CSS3 选择倒数第几个元素的方法

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

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

前端设计CSS3自定义滚动条样式

CSS3自定义滚动条样式

一些爱折腾的个人网站的站长会嫌弃浏览器原始的滚动条不好看,会想方设法的将浏览器的滚动条进行个性化的自定义,而 CSS3 就提供了 -webkit-scrollbar 属性来自定义浏览器滚动条的样式。CSS3 的 -webkit-scrollbar 属性只支持 webkit 内核浏览器的滚动条设置,它可以对拥有 overflow 隐藏属性的

前端设计CSS3 给html元素加入阴影效果的方法

CSS3 给html元素加入阴影效果的方法

在前端 html 页面的设计中,有个别需要向访客突出显示的元素时,可以加上一些阴影的效果,让它的辨识度更高,让访客可以一眼发现它存在。关于 html 元素的阴影效果的设置,可以使用 CSS3 中的属性 box-shadow ,下面飞鸟慕鱼博客就来和大家说一说,关于此属性的用法。CSS3 box-shadow 属性详解box-shadow:

前端设计CSS3 实现div元素向上移动的效果

CSS3 实现div元素向上移动的效果

今天应一个用户的要求,要做一个html页面,而页面中的部份div元素,在鼠标移入时向上移动,鼠标移出时恢复到原来的位置。效果是用纯css3代码来实现的,不使用任合的JS代码。css3 实现div向上移动的效果代码html代码:<!DOCTYPE html><html><head><meta cha

前端设计CSS3实现背景颜色渐变的方法

CSS3实现背景颜色渐变的方法

上午制作网页时,写了一个利用 CSS3 实现网页背景颜色渐变的效果,晚上整理代理时,发现这效果还挺好玩的。记录下来,以后再写这种网页背景颜色渐变的效果时,只能复制就行了。网页背景颜色的渐变,利用了 CSS3 中的 Gradients 属性,而渐变的效果又分为了两种,分别为:Linear Gradients(线性渐变) 和 Radial G

前端设计HTML+JS实现图片下载到本地

HTML+JS实现图片下载到本地

在很多网站上,都有一个点击图片或点击某个链接会将指定的图片下载到本地的功能,而这个功能就需要html 元素中的 A 标签的 download 属性来实现,接下来飞鸟慕鱼博客就来说一说关于使用html或js实现图片点击下载的功能。A 标签的 download 属性download:属性为 A 标签在 HTML5 中新增加的一个属性,它可以强

前端设计CSS3 中的 :nth-child() 选择器的使用方法

CSS3 中的 :nth-child() 选择器的使用方法

今天说一个在css3中不常用的到的选择器属性 :nth-child(),它可以方便的对某个HTML元素下的任何子元素进行操作,而要操作的HTML元素不分任何类型。CSS3 :nth-child() 属性定义:nth-child(n):选择器匹配属于其父元素的第 N 个子元素,任何类型的元素都可以。语法::nth-child(n)参数:n

前端设计HTML input 文本框添加提示文字的方法

HTML input 文本框添加提示文字的方法

周未休息,感觉没啥可写的,就水一篇文章吧,说一说前端 html 页面中 input 元素中在没有值的情况下,添加提示的文字,当要输入文字的时候,提示的文字消失。关于 html input 输入框的提示文字,有两种方法可以实现,一种为 input 元素的 placeholder 属性,一种为 js 方法。input 元素的 placehol

前端设计html页面中css缩放图片的方法

html页面中css缩放图片的方法

在html页面制作中,可以利用 CSS 中的 transform 属性对图片进行旋转,缩放,移动或倾斜的操作。而今天我们只说说 transform 属性对图片进行等比例的缩放操作。css transform 属性的介绍transform:该属性向元素应用 2D 或 3D 转换。它允许我们对元素进行旋转、缩放、移动或倾斜的操作。缩放使用值:

前端设计HTML table表格边框设置为单线的方法

HTML table表格边框设置为单线的方法

因为平时在html页面中设计表格样式时,一般都是使用 DIV+CSS 的方式来实现,很少使用 table 表格元素,而今天图省事使用 table 表格元素时,发现设置其边框为的样式为双线的形式,所以就正对次问题,百度了一下解决方案。table 表格的边框宽度不为0的样式HTML代码<!DOCTYPE html><html

前端设计记录CSS中 position:fixed 踩的坑

记录CSS中 position:fixed 踩的坑

在 html 页面的css样式中,如果将 position 属性的值设置为 fixed,那就表示其元素的位置相当于显示设备的可视区域进行定位,而今天在调试此属性时,却发生了一件奇怪的事件。position:fixed 定位失效情况复现失效代码:<!DOCTYPE html><html><head><

前端设计jquery操作class属性的方法

jquery操作class属性的方法

使用 jquery 可以很方便的添加或删除 html 元素的class属性的值,以实现各种炫彩的动态效果。这篇文章就来说一说,几种使用 jq 来操作 html 元素class属性的方法。jq addClass() 方法jq 的 addClass() 方法,可以向一个指定的 html 元素的 class 属性中添加一个属性值示例:<!

前端设计js获取和设置DIV元素class值的方法

js获取和设置DIV元素class值的方法

web页面中,利用js动态的改变div元素的class属性的值,可以实现很多的动态效果。比如动态修改div元素的背景颜色,改变字体的颜色等等。这篇文章就来说一说,javascript 如何获取和设置div元素class属性的值的方法。js获取元素class属性值的方法原生js如果想要获取div元素class属性的值,需要用到 classN

前端设计CSS calc() 函数的介绍与使用方法

CSS calc() 函数的介绍与使用方法

在HTML页面的DIV布局中,如果我们把DIV的宽度当做一个计算公式,让浏览器去自动去计算它们的值是不是很有意思呢?那么今天就说一下,CSS中的一个关于计算的函数 calc() calc() 函数介绍calc():英文单词calculate(计算)的缩写,是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin

1 2 3 末页
点击下拉

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

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