Category: Div / Css / XML / HTML5 / SVG

同一表单内设置两个或两个以上的提交按钮 Two submit buttons in one form

给相同 name就可以了, 类似radio的和checkbox的用法: You can give each input a different value and keep the same name: <input type="submit" name="action" value="Submit" /> <input type="submit" name="action" value="Update" /> <input type="submit" name="action" value="Delete" /> php接收: Then in the code check to see which was triggered: if ($_… Read More

CSS:absolute居中 How to center absolute div horizontally using CSS

You need to set left:0; right:0;. This specifies how far to offset the margin edges from the sides of the window. http://www.w3.org/TR/CSS2/visuren.html#position-props http://jsfiddle.net/SS6DK/ CSS .container { position: absolute; top: 15px; z-index: 2; width:40%; max-width: 960px; min-width: 600px; height: 60px; overflow: hidden; backgro… Read More

详解CSS display:inline-block的应用

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了 inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和 height的特性,又保持了inline元素不换行的特性。 举例说明:以前我们做横向菜单列表的时候,我们可以通过li和float:left两者来实现,现在可以通过l… Read More

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技术,下面我就把这种布局叫Flex布局。 元素居中,相信作为前端工程师的你肯定会经常用到,不管是在水平方向居中,还是垂直方向居中,都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中,还是比较麻烦的。不过你也不用担心,下面就给大家分享下通过Flex布局轻松实现元素在水平、垂直方向上的居中效果。 水平居中 水平居中最为简单我们直接来看下代码 1.单个元素水平居中 CSS代码 .box{ display: flex; j… Read More

CSS3 Flex 弹性布局用法详解

什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性。 说明: 1.flex是display的一个属性值。与之相当应的还有一个是inline-flex。 2.设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用。 3.设置了display:flex属性的元素,称为Flex容器,他里面的所有子元素统称为容器成员,称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴:水平的叫主轴(main axis)和垂直的叫交叉轴(cross axis)。 Fl… Read More

使用CSS3伪类元素(::before|::after)对文字进行美化

如果要想把一个文字的分成两半分别设置成不同的颜色,你是不是第一时间只想到通过PS来实现呢,不过有一个不好的地方就是图片会占用更多的资源。所以下面就给大家介绍一个通过CSS的伪类元素来美化文字的方法。 对一个文字进行美化 左右型美化 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3伪类元素(::before|::after),文字进行美化</title> </head> <body> <div> <s… Read More

visibility: hidden与display:none的区别

要想了解visibility: hidden与display:none的区别,我们还是先来看看他们各自的定义及用法。 visibility属性 定义: visibility 属性规定元素是否可见 说明: 这个属性指定是否显示一个元素生成的元素框,它是仍然占据基本空间的,只是不可见而已。值设置成collapse在表格中用于从表格布局中删除列或行。 可能的值 visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden̶… Read More

CSS单位 px pt em和rem 之间的区别

CSS中可以定义大小的单位有四种px,pt,em,rem,而px可以说在网页开发中最常见的单位了。不过现在如今的大多数网站已经开始用rem这个单位了。那么这四个单位有什么区别呢? px|pt|em|rem区别 px单位 px(像素),国内网站相对来说用得比较多,任意浏览器的默认字体高都是16px。 pt单位 pt是point,是印刷行业常用单位,等于1/72英寸。 em单位  em才是真正的“相对单位”,它不是一个具体的数值,而是相对于父元素的属性计算出来的大小,一般移动终端布局用em比较合适。 rem单位 rem单位是CSS3中新增的一个相对单位,只不过它要比em单位强大一些,因为它是集相对大小和绝对大小的… Read More

Table被web编程弃用的原因

Table要比其它html标记占更多的字节。 (延迟下载时间,占用服务器更多的流量资源。) Tablle会阻挡浏览器渲染引擎的渲染顺序。 (会延迟页面的生成速度,让用户等待更久的时间。) Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。 (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。) 在某些浏览器中Table里的文字的拷贝会出现问题。 (这会让用户不悦。) Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%) (这会限制你页面设计的自由性。) 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。 (先花时间学一些CSS知识,… Read More