2. CSS3 阴影的文字特效 CSS代码: <!DOCTYPE CSS><CSS lang="en"><head><meta charset="UTF-8"><title>
3. box-shadow 属性 CSS3box-shadow属性应用
特殊字体一般不是说不能添加，而是考虑到用户电脑上预装的字体有限，所以局限在宋体和微软雅黑两种字体，css属性中有个font属性，例如{font-family:"迷你简菱心"},在装过这个字体的的电脑会有效果，但是再没有装过的电脑可能就是其它字体了，一般会解析为宋体，问题解决一般由两种解决方案。第一：css3下载字体，代码如下
@font-face
{
font-family:
'自己命名字体名字'
src:
url('字体路径')
src:
url('FileName.eot?#iefix')
format('embedded-opentype'),
/*其它格式*/
url('FileName.woff')
format('woff'),
url('FileName.ttf')
format('truetype'),
url('FileName.svg#FontName')
format('svg')
font-style:
normal
font-weight:
normal
/*设置默认样式*/
}
.aa{font-family:"自己命名字体名字"}
不兼容ie8及以下浏览器
第二：切png图片
导航条js+css特效一般都用于首页index文件，作为网站的主页栏目导航。
1、打开Dreamweaver创建新页面，输入以下代码。如图：
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<script src="
<title>css菜单演示</title>
<style type="text/css">
<!--
*{margin:0padding:0border:0}
body {
font-family: arial, 宋体, serif
font-size:12px
}
#nav {
line-height: 24px list-style-type: none background:#666
}
#nav a {
display: block width: 80px text-align:center
}
#nav a:link {
color:#666 text-decoration:none
}
#nav a:visited {
color:#666text-decoration:none
}
#nav a:hover {
color:#FFFtext-decoration:nonefont-weight:bold
}
#nav li {
float: left width: 80px background:#CCC
}
#nav li a:hover{
}
#nav li a.on{ background:#999}
#nav li ul {
line-height: 27px list-style-type: nonetext-align:left
left: -999em width: 180px position: absolute
}
#nav li ul li{
float: left width: 180px
background: #F6F6F6
}
#nav li ul a{
display: block width: 180pxw\idth: 156pxtext-align:leftpadding-left:24px
}
#nav li ul a:link {
color:#666 text-decoration:none
}
#nav li ul a:visited {
color:#666text-decoration:none
}
#nav li ul a:hover {
color:#F3F3F3text-decoration:nonefont-weight:normal
background:#C00
}
#nav li:hover ul {
left: auto
}
#nav li.sfhover ul {
left: auto
}
#content {
clear: left
}
-->
</style>
<script type=text/javascript><!--//--><![CDATA[//><!--
$(function(){
$("#nav li").hover(function(){
$(this).children("a").toggleClass("on")
})
})
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li")
for (var i=0 i<sfEls.length i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover"
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover"
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover"
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"")
}
}
}
window.onload=menuFix
//--><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#">百度知道</a>
<ul>
<li><a href="#">百度芝麻</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
<li><a href="#">产品一</a></li>
</ul>
</li>
<li><a href="#">百度行家</a>
<ul>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
<li><a href="#">服务二</a></li>
</ul>
</li>
<li><a href="#">百度芝麻酱</a>
<ul>
<li><a href="#">案例三</a></li>
<li><a href="#">案例三</a></li>
</ul>
</li>
<li><a href="#">关于百度</a>
<ul>
<li><a href="#">关于百度</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">关于百度</a></li>
<li><a href="#">关于百度1</a></li>
</ul>
</li>
<li><a href="#">在线百度</a>
<ul>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示</a></li>
<li><a href="#">演示演示演示</a></li>
<li><a href="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#">联系百度</a>
<ul>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
<li><a href="#">联系百度</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
2、点击F12预览导航效果。如图：
注意事项：代码中的导航分为一级导航和二级感应导航，直接修改为所需栏目名称即可使用。
