css技能个人收藏——經典中的經典

日期:2020-11-02 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

删掉连接上的虚线框

拷贝编码
编码以下:

a:active, a:focus {
  outline:none;
}

Firefox 默认设置会在连接得到聚焦点(或点一下时)再加条虚线框,应用上面的特性能够删掉。

最简易的 CSS 重设

拷贝编码
编码以下:

* {
  margin: 0; padding: 0
}

不让连接折行

拷贝编码
编码以下:

a {
  white-space:nowrap;
}

上面的设置就可以防止连接折行,但是本人提议长连接会有相应的这行(相关换行层面的探讨,参看圆心的纪录)。

自始至终让 Firefox 显示信息翻转条

拷贝编码
编码以下:

html {
  overflow:-moz-scrollbars-vertical;
}

更多的 Mozilla/Firefox 独享 CSS 特性能够参照这里。需跨访问器的适用,还可以应用

拷贝编码
编码以下:

body, html {
  min-height:101%;
}

应用 line-height 竖直垂直居中

line-height:24px;

应用固定不动宽度的器皿而且必须1行竖直垂直居中时,应用 line-height 便可(高宽比与父层器皿1致),更多的竖直垂直居中总结能够看这里。

消除器皿波动

拷贝编码
编码以下:

#main {
  overflow:hidden;
}

使块元素水平垂直居中
margin:0 auto;
实际上便是

拷贝编码
编码以下:

margin-left: auto;
margin-right: auto;

这个技能基础上全部的 CSS 教科书都会有表明,别忘掉给它再加个宽度。Exploer 下还可以应用

拷贝编码
编码以下:

body{
  text-align: center;
}

随后界定里层器皿

text-align: left;

修复。

掩藏 Exploer textarea 的翻转条

拷贝编码
编码以下:

textarea {
  overflow:auto;
}

Exploer 默认设置状况下 textarea 会有竖直翻转条(不必问我为何)。

设定复印分页查询

拷贝编码
编码以下:

h2 {
  page-break-before:always;
}

page-break-before 特性能设定复印网页页面时的分页查询。