一、定义a标签的需要按照一定顺序才能正常执行（link->visited->hover->active）
如以下顺序：
<style type="text/css">
a:link {color: #000;} /* 未访问的链接 */
a:visited {color: #F00;} /* 已访问的链接 */
a:hover{color: #0F0;} /* 鼠标在链接上 */
a:active {color: #00F;} /* 点击激活链接——在你点击该链接之后，页面正在转向新地址的时候，链接显示此颜色；当你已经到了要链接的页面，然后再返回，原页面上的此链接仍是此颜色 */
二、css导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法：
方法1：display:inline-block
方法2：position:relative
方法3：display:table
方法4：display:inline-flex
方法5：width:fit-content / width:intrinsic
方法1：display:inline-block
这个方法比较简单，是将容器转成「display:inline-block」行内块级元素，然后就可以直接用「text-align:center」使其达到水平居中效果。
**HTML代码：**
这里我们需要一个div来包围这个导航菜单。
<div class="navbar"> <ul> <li><a href="/">首页</a></li> … </ul></div>
**CSS代码：**
给外面的div添加「text-align:center」，然后将菜单容器设成「display:inline-block」行内块级元素，菜单浮左「float:left」
.navbar { text-align:center;}.navbar ul { display:inline-block;}.navbar li { float:left;}.navbar li + li { margin-left:20px;}
这里浏览器兼容只能是IE8或更高版本，所以如果要兼容IE7的话，请加入以下代码
.navbar ul { display:inline; zoom:1;}
方法2：position:relative
这是使用「position:relative」定位方法来让元素水平居中，我不是很推荐这方法，因为代码多了个div去包住，当然这些是根据情况来使用的。
**HTML代码：**
<div class="navbar"> <div> <ul> <li><a href="/">首页</a></li> … </ul> </div></div>
**CSS代码：**将定位div设为浮动，再定位「left:50%」,然后导航定位至「left:-50%」，这方法很有意思吧。可能表达不是很清楚，自己看代码吧^^
.navbar { overflow:hidden;}.navbar > div { position:relative; left:50%; float:left;}.navbar ul { position:relative; left:-50%; float:left;}.navbar li { float:left;}.navbar li + li { margin-left:20px;}
如果要兼容IE7，请添加以下样式：
.navbar { position:relative;}
方法3：display:table
如果你喜欢简洁的代码，哪么这个方法就非常适合你了。
**HTML代码：**
<ul class="navbar"> <li><a href="/">Home</a></li> …</ul>
**CSS代码：**
.navbar { display:table; margin:0 auto;}.navbar li { display:table-cell;}.navbar li + li { padding-left:20px;}
**浏览器兼容：**这方法代码精简，但不支持IE7及以下版本……
方法4：display:inline-flex
有关flex layout的知识自己查下吧>_<
**HTML代码：**
<div class="navbar"> <ul> <li><a href="/">Home</a></li> … </ul></div>
**CSS代码：**
.navbar { text-align:center;}.navbar > ul { display:-webkit-inline-box; display:-moz-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flex; display:inline-flex;}.navbar li + li { margin-left:20px;}
**浏览器兼容：**不支持IE7及以下版本的IE浏览器。
方法5：width:fit-content
**HTML代码：**
<div class="navbar"> <ul> <li><a href="/">首页</a></li> … </ul></div>
**CSS代码：**
.navbar { text-align:center;}.navbar > ul { display:-webkit-inline-box; display:-moz-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flex; display:inline-flex;}.navbar li + li { margin-left:20px;}
浏览器兼容：这个兼容比较低，只支持Firefox或chrome、Opera 12这些较新的浏览器。
在线演示：Demo →
介绍了这么多方法，每种方法都有不同的好坏，这些视项目情况而定，对于我来说，「display:inline-block」是比较适合大众化的，因为它兼容性比较好嘛！
三、定义一个自定义的光标
定义cursor属性值
该属性有多个取值 表示当鼠标移动到各个范围内的鼠标样式
Paste_Image.png
/*代码示例*/
<html>
<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
</body>
</html>
四、box-sizing
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法：
box-sizing: content-box|border-box|inherit;
属性：
content-box：这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box：为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承 box-sizing 属性的值。
eg：//规定两个并排框，外部有边框
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1em solid;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
border:1em solid red;
float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
<div class="box">这个 div 占据右半部分。</div>
</div>
</body>
</html>
五、font-aweosme
图标字体 http://www.bootcss.com/p/font-awesome/
jquery bootstrap 框架尚待学习
六、css3 last-of-type 选择器
:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
提示：等同于 :nth-last-of-type(1)。
七、自定义下拉框的样式
设计图如下
Paste_Image.png
思路：定义一个大小与下拉框相同的透明度为0的按钮，在上头覆盖一个写有提示信息span元素和下拉的按钮图片，可供选择的选项设置其display:none,当该按钮被选中时，将选项的display:block，从而让选项显示出来
网友评论