前端技巧实用的DIV+CSS技巧大全_DIV+CSS实例教程

网页左右两列等高布局的5种实现方法

两列或多列布局的方法有很多,目前来说,浮动的方式用的比较多,例如下面这个就是典型的两列布局,父容器宽度为600px,左右两列分别为400px和200px,未设置具体的高度 ...
所属栏目:前端技巧 发表时间:2017-12-04

CSS设置输入框占位符placeholder点击隐藏

在HTML5中可以对文本输入框增加placeholder属性,英文placeholder意思是占位符,用在文本输入框的时候可以友好的显示提示文字,例如下面这个就是常见的文本框提示效果 ...
所属栏目:前端技巧 发表时间:2017-11-30

关于CSS轮廓线outline属性的简单用法

在CSS中可以通过outline属性为元素设置一个轮廓线,与边框属性类似,outline属性也可以设置轮廓线的宽度,样式和颜色,在Chrome等浏览器中,当文本输入框获得焦点的时候,输入 ...
所属栏目:前端技巧 发表时间:2017-11-14

学习display:table和display:table-cell的用法

CSS中的display属性用于设置元素的展现方式,默认情况下,块元素的该属性值为block,行内元素则为inline,通过设置该属性可以实现元素显示方式的转换。表格的display属性 ...
所属栏目:前端技巧 发表时间:2017-11-14

理解和学习CSS裁剪属性(clip)的用法

英文单词Clip的意思是修剪或裁剪,在CSS里这个词并不陌生,比如“text-overflow:clip”这个定义表示对多余的文本进行裁剪,比如“background-clip”属性可以设置背景的 ...
所属栏目:前端技巧 发表时间:2017-11-02

关于CSS计数器(counter)的基本用法整理

在有序列表的每个列表项前面会默认显示一个数字序号,而在网页设计过程中,有时候也需要给不一定是有序列表的其他元素加上序号,这时候就要用到CSS里的计数器功能,通过计 ...
所属栏目:前端技巧 发表时间:2017-11-02

CSS给图片增加四角相框效果的简单方法

CSS给图片制作普通的边框只需使用border属性即可,文本主要分享制作图片四个角不同样式的边框,例如下图的效果:这是很常见的相框的效果,不过是实在不知道文字怎么表示这 ...
所属栏目:前端技巧 发表时间:2017-11-02

纯CSS制作TAB标签切换效果的简单方法

网页的TAB标签切换效果在很多大型网站都可以见到,TAB标签可以在有限的位置里展示更多的内容,让网页的内容分类更清晰,同时也增强了用户的互动性,本文制作的TAB切换效果 ...
所属栏目:前端技巧 发表时间:2017-11-01

鼠标指向按钮出现动画线条效果的实现方法

灵活运用CSS的伪元素和过渡效果可以实现很多炫酷的样式,本文所实现的鼠标指向按钮出现动画线条效果就是这么实现的,下面就以一个简单的文字链接为例 ...
所属栏目:前端技巧 发表时间:2017-10-30

文本超出宽度后隐藏并显示省略号的方法

文本超出宽度自动隐藏,常用于标题列表,一般实现文本超出宽度隐藏需要同时设置3个属性,分别是强制文本不换行,超出部分隐藏以及超出部分显示省略号,例如下面是一个标题列 ...
所属栏目:前端技巧 发表时间:2017-10-29

CSS实现标题下方拼接装饰线的简单方法

经常在有些网站看到拼接装饰线条的效果,如下图:这里公司简介下方的装饰线条左边有一部分是红色的,和一条较长的灰色线拼接在一起了,实际上这里并不是两条线的拼接,而是 ...
所属栏目:前端技巧 发表时间:2017-10-29

CSS垂直对齐(vertical-align)属性的用法

在CSS里设置元素垂直对齐方式的属性是vertical-align,英文vertical中文翻译为“垂直的,竖立的”意思,该属性用于定义行内元素的基线相对于该元素所在行的基线的垂直对 ...
所属栏目:前端技巧 发表时间:2017-10-27

关于外边距margin属性的特殊情况总结

外边距属性margin是CSS里十分常用的属性,外边距在是一个盒子模型外部留下的一个透明的间隙,通过margin定义四个方向的边距很简单(基础部分请点这里复习),本文主要总结关 ...
所属栏目:前端技巧 发表时间:2017-10-27

CSS属性继承(inherit)的简单用法举例

CSS中可以通过inherit这个词来定义继承,比如color:inherit则表示设置与父元素相同的文字颜色。任何一个CSS属性要么是默认继承的,要么是默认不继承的,默认继承的属性 ...
所属栏目:前端技巧 发表时间:2017-10-26

给网页中英文之间自动加上空格的方法

很多网站为了文章更易阅读,在中英文一起出现或出现数字的时候,都会习惯给英文或数字前后加上空格,这是一个较好的习惯,但如果网站上文章较多,而以前没有该习惯的话,想修 ...
所属栏目:前端技巧 发表时间:2017-10-25

在CSS里设置图片的宽高比例的方法

图片网站的列表页一般都是以缩略图的形式展现内容,笔者之前在一个图片网站遇到这样一个问题:网站里有的文章缩略图是系统生成的,也有一些是手动裁剪的缩略图,手动裁剪 ...
所属栏目:前端技巧 发表时间:2017-10-20

CSS给网页中英文或给指定字符设置不同字体

众所周知,在CSS里可以用过font-fanily属性来定义网页中文字的字体,关于网页的字体,在实际运用中还有更多可自定义的地方值得研究,比如给中英文不同的字体,或者是自定义 ...
所属栏目:前端技巧 发表时间:2017-10-19

CSS外边距margin属性设置负值的用法

在CSS中,margin属性用于设置元素的外边距,可以设置为具体的数值,也可以使用百分比或者是auto,而这里外边距的数值其实是可以设置负值的,当外边距设置为负值时,网页会有什 ...
所属栏目:前端技巧 发表时间:2017-10-07

CSS块级格式化上下文BFC的概念及其运用

BFC这个词是在一篇博客里看到的,它全称是Block Formatting Context,中文翻译为“块级格式化上下文”。我们都知道,一个网页是由多个不同的Box组成的,元素的类型和displ ...
所属栏目:前端技巧 发表时间:2017-10-07

DIV+CSS网页左右两列布局的多种实现方法

两列布局是网页设计中最常用的布局方式,经常用于个人博客网站,企业网站产品列表页和文章站列表页等,本文简单的总结几种常用的两列布局方式:下面先创建一个简单的示例 ...
所属栏目:前端技巧 发表时间:2017-09-30
共34篇12下一页
DIV+CSS基础 DIV+CSS技巧 CSS3基础 建站经验技巧 实用资源下载