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

CSS教程

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

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

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

前端设计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

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

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

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

前端设计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

前端设计html 中的  标签横向排列的方法

html 中的 标签横向排列的方法

html页面中的多个连续的<li>标签在默认的情况下是竖向排列的,不过我们可以设置 li 标签的 CSS 样式,来使一个 ul 标签中的所有 li 标签都横向排列。多个 html 中 li 标签默认竖向排列html代码<!DOCTYPE html><html><head><meta c

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

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

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

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

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

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

前端设计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><

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

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

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

前端设计css中zoom:1属性的定义和作用

css中zoom:1属性的定义和作用

今天被问起CSS中有个zoom属性是干什么用的,虽然我知道这个属性是用来清除浮动,来触发haslayout的。但具体的定义还不是很了解,就百度了一点关于zoom属性的资料,然后总结了一下。CSS zoom属性zoom:设置或检索对象的缩放比例,触发IE浏览器的haslayout属性,解决浮动,margin重叠等一些问题。语法:zoom:n

前端设计CSS设置背景图片不重复的方法

CSS设置背景图片不重复的方法

今天有小伙件来咨询一个关于CSS中设置背景图片不重复的小问题,给他解答的同时顺便写一下教程,详细介绍一下CSS如何设置背景图片,以及设置背景图片的显示方式等。CSS设置背景图片在CSS中,我们可以利用 background 属性来设置背景图片,如下面的代码<!DOCTYPE html><html><head&

前端设计jq类的切换事件,toggleClass()方法

jq类的切换事件,toggleClass()方法

前端元素的动态操作中,我们可以对一个元素添加一个类,也可以删除一个类。那如果我们对指定的元素中的某个类在添加和删除之间来回切换呢?这篇文章就说一说,元素中某个类在添加和删除之间的切换效果,也就是JQ中的切换事件。JQ中的toggleClass()方法定义与用法toggleClass():此方法对设置或移除被选元素的一个或多个类进行切换。注

前端设计JQuery is()方法与hasClass()方法的对比

JQuery is()方法与hasClass()方法的对比

JQ中的is()方法与hasClass方法都可以检查某个元素中是否具有某个类,虽然它两个的功能相同,但相比较来说is()方法更好用,更强大,参数中不但可以放入字符串,还可以放入函数。JQ中的hasClass()方法语法:$(selector).hasClass("className");例:JQ检查某个元素是否含有某个

前端设计CSS3实现鼠标放大镜和放小镜的效果

CSS3实现鼠标放大镜和放小镜的效果

CSS3中的cursor属性可以改变鼠标的形状,我们比较常用的到就是让鼠标变成小手,或者自己引入外部的.cur图标文件。今天我们就说一说,cursor属性在不引入外部.cur文件的情况下,让其变成放大镜,放小镜的形状CSS3中的cursor属性cursor 属性规定要显示的光标的类型(形状)。其值如下表CSS3中的cursor属性放大镜,

前端设计CSS兄弟选择器符号‘+’号与‘~’号的区别

CSS兄弟选择器符号‘+’号与‘~’号的区别

今天有人问我,在CSS的兄弟选择器中'+'号和'~'号码的区别是什么,而我自己对这个问题也不是很清除,当然,如果想弄清楚一个问题,用实践的方式比较好,今天就通过举几个例子来说明一个,CSS选择器中的加号和“~”号的区别在什么地方!CSS兄弟相邻选择器加号相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Ad

前端设计CSS中浏览器前缀的兼容写法

CSS中浏览器前缀的兼容写法

浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效。谷歌浏览器和 Safari浏览器使用的是WebKit渲染引擎,火狐浏览器使用的是Gecko引擎,Internet Explorer使用的是Trident引擎,Opera以前使用Presto引擎,后改为WebKit引擎。一种浏览器引擎

1 2 末页
点击下拉

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

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