卡卡网

本文是关于如何使用HTML5和CSS3创建切换登录和注册表单的教程。

CSS悬停效果按钮（鼠标移到按钮上变成其他颜色），是一个非常常见的按钮效果，今天通过一个简单的实例来给大家介绍如何用css来实现这一效果。

本文将给大家介绍一个漂亮的css3圆形鼠标悬停效果，这个效果在产品展示或列表图片中都可以应用，可以说是应用范围挺广泛的。

今天给大家介绍一个关于如何用css转换和3d旋转在圆上创建不同有趣的悬停效果的教程。

本文通过2个实例介绍悬停效果很酷的css3实现的动画按钮。

本文我想和大家分享一些css3按钮，它们是一些具有不同样式、悬停效果和活动状态的动画链接元素。

在本教程中，我将向大家介绍如何只使用一个锚标签和一个强大的CSS，就能创建一个漂亮的按钮。

本文介绍使用CSS创建模式窗体(modal window)覆盖(overlay)层的3种方法。

本文将介绍如何不需要用到图片，仅用CSS3是如何做出漂亮的按钮来的。

在前文中介绍过纯CSS实现上下左右箭头，本文将扩展一下，介绍如何用纯CSS实现各种方向的箭头。

本文介绍如何用纯CSS实现上下左右箭头（>）。

本文介绍如何使用CSS选择器里不同的符号(+,> 和 ~) 以及它们的区别。

CSS具有匹配的选择器语法，可以匹配href末尾的文件扩展名。 这样可以轻松添加与链接文本部分之前或之后的链接相关的图标。

在网页上的外部链接旁边放置一个出站链接图标会很有用的，这很容易使用CSS实现，而无需向锚标记添加任何其他元素或向HTML源添加其他图像标记。

今天介绍一个非常好用的JQuery插件，它可以把网页或某个div或table表格内容转为图片并下载保存。

纯css3实现的音阶波浪loading加载动画效果，在主流浏览器上测试通过，包括Chrome、360安全/极速浏览器、Firefox、IE11等。

div的id是可以动态改变的，我们可以通过JQuery或JS来实现。

网页html代码中，meta标签是个非常重要的标签，meta标签可以包含很多属性，而其中有5个是不可缺少的。

网页title和meta标签的content内容是可以通过JQuery和JS来修改的，本文将分别介绍它们的实现方法。

div的id是可以改变的，通常使用的方法是通过JQuery或Javascript来实现。本文介绍用JQuery或JS改变div的id的五种方法。

我们在使用a标签的空链接时，通常写为 href=# 或者 href=javascript:void(0) ，这两种写法有什么区别呢？我想很多人都不会去深究，但是这两种写法出来的效果有时候是不一样的。

div层的显示和隐藏在网页设计中常常被用到，为了让显示/隐藏表现得生动一些，往往加些效果进去，如淡入淡出效果、滚动效果、缩放效果等等。本文将介绍div层显示/隐藏的6种常见效果。

项目列举 li 是常用的网页内容布局排版标签，其样式也非常丰富，单单是列表项标记的类型（list-style-type），我们就有20多个选择。今天谈的问题是，项目列举 li 换行文字左边不对齐的问题。

Table表格颜色，默认时是整个表格每行每列的颜色都一样，这很容易产生视觉疲劳，因此，较友好的设计是TR单双行颜色相间而不同。

本文介绍一个table表格样式，是一种很友好的看着很舒服的表格样式，常见用于教程站里。这也是是个十分通用的table表格样式，可以说大部分网页都适用。

有的浏览器如Firefox，在a标签（链接）点击后会留下一个虚线边框，影响美观，我们如果想a标签（链接）在点击后不要留下虚线边框，要怎么做呢？其实，我们可以从css来设置，达到要求。

我们在设计网页的时候，往往要为丑陋的原始表格美化一翻，美化样式当然要用到css。本文介绍的网页表格美化插件：jqtransform，将大大帮助我们设计漂亮的网页表格。

html控件默认样式都不好看，需要css来美化，本文介绍的checkbox多选框和radio单选按钮也不例外，美化工作需要css+图片来完成。此外，Javascript或JQuery脚本也是少不了的，不然提交表单时传值就有问题。

本文介绍用css实现的下拉菜单，简单、方便、实用。为什么推荐用css实现的下拉菜单？因为html默认的 select 控件生成的下拉菜单样式不好控制，不够美观，使用css打造的下拉菜单，样式可以更加美观，设计可以随意发挥。

在网页设计时，有时遇到某个DIV内容被其他层覆盖挡住了，怎么办呢？我们如何让某一DIV层显示在上面？其实，使用css属性 z-index 就能解决问题。

在现在的网页设计中，鼠标移到图片上图片放大的效果常常被用到，这个效果多应用于文章列表里。我一开始以为是用JQuery来实现的，后来才知道原来是用CSS3来实现的，用CSS3来实现会更加简单和方便。本文将介绍如何用CSS3来实现这个功能。

本文将继续介绍用CSS3来画一个半圆的方法。 CSS3画一个半圆无论圆角、圆弧、实心圆、半圆，css3的实现代码都是 border-radius 属性，border-radius 不但可以定义圆半径和圆角大小，还可以设置圆弧的方向，进而画出各种方向的半圆。

在前文中介绍过CSS3实现圆角的方法，代码更少更简单，不过由于其不兼容IE8浏览器，所以就目前IE8仍然占一定用户比例的情况下，CSS3要完全取代CSS还不太现实。因此本文将介绍纯CSS实现圆角的4种写法，该方法对比CSS3的优势是不用考虑浏览器的兼容问题。

当你要用到一个圆形icon的时候，你可能想到通过图片软件来制作，在css3之前，大家都是通过图片+css来实现各种各样的样式效果。现在，我们用css3的代码，轻松就能画出实心圆了。

圆波扩散动画效果，就是一个圆由中心向四周循环扩散的动画效果。圆波扩散动画效果应用非常广泛，例如可以用来表示某一个位置的状态信息，在网页设计中，常常被用来作为登录或切换页面时的等待状态。本文将使用纯CSS3实现上图动画效果。

要在网页上显示各种算式的符号的时候，我们大多数人是先在Word里插入，然后复制粘贴到网页里，不过要在网页上显示各种计算符号和特殊符号，还是建议用转义字符串。本文收集了各种计算符号和特殊符号的HTML代码，在编写网页代码时可直接使用，值得收藏，以作备用。

有的时候我们要用HTML代码来输出显示乘号（×）、除号（÷）、双引号（"）等字符实体，例如需要显示某个计算公式的时候。其实几乎所有的字符实体（尤其是大量的特殊字符）都有其对应的HTML代码的写法，本文将给大家介绍各种字符实体的HTML写法。

每次设计一张网页或一个表单，都对各种浏览器的兼容问题伤透脑筋，尤其是IE家族。在做兼容性设计时，我们往往会使用各种浏览器能识别的独特语法进行hack，从而达到各种浏览器下显示正常的目的。其中，我们用得最多莫属于\9和\0了。\9和\0是hack IE8、IE9、IE11的独特标识。但是问题来了，\9和\0到底怎样hack IE8、IE9、IE11这三个浏览器？

在上一篇文章里介绍了用css背景图实现文字链右边加一个箭头图标的方法，本文将介绍用Font Awesome实现文字链右边加一个箭头图标的方法。 Font Awesome是一个图标字体库，包含300多种常见小图标，如小箭头之类的icon，使用起来相当方便，只需引用一个css文件，是现在网页设计师常用的插件之一。

许多知名网站都在文字链的右边加一个箭头图标，例如Google站长管理后台，Alexa官网等，这样设计的好处是让链接更醒目，更容易辨认。文字链右边加一个箭头图标的方法，多数人是使用css背景图来实现，包括上面提到的Google站长管理后台，Alexa官网等。是的，这种方法最容易掌握和应用。这正是本文要介绍的实现方法。

近日在做一个网页标签列表，要求不能换行，一开始以为比较容易，三两下就把代码写完了，并且在Firefox和Chrome浏览器测试通过，不过，在IE11一看，却出人意料的没有达到预期效果，li inside-block在IE11里竟然无效！照样换行！为何无效？难道代码还要hack一下IE11？

之前设计网页，如果希望div或table居中，总是用<center></center>把它包起来，但是这样的结果，div或table虽然居中了，但div或table里面的文字也居中了，这是不符合设计者意愿的。那么，我们能否用css实现div或table居中，文字不居中呢？答案是肯定的，本文将给你介绍如何实现此效果。

IE7、IE8、IE9、IE11虽然同属IE家族，但他们在网页渲染时，对css属性的识别却不尽相同，因此，我们会发现网页在IE9浏览好好的，却在IE11上浏览时出现错乱的问题。本文将举例介绍IE家族IE7、IE8、IE9、IE11的css hack的问题，了解它们之间的差异，从而能够写出兼容性良好的css代码。

blockquote默认的双引号千篇一律太过普通，我们能否更改它并美化它，以搭配网页模版的视觉要求？答案是肯定的。下面我就以两个实例来教你怎样修改和美化blockquote双引号，并送上漂亮的css样式。

有关Blockquote的css样式，上一篇已经介绍了《5个Blockquote的css样式》，不过，那是使用css1的写法，要借助双引号的图片和span、div等标签来完成。今天将介绍3个使用css3来实现的Blockquote样式，代码更简洁，并且无需借助图片，推荐使用。

Blockquote标签多用于文章引用内容的时候，这里将介绍8个blockquote的css样式，通过实例，让大家进一步了解blockquote的用法。

在网页设计中，一些区域的标题文字是不能换行的，例如首页显示的文章标题，因为布局是固定的，换行会打乱布局，从而使网页产生错位。因此，我们需要一行一段文字，超出行宽的文字用省略号表示或者直接去掉不用省略号代替。

今天用IE11使用卡卡网的网站速度诊断工具时，发现选项的排版是错位的，我大吃一惊，因为该工具上线有半年多时间了，开发时是经过了多浏览器兼容性测试的，当时测试的浏览器有IE8、IE9、Chrome、360、Firefox，之所以没有IE11，是因为认为只要通过IE9就可以通过IE11了，但实际上现在发现是不行的。

在网页自适应设计中，max-device-width和max-width是不可缺少的两大CSS属性，但是可能大家在使用的选择上没有太多讲究，认为用其中一个即可。不过如果你对此两个属性有了充分的认识之后，你或许把网页的自适应设计得更为极致一些。

网站兼容性调试实在令人烦心，今天，我就把这几个主要浏览器的CSS hack代码汇总一下，满足如下的浏览器要求：IE8、IE9、IE10、IE11、Chrome、Firefox，由于360使用的是Chrome内核，所以满足Chrome基本就满足了360。