标签 css 下的文章

最近越发懒散了，什么都不想折腾，G5还有一些需要调整的，还要忙着规划G6，折腾了几天，什么都不满意，最后什么都摆忙活了，心情有点乱乱的，很是郁闷，天气越来越热了，我是越来越沉不住气，今天小更一下吧，证明我还活着

代码高亮功能网上有很多实现的方法，插件很多，介绍免插件的博客也不少，但是他们都用到了js+css，好吧，今天我来个简单的，纯css的，对！你没看错，用css就行了，当然，这货不支持代码高亮，仅仅是放代码用的，，我表示自己很喜欢，配合一些在线代码着色器，那就完美了

最终实现效果：

其实简单到不行，只需要把下面的css丢到你主题的css里就OK了
  1. .context ol {overflow-x:auto;overflow-y:hidden;margin:10px;padding:0 0 0 30px;background:#eee;border:1px solid #aaa;}
  2. .context ol li{font-size:12px;padding:0 5px 0 10px;width:100%;border-left:1px solid #596;border-bottom:1px solid #eee;line-height:20px;color:#666;background:#fff;list-style-type:decimal;}
  3. .context ol li:hover{background:#eee;}
这样，在撰写文章的时候，插入ol就行咯

好了，现在是个人心情时间：

18岁过去了，有破处了，第一次18岁，也仅仅这一次，以后SHA人就不能从轻判了，以后也不能装嫩了，再也不能对着大街喊：我是未成年！不能了，啥都不能了

祝我自己生日快乐，嘿嘿，5.23的生日，我到现在才祝福自己呢，今年的生日没往年的隆重，虽然这一生只有这一个18岁，但是我想自己一个人平平静静的度过，当然最后没能如愿，还是被家人、朋友、同学拉着庆祝了一下，很感谢！我爱你们！

我想，这是我这辈子最喜欢的生日礼物了，我擦，真尼玛没节操，我们班同学真是聪明绝顶，这样的东西都能搞出来，真服了他们脑袋了。逐个捏碎！哈哈

么！么么！！18岁！！！我很快乐！！！！

怎么祝福我生日快乐呢？很简单：访问这个页面，表示一下你的心意，稍微意思意思一下就OK啦，哈哈，可以在备注里留下你的联系方式，偶会灰常感谢你滴，嘎嘎

欧爹(OYOY)犒赏过

这个题目真心难取啊，估计仅仅看题目是难以理解的文章写的什么，所以仔细阅读吧，上图为大家驾驶一番

enter image description here

就是为了处理掉上图所标注的最后一个li样式，所以这篇文章应运而生，其实这个问题早在当初折腾代码实现文章仿“无觅”效果的 相关文章的时候便产生了，当初没怎么在意，直到阅读到 @倡萌 的文章后，问题解决了，倡萌那里提供了两种解决办法，都是用的js，但是我并不喜欢这两种方式，于是尝试纯CSS方式。

下面的前两种方法是来自倡萌提供的的JS代码，优点是兼容性好支持低版本的IE6浏览器，不过现在使用IE6的用户真的是越来越少了，你可以大胆的采用CSS的方式来完成这一操作，那就看一看“方法三”吧

方法一

已经引入了jQuery库，再加一句简单的js代码即可：

<html>
<title></title>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>//引入jQuery库
<script type="text/javascript">
$(function(){
$("#test li:last").css("border","none");//关键函数，注意容器id“#test”要和html代码中一样
})
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#test{ width:200px;}
#test li{ width:100%; height:24px; border-right:1px solid red;}
</style>
</head>
<body>
<ul id="test">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>

方法二

没有引入jQuery库，使用原生js代码实现：

<html>
<title></title>
<head>
<script type="text/javascript">
window.onload = function urlborder() {
        var listr = document.getElementById("test").getElementsByTagName('li'); //注意容器id“test”要和html代码中一样
        for (var i = 0; i < listr.length; i++) {
            if (i == listr.length - 1) {
                listr[i].style.borderWidth = "0";
            }
        }
    }
</script>
<style type="text/css">
ul,li{ margin:0; padding:0; list-style:none; }
#test{ width:200px;}
#test li{ width:100%; height:24px; border-right:1px solid red;}
</style>
</head>
<body>
<ul id="test">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
</html>

方法三

使用:first-child或:last-child伪类：

纯css的:first-child和:last-child伪类就可以胜任此任务，操作很方便，代码量忽略不计。支持IE7+，不支持IE6（last支持IE8+）

以兼容性更好的:first-child伪类为例，关于:first-child伪类的解释如下：

:first-child 伪类向元素的第一个子元素添加样式。

阅读详细解释 >

处理前，需要把li样式的right线改为left：

enter image description here

参考代码：

.relatebar li{width:98px;height:146px;padding:5px;float:left;border-left:1px solid #ccc;}
.relatebar li:first-child{border-left:0px solid #ccc;}

解释：

用:first-child伪类给li的第一个样式改为0px，或者none也行，这样第一个li就没有哪条多余的横线啦！

:last-child伪类与:first-child伪类用法相同，不同的是:last-child是为元素的最后一个子元素添加样式

据说浏览器兼容问题曾经一直不被重视，因为国内曾经是IE这个巨无霸的天下，网站只要做好IE就浮云了，但是随着人们的价值品味的改变，和以谷歌、火狐等浏览器领头的冲击，IE的热量在逐渐消退，越来越多的用户使用上了非IE内核的浏览器，目前市面上非IE内核的浏览器主流的、非主流的太多了，所以，前端开发者的难题就来了——浏览器兼容，这个另众多前端开发者头大的问题

懂得CSS的朋友，应该听说过CSS hack，现在的浏览器如IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发者。下面是我在网络整理的一些资料，希望对大家有所帮助。

浏览器的粗分类

虽然目前流传的浏览器种类颇多，但是实际上可以将所有主流浏览器大致的分为两个类型：

1、IE内核浏览器（IE6、IE7、IE8、360浏览器、QQ浏览器、傲游浏览器）

2、标准浏览器（狐火浏览器、Safari浏览器、Opera浏览器、Google浏览器）

不同的浏览器对CSS的解释都有一些特殊情况，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：

1、在属性前加下划线(_)，那么此属性只会被IE6解释；

2、在属性前加星号(*)，此属性只会被IE7解释；

3、在属性值后面加"9"，表示此属性只会被IE8解释

各浏览器CSS hack兼容表：

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

color:red; / IE6、IE7支持 */

+color:red; / IE7支持 */

color:red9; /* IE6、IE7、IE8支持 */

color:red; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

color:red; / IE6、IE7支持 */

+color:red; / IE7支持 */

color:red9; /* IE6、IE7、IE8支持 */

color:red; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

当然，我只是粗略的列举的一些，更多资料你可以打开这里 更可以打开这里