• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 29个常用的CSS小技巧汇总

29个常用的CSS小技巧汇总

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS,技巧,汇总等相关知识,佚名 希望在学习及工作中可以帮助到您

1.清除图片下方出现几像素的空白间隙
方法1:


方法2:


除了top值,还可以设置为text-top | middle | bottom | text-bottom,甚至特定的<length>和<percentage>值都可以

方法3:


2.让文本垂直对齐文本输入框

方法:


3.让单行文本在容器内垂直居中
方法:

4.让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果
方法:

按L-V-H-A的顺序设置超链接样式即可,可速记为LoVe(喜欢)HAte(讨厌)

5.为什么Standard mode下IE无法设置滚动条的颜色?
方法:


将原来设置在body上的滚动条颜色样式定义到html标签选择符上即可

6.使文本溢出边界不换行强制在一行内显示
方法:


设置容器的宽度和white-space为nowrap即可,其效果类似<nobr>标签

7.使文本溢出边界显示为省略号
方法(此方法Firefox5.0尚不支持):


首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。

8.使连续的长字符串自动换行
方法:

word-wrap的break-word值允许单词内换行

9.清除浮动
方法1:


方法2:


方法3:


10.定义鼠标指针的光标形状为手型并兼容所有浏览器
方法:


若将cursor设置为hand,将只有IE和Opera支持,且hand为非标准属性值

11.让已知高度的容器在页面中水平垂直居中
方法:


Know More:已知高度的容器如何在页面中水平垂直居中

12.让未知尺寸的图片在已知宽高的容器内水平垂直居中
方法:

13.设置span的宽度和高度(即如何设置内联元素的宽高)
方法:

要使内联元素可以设置宽高,只需将其定义为块级或者内联块级元素即可。所以方法非常多样,既可以设置display属性,也可以设置float属性,或者position属性等等。

14.给一个元素定义多个不同的css规则
方法:


多个规则之间使用空格分开,并且只有class能同时使用多个规则,id不可以

15.让某个元素充满整个页面
方法:


代码

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS3中的opacity属性使用教程
  • 2017-08-06CSS3 制作绽放的莲花采用效果叠加实现
  • 2017-08-06CSS表达式(expression)解决IE6 position:fixed无效问题
  • 2017-08-06瀑布流布局的两种实现方式:传统多列浮动和绝对定位布局
  • 2017-08-06css实现的让图片垂直居中的方法
  • 2017-08-06适合新手的CSS网页布局小技巧整理
  • 2017-08-06CSS selector:div.title p代表的是什么意思(通俗易懂)
  • 2017-08-06初探CSS3中的calc()功能
  • 2017-08-06CSS代码编写中视觉格式化模型的学习教程
  • 2017-08-06css3选择器基本介绍

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS样式的基础学习总结
    • CSS3的media query学习攻略
    • div和css制作斜线示例分享
    • bootstrap3.0教程之表单(form)使用详解
    • IE9的css hack使用示例
    • DIY属于个人开发使用的CSS Reset
    • 设置span宽度高度的方法
    • 浅谈css3中的前缀
    • css布局绝对定位下margin失效的解决方法
    • 纯css3实现图片翻牌特效

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有