大家应该都知道DIV+CSS格式构建的网站,搜索引擎非常的喜欢.然而有很多人,为了追求精美的网站,而使用其它搜索引擎不喜欢的技术.其实,好看的网页效果,用CSS也能实现,深圳SEO就把实现美好效果的一些CSS代码分享给大家:
（推荐阅读：H1，H2等DIV+CSS标签的用法）
（推荐阅读：用DIV+CSS设计的网站的一些优势）
（推荐阅读：符合SEO标准的html模板分享）
（推荐阅读：HTML语言基础介绍）
1、添加挂件图文
<DIV id=youxia style="RIGHT: 10px; POSITION: absolute; TOP: 100px"><IMG src="你的图片地址" border=0></A></DIV>
2、改变滚动条颜色
<STYLE type=text/css>
BODY
{SCROLLBAR-FACE-COLOR: #dee3e7;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #dee3e7;
SCROLLBAR-3DLIGHT-COLOR: #d1d7dc;
SCROLLBAR-ARROW-COLOR: #006699;
SCROLLBAR-TRACK-COLOR: #efefef;
SCROLLBAR-DARKSHADOW-COLOR: #98aab1;}
</STYLE>
3、改变页面尺寸大小
<STYLE type=text/css>
.bodyTop{width:900px;}
.bodyBg{width:900px;}
.bodyBottom{width:900px;}
.feeds .text{width:640px;}
.label{width:240px;}
.photo{width:240px;}
.callboard{width:240px;}
.links{width:240px;}
.calendar{width:240px;}
.sysBr180{width:240px;}
</STYLE>
4、贴盖自己的题头效果
<CENTER>
<DIV style="LEFT: 120px; WIDTH: 80px; POSITION: absolute; TOP: 55px; HEIGHT: 80px" align=right>
<TABLE class=bodyBg cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD class=banner>
<TABLE class=title style="WIDTH: 300px; HEIGHT: 0px" cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="FONT-SIZE: 30pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云">
<P align=center><B>自己的博客名称</B></FONT> </P></TD></TR></TBODY></TABLE>
<TABLE class=link cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD width=20> </TD>
<TD><A style="COLOR: #97694f; TEXT-DECORATION: none" href="自己的博客网址">自己的博客网址</A> ﹥<A style="COLOR: #97694f; TEXT-DECORATION: none" href="javascript:;" onclick="setCopy ('自己的博客网址');new dialog().event(' 已经把该BLOG网址复制到系统剪贴板，您可以使用（Ctrl+V或鼠标右键）粘贴功能，通过其他软件记录或发送给您的朋友。','void 0')">复制</A> ﹥<A style="COLOR: #97694f; TEXT-DECORATION: none" href="javascript:;" onclick="setHome()"> 收藏本页</A></TD>
<TD width=20> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></CENTER>
5、文本图片文字环绕
<TABLE style="WIDTH: 500px" cellPadding=15>
<TBODY>
<TR>
<TD bgColor=#eeeeff><IMG src="*.jpg" hspace="1" align="LEFT" hight=60>文本文字</TD></TR></TBODY></TABLE>
6、添加自己的模板
<DIV><LINK media=all href="http://fs8.139.com/0/794/dhyx/share/2006211212038487.css" type=text/css rel=Stylesheet>
</DIV>
7、添加弹出的动画提示语
<body>
<SCRIPT>
<!--
function crml(nid)
{
try
{
nid=new ActiveXObject("Agent.Control.2");
nid.Connected = true;
nid.Characters.Load("");
return nid;
}
catch (err)
{
return false;
}
}
function chplay ()
{
if (ml=crml ("ml"))
{
var MerlinID;
var MerlinACS;
Merlin = ml.Characters.Character(MerlinID);
Merlin.MoveTo(200,200);
Merlin.Show();
Merlin.Play("Explain");
Merlin.Play("Announce");
Merlin.Speak("欢迎到方[骑士]的博客场");
Merlin.Play("Gestureright");
Merlin.Play("Pleased");
Merlin.Speak("在这里你可以看到骑士场的文学图雅和有趣的内容");
Merlin.Play("Idle1_1");
Merlin.Hide();
Merlin.MoveTo(600,300);
Merlin.Show();
Merlin.Play("Surprised");
Merlin.Speak("谢谢你前来做客");
Merlin.Play("Read");
Merlin.Speak("希望你既然来做客了能留下点东西做个纪念");
Merlin.Play("Write")
Merlin.Play("GestureUp");
Merlin.Speak("怎么样？大方点给点鼓励！砖头鸡蛋都欢迎！");
Merlin.Play("DontRecognize");
Merlin.Speak("再次感谢你的光临！？");
Merlin.Play("DontRecognize");
Merlin.Play("Greet");
Merlin.Speak("那你就慢慢的诳吧");
Merlin.Play("Greet");
Merlin.Speak("我先回去睡会儿觉，再见！！");
Merlin.Play("Greet");
Merlin.Hide();
}
}
//-->
</SCRIPT>
<SCRIPT>
<!--
chplay()
-->
</SCRIPT>
</body>
8、添加背景音乐及播放器
<embed src='你的音乐文件地址' width=200 height=200 autostart=true loop=true></embed>
9、添加天气预报
<IFRAME style="WIDTH: 186px; HEIGHT: 228px" src="http://weather.qq.com/inc/ss125.htm" frameBorder=0 width=200 scrolling=no height=240></IFRAME>
10、添加日历和时钟
<IMG style="WIDTH: 130px; HEIGHT: 170px" height=70 src="http://www.u9cn.com/rili.php" width=60>
<IMG style="WIDTH: 135px; HEIGHT: 52px" height=20 src="http://counter.skywebhosting.com/cgi-bin/Count.cgi?display=clock&tformat=24&timezone=GMT+0800&ft=0" width=73>
11、添加FLASH动画
<IFRAME id=sgnframe border=0 marginWidth=0 frameSpacing=0 marginHeight=0 src="http://media.163888.net/virtualdir1/2006/01/05/18/Flash/22957710937153.swf" frameBorder=0 width=395 scrolling=no height=338></IFRAME>
FLASH背景
<CENTER><EMBED style="LEFT: 10px; POSITION: absolute; TOP: -70px" align=right src=FLASH背景地址 width=700 height=400 type=application/x-shockwave-flash wmode="transparent" quality="high"></CENTER>
12、添加特效鼠标
<STYLE type=text/css>
A:hover {
CURSOR: url('http://webme.bokee.com/inc/mouse009.cur
')
}
BODY {
CURSOR: url('http://webme.bokee.com/inc/mouse009.ANI')
}
</STYLE>
<STYLE type=text/css>A:hover {font-style:oblique;font-weight:bold; FONT-SIZE: 13px; BACKGROUND: #cc99ff;}</STYLE>
13、添加滚动图片
<MARQUEE scrollAmount=1 scrollDelay=1 direction=up width=200 height=230>
<DIV align=center><IMG src="http://219.133.45.144:8080/upload/2826/2789/1140077571943.jpg" width=200 border=0></DIV>
<DIV align=center><IMG src="http://219.133.45.144:8080/upload/2826/2789/1140077488931.jpg" width=200 border=0></DIV>
<DIV align=center><IMG src="http://219.133.45.144:8080/upload/2826/2789/1140077552078.jpg" width=200 border=0></DIV></MARQUEE>
14、添加滚动文字
<MARQUEE scrollAmount=1 scrollDelay=77 direction=up width=270 height=77>文本1<BR>文本2<BR>文本3<BR>...<BR>...</MARQUEE>
文章背景
<div style="width: 200px;"><img src="图片地址" align="left"><div style="float: left; width: 400px;">文字内容</div></div>
代码2:
<CENTER>
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TD background=图片网址 height=400>文字地址</TD></TR></TBODY></TABLE></CENTER>
15、添加字的背景色/全背景和图片作背景
<FONT style="BACKGROUND-COLOR: #ffddff">加上背景色的文本</FONT>
<TABLE style="WIDTH: 480px" cellPadding=15>
<TBODY>
<TR>
<TD bgColor=#eeeeff>加上背景色的文本”</TD></TR></TBODY></TABLE>
<P style="BACKGROUND: url(*.jpg)
fixed" align=left>文本</P>
16、调整插入图片的位置
<P><IMG height=100 src="图片连接地址" width=100 align=left border=0>文本内容<BR> <BR clear=left></P>
17、添加文本边框
<div style='border:1px #FF0000 solid;'>文本内容</div>
推荐阅读
