0371-53778175
15333818157
15333818157
一、利用CSS伪元素实现一段文本的首行文字效果：
使用css的:first-line元素，我们可以控制文本的首行显示想要的效果。这个伪元素用于设置元素中的第一行文本的样式，而不论该行出现多少单词。:first-letter伪元素向文本的第一个字母添加特殊样式。
代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用css为元素来控制文本首行的特殊效果</title>
<style type="text/css">
p:first-line { color:#44AAEE;}
</style>
</head>
<body>
<p>网站内容的更新需要优质的素材，但有时候优质素材并不是太好找。站长们平时所做的原创内容即便是能保证搜搜引擎正常的收录，但也可能因为内容缺乏新引力而不具备粘住用户、无法提升网站的PV值，降低网站的跳转率。让用户在你的站点多停留一些时间。因此，为网站多增加一些优质内容往往更能获得用户的青睐。其实我们完全可以及时捕捉时事热点问题，然后将这些时事热点问题融入到我们的内容中来，以一个行业者的身份进行分析和表述，这样的文章通常都会获得用户的认可，也让搜索引擎逐步地喜欢上你的网站</p>
</body>
</html>
这段代码执行后，网页上的这段文字的第一行的颜色将改变成“#44AAEE”这个颜色，同理，我们也可以设置其他样式来改变文字第一行的特殊效果。
二、利用DIV+CSS技术设置网页整体居中的代码：
在默认情况下，一个div在网页上是单独占据一行的，其宽度是100%的。这样的显示对于网页排版几乎是没有用的，我们平时在编码时需要使用多个div占据一行的技术。实现这一技术非常简单，下面笔者提供两种方式来实现。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS技术设置网页整体居中</title>
<style>
#layout{ width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px;}
</style>
</head>
<body>
<div id="layout">请看这个div盒子是否居中了</div>
</body>
</html>
三、border:none;与border:0;的区别：
border:none;与border:0;的区别体现有两点：一是理论上的性能差异二是浏览器兼容性的差异。
1.性能差异
【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。
2.兼容性差异
兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。
对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。那么，如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可。
对于border:0;与border:none;笔者更倾向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。
四、DIV+CSS应用之设置层的透明度：
实现方式主要是filter: alpha(opacity=70); opacity: 0.7;这样的CSS设置，就可以实现。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div层的半透明效果的实现</title>
<style>
body { background:url(/upfile/images/bg.jpg)}
#layout { position:absolute; top:50px; left:50px; width:500px; height:500px; border:1px solid #006699; background:#fff; filter: alpha(opacity=70); opacity: 0.7;}
</style>
</head>
<body>
<div id="layout"></div>
</body>
</html>
五、利用DIV+CSS来设置DIV中的内容上下垂直居中：
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>设置容器中的内容垂直居中</title>
<style>
#layout { width:778px; margin:0 auto; text-align:center; border:1px solid #44b6dc; background:#e1edfb; height:500px; line-height:500px;}
</style>
</head>
<body>
<div id="layout">看我这句文字是否垂直居中了</div>
</body>
</html>
1765879842 2632505191 2236519391
