xhtml css制作不规则导航
星期三, 06月 4th, 2008
先看图(图片只是大致做了一下)
效果展示:
运行相关代码框
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
Posts Tagged ‘导航’
纯CSS实现标签导航制作
星期三, 06月 4th, 2008
在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面de教程或者说明,大部分都是要涉及到JSde编写de.这对于很多CSS学习中de人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做deCSS标签导航是纯CSS无JS无背景图片de绿色导航.此文章适合初学者,高手可以路过,呵呵!
点击运行可以看到效果:
[Ctrl A 全选 提示:您可先修改部分相关代码,再按运行]
[复制此相关代码]CODE:
.mainNav{
margin:0 20px;
height:47px;
border-bottom:2px solid #000;
}
ul{
margin:20px;
margin-bottom:0;
padding-left:20px;
list-style-type:none;
font-size:12px;
position:absolute;
}
ul li{
float:left;
margin-right:5px;
}
ul li a{
display:block;
width:100px;
line-height:25px;
text-align:center;
color:#999;
background-color:#FC0;
border:2px solid #000;
}
ul li a:hover{
height:27px;
background-color:#F60;
border-bottom:none;
}
#nav01 ul li a#nav001,
#nav02 ul li a#nav002,
#nav03 ul li a#nav003{
width:100px;
height:27px;
color:#FFF;
background-color:#F60;
border:2px solid #000;
border-bottom:none;
}
.con{
margin:0 20px;
padding:20px;
color:#FFF;
background-color:#F60;
border:2px solid #000;
border-top:none;
}
[复制此相关代码]CODE:
<div class=”mainNav”>
<div class=”mainNav”>
<ul>
<li><a href=”#” id=”nav001″>阿里满满01</a></li>
<li><a href=”#” id=”nav002″>阿里满满02</a></li>
<li><a href=”#” id=”nav003″>阿里满满03</a></li>
</ul>
</div>
其实这其中de关键点是ul中deposition:absolute命令,由于使用了这个CSS属性,ul导航de内容变成了层显示,就相当于浮在了浏览器上面.而为了不让下面de内容填补ul部分de内容,在ul外还套了个div,起到了帮助ul占位de作用.而这个div也同时起到了充当ul背景de作用,标签导航de关键就是底部border了.全看完之后您会发现其实很简单,但关键还是要有构思.好了!继续学习吧!
快速制作CSS导航菜单教
星期三, 06月 4th, 2008
随着网页标准化观念深入人心,越来越多de网站采用了CSS架构.CSS架构de网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮deCSS菜单开始.众所周知,CSS菜单都是一段相关代码、一段相关代码de编写出来,生成漂亮菜单,今天给大家介绍一款小de软件:CSS Tab Designer!
CSS Tab Designer是一款使用CSS来设计导航菜单de可视化软件,软件内置60多种不同风格de样式,只需修改现成样式模版,就能快速生成CSS菜单.特别值 得一提de是,软件生成deXHTML相关代码严格遵循网页标准,创建deCSS菜单兼容各种主流浏览器,无论是系统自带deInternet Explorer,还是Firefox、Opera、Netscape都不会有问题.
CSS Tab Designer操作很简单,主界面采用三列式布局:项目(Items)、样式(Tab Styles)、预览(Preview)依次排开,几乎所有de操作都在主界面中完成,如图.
新建菜单de步骤非常简单,在“样式(Tab Styles)”中预制了60余种风格各异de菜单样式,先选择需要de样式,接下来点击左侧“项目(Items)”中de“用样本填充(Fill with samples)”,立即就可以在“预览(Preview)”中看到效果,菜单就算生成了.
当然,软件内置样式模版中de菜单项目都是英文,对于中文用户并不适合,我还需要做一些修改.主窗口左侧“项目(Items)”中显示当前de菜单项目,项 目工具栏排列多个按钮,从左到右依次是:添加多个项目(Add Multiple Items)、添加项目(Add Item)、删除项目(Delete Item)、上移(Move Up)、下移(Move Down)、编辑选择项目(Edit Selected Item),如图.
鼠标双击任意当前项目即可进入编辑对话框,我在这里修改原始英文为所需中文即可,如图.
将所有内容修改完毕后,就可以在预览区看到效果了.此时,我发现菜单上de文字并不是预期中出现de中文,而是一些乱码,这是为什么呢？如图.
CSS Tab Designer是一款英文软件,预置编码是针对英语系网页de,所以我需要手工修改编码为中文.由于软件本身并不具备相关代码编辑功能,我将在CSS菜单网页文件生成后再做修改.
预览时面对乱码还是不太好,您可以在预览区空白处点击右键,在右键菜单中选择“编码→简体中文(gb2312)”,预览效果即恢复正常,如图.
不觉间,CSS菜单已经做好,接下来输出文件.点击软件工具栏上“创建HTML(Generate HTML)”按钮,系统转入保存对话框.本例:选择保存文件夹:D:\web,输入文件名:menu,点击“保存”按钮完成.
前面已经说过,软件默认生成de网页编码是英语系de,接下来,我开始做编码修改工作.
进入D:\web目录,一般可以看到两个文件:
menu.html,生成deCSS菜单网页.
menu1.gif,CSS菜单调用de相关图片,实际情况下文件名可能略有不同.
您可以用任意文本编辑器打开menu.html文件,笔者使用de系统自带de“记事本”,打开文件后,找到如下内容:
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
CSS Tab Designer生成文件de默认编码为“ISO-8859-1”,修改为中文编码“gb2312”即可,如图:
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
就这样简单,保存修改结果,再次打开menu.html看看吧,怎么样,没有乱码了吧!
非常好的目录导航文件代码
星期一, 06月 2nd, 2008
这个相关代码虽然短小,但很实用,它可以轻松建立您指定de目录里de指定后缀名文件de超连接,而且可以设定,不会将指定de目录首页导航.
<?php
function navbar(){
$files = dir("."); //指定目录
$pipe = " | "; //管道符
//通过以下de循环搜索目录中所有文件
while ($current = $files->read()) {
//ignor all files not of htm type.
if (strpos($current, "php")!= FALSE) //设定后缀为PHPde文件将被导航
//忽略自己(如 index.html)
{ if (strpos($current, "ndex") == FALSE)
{
print "<a href=’";
print $current;
print "’>";
print $current;
print "</a>";
print $pipe;
};
};
};
};
navbar() //调用函数
?>
简单的用PHP编写的导航条程序
星期一, 06月 2nd, 2008
//简单de用PHP编写de导航条程序
<?php
//导航条配置说明:默认显示de是目录名
//如果不愿意使用目录名,请去掉下面一行注释,并修改数组元素
$label=
array("目录1"=>"导航名1","目录2"=>"导航名2","目录3"=>"导航名3");
$ur1=$REQUEST_URI;
while($ur1 != ""){
$text=basename($ur1);
//获取文件名
if(isset($label[$text]))
{$text=$label[$text]; }
$link=$ur1;
$curx= " > <a href="$link">$text</a>";
$komplettx= $curx.$komplettx;
$ur1=dirname($ur1);
//获取目录名
}
echo $komplettx;
?>
//在页面中可以用include调用该程序
PHP的栏目导航程序
星期一, 06月 2nd, 2008
<?php
$d_label=array("service"=>"有偿服务","teach"=>"家教中心","union"=>"校园服务联盟","job"=>"学生兼职","free"=>"信息库");
$directory=$REQUEST_URI;
while($directory!="/")
{
$d_text=basename($directory);
if(isset($d_label[$d_text])){$d_text=$d_label[$d_text];}
$d_link=$directory;
$d_curx="-><a href=\"$d_link\">$d_text</a>";
$d_komplettx=$d_curx.$d_komplettx;
$directory=dirname($directory);
}
echo "栏目导航:".$d_komplettx;
?>
PHP编程网上资源导航
星期一, 06月 2nd, 2008
一、PHP简介
引用PHP(Hgpertext Preprocessor或Personal Home Page Tools)de官方站点www.php.netde定义来说,PHP是一种服务器端、跨平台、HTML嵌入式de脚本语言.其实,它和大家所熟知deASP一样,是一门常用于Web编程de语言.PHP酝酿于1994年,1995年发布其第一个公开版本,截止目前已发布de最新版本为PHP4.05.
PHP是一种免费软件,它能运行在包括Windows、Linux等在内de绝大多数操作系统环境中,常与免费Web服务软件Apache和免费数据库Mysql配合使用于Linux平台上,具有最高de性能价格比,号称“黄金组合”.
也许PHP最强大和最重要de特征是它de数据库支持,目前其支持范围覆盖了包括Oracle、Sybase、MySQL、ODBC等在内de大多数常见数据库.使用它编写一个含有数据库功能de网页程序变得十分简单.
PHP发展到PHP 3.0de时候有相当长de一段稳定时期,因此很多PHP应用仍然以PHP3为扩展名,现在de系统大多已经逐渐升级到PHP 4.0以上,使用PHP作为扩展名；而PHP与Apache组合使用时,通常会使用PHTML为扩展名,因此,我在网络上很容易辨别PHP系统.
二、网上学习PHP
PHP是生于网络、用于网络、发展于网络de一门语言.它一诞生就被打上了自由发展de烙印.目前在国内外有数以千计de个人和组织de网站在以各种形式、各种语言学习、发展和完善它,并不断地公布最新de应用和研究成果.我能够在网上利用搜索引擎等工具在PHPde官方和众多民间网站上很便捷、廉价地找到丰富de学习、研究资料和软件乃至BBS等交流场所,使我能紧密地关注它de发展,随时观察最新de领域动态.这一切,对于PHP本身,对于我这些关心WEB开发de编程爱好者来说,无疑都是一笔巨大de财富.
三、PHP学习网站、论坛游
随着PHP在国内外de日渐风行,PHP在国内de学习和研究也逐渐掀起热潮,涌现出大批高质量dePHP技术中文网站.为倡导网络技术de本地化,我将着重介绍中文PHP技术网站.
1.www.php.net PHP官方网站(英文)
不论您是初学还是精通,这个PHPde大本营是必然拜访之地.在这里我能找到关于PHPde最新消息和软件版本.就连那些PHP高手也无不常常造访而获取最新信息.如果您de英文不成问题,您就能在这里找到几乎关于PHPde一切,包括英文等文字de手册、批注、软件源相关代码甚至已经发现deBUG等.
2.www.zend.com Zend官方网站(英文)
Zend是PHPde商业用加速器.因此除了Zend本身,该网站完全为PHP服务.它具有丰富de资料、相关代码资源.其论坛内容也相当丰富,可以看出发言者夹杂着以英文为主de各色方言,是全球PHP爱好者求医问药de好去处.如果您有疑难杂症,不妨来此一试.同时,由于这里也是研究PHPde鼻祖,许多问题de答案也许就在论坛de历史记录里,找找看吧.
3.www.phpuser.com PHP中文网站
这是较早dePHP技术网站之一.页面设计简洁,版块清晰明朗.设置文章教程、论坛、安装指南、程序相关代码、相关下载等栏目,并支持注册用户上传文章、资料.网站内容丰富.论坛较为活跃,潜伏着多路PHP高手.
4. www.phpease.com PHP易站
号称PHP开发者de驿站.搜集了相当多dePHP相关代码、文章,de确是PHP开发者查阅参考资料de好地方,同时很多文章也非常适合初学者.
5. www.phpx.com 中国PHP联盟
由国内较早dePHP技术网站——“闹着玩工作室”个人主页演变而来,并由几位PHP技术高手支持,其网站页面相对平直,但是其论坛由于几路玩家de支持,让不少PHP爱好者趋之若骛.
其他较为专业de网站还有中国PHP网站(chinaphp.com)、PHP世纪网(php2000.com)、PHP之星(phpstar.com)等.
6.如果上述介绍de几个专业网站让PHPde初学者望而却步、无从下手de话,那么笔者再介绍几个界面相对柔和,气氛相对轻松de学习网站.
cgreen.363.net PHP入门者园地
这是PHP爱好者东方一蛇de老家.东方一蛇一直活跃在许多PHP论坛中,并发表了很多原创文章.这里有很多基础知识,学习PHP,就从这里起步吧(图4).
php.silversand.net PHP资源网
这里de内容也很简单,但都是一些入门必需de资料和软件,直接了当,没有那么多奢华de修饰,也许很适合您呢.
最后,我想再推荐一个非比寻常de论坛http://www.chinaasp.com/php/.他可以说是国内论坛在技术和形式及概念上de领导者.他de技术论坛在国内具有相当de影响力,拥有众多版面,涵盖了大多数流行de网络技术；聚集着大批在网络开发上具有特长de爱好者,当然也包括PHP.由于Web开发涉及到DHTML、数据库、网络安全等一系列相关内容,所以ChinaASP论坛至今仍是一个在形式上具有特色、内容上相当丰富而全面de技术交流场所.您一定会不虚此行(图5).
四、PHP学习工具下载
学习PHP,最主要de莫过于搭建实验环境和熟悉语法函数了.所以学习工具就有了两大块.
(一)下载PHP及相关软件
搭建PHP环境涉及到系统平台、Web服务软件和数据库软件及PHP本身.根据我现有计算机软、硬件环境,我可以自由选择相应de软件.通常我会选择Windows98/NT为实验平台,这样我可以下载PHP4.0以上deWindows版本,数据库可以下载MysqldeWindows版本(www.mysql.org)或者使用微软deMSSQL,Web服务软件可以直接使用Windows98dePWS或者Windows NTdeIIS,想专业些可以下载ApachedeWindows版本(www.apache.com).如果您想搭建Linux下运行de实战环境,那么所有这些软件必须下载其对应于Linuxde版本,有de可能需要在Linux下编译生成,有许多文章都有介绍.
(二)下载PHP用户手册
用户手册是学习PHPde“杀手锏”,许多PHPde高手仍然随时备查.手册通常为PHP4.0,有中、英文版本,中文版中还有HTML、ZIP和CHM几种格式.很多网站都有下载.建议下载CHM格式,查阅较为方便.
另外值得一提de就是使用PHPdeMysql管理工具-phpMyadmin,如果您要使用Mysql做您de数据库,那么您一定会用到、而且喜欢这个工具de.在phpwizard.net上可以下载.
五、PHPde源相关代码资源
一般来说,在国内网站已经能找到相当多de源相关代码资源.但是无庸质疑de是,PHPde祖先是在国外,我de很多开发和研究都是以他们de成果为基础de,所以,真正优秀而且全面de源相关代码等资源还是国外de网站上比较多.
www.phpbuilder.com
非常知名dePHP技术专业网站.页面清晰明朗,对文章、源相关代码有详细分类,是PHP爱好者淘金de好去处.
www.weberdev.com
分类更为细腻,达80种之多.对使用PHP进行Web开发所涉及到de常用技术Mysql、JavaScript等也同时列表,非常方便,
www.hotscripts.com
非常全面de一个Web技术网站,囊括了现今所有主流Web开发技术,有相当丰富de文章和源相关代码,并附有评注等级,非常直观.
六、PHP免费空间
支持PHP系统de免费主页空间目前也逐渐增多了,但是随着用户数量de激增和主页内容de混乱,很多网站又纷纷减少和关闭空间,因此,真正能使用de高速PHP免费空间还有待大家更多地去发掘.
www.51.net北京虎翼网
20M空间,速度较快,不支持Mysql.有弹出式广告窗口,同时可以申请yourname.51.net域名.
大家可要把握机会哦!一、PHP简介
引用PHP(Hgpertext Preprocessor或Personal Home Page Tools)de官方站点www.php.netde定义来说,PHP是一种服务器端、跨平台、HTML嵌入式de脚本语言.其实,它和大家所熟知deASP一样,是一门常用于Web编程de语言.PHP酝酿于1994年,1995年发布其第一个公开版本,截止目前已发布de最新版本为PHP4.05.
PHP是一种免费软件,它能运行在包括Windows、Linux等在内de绝大多数操作系统环境中,常与免费Web服务软件Apache和免费数据库Mysql配合使用于Linux平台上,具有最高de性能价格比,号称“黄金组合”.
也许PHP最强大和最重要de特征是它de数据库支持,目前其支持范围覆盖了包括Oracle、Sybase、MySQL、ODBC等在内de大多数常见数据库.使用它编写一个含有数据库功能de网页程序变得十分简单.
PHP发展到PHP 3.0de时候有相当长de一段稳定时期,因此很多PHP应用仍然以PHP3为扩展名,现在de系统大多已经逐渐升级到PHP 4.0以上,使用PHP作为扩展名；而PHP与Apache组合使用时,通常会使用PHTML为扩展名,因此,我在网络上很容易辨别PHP系统.
二、网上学习PHP
PHP是生于网络、用于网络、发展于网络de一门语言.它一诞生就被打上了自由发展de烙印.目前在国内外有数以千计de个人和组织de网站在以各种形式、各种语言学习、发展和完善它,并不断地公布最新de应用和研究成果.我能够在网上利用搜索引擎等工具在PHPde官方和众多民间网站上很便捷、廉价地找到丰富de学习、研究资料和软件乃至BBS等交流场所,使我能紧密地关注它de发展,随时观察最新de领域动态.这一切,对于PHP本身,对于我这些关心WEB开发de编程爱好者来说,无疑都是一笔巨大de财富.
三、PHP学习网站、论坛游
随着PHP在国内外de日渐风行,PHP在国内de学习和研究也逐渐掀起热潮,涌现出大批高质量dePHP技术中文网站.为倡导网络技术de本地化,我将着重介绍中文PHP技术网站.
1.www.php.net PHP官方网站(英文)
不论您是初学还是精通,这个PHPde大本营是必然拜访之地.在这里我能找到关于PHPde最新消息和软件版本.就连那些PHP高手也无不常常造访而获取最新信息.如果您de英文不成问题,您就能在这里找到几乎关于PHPde一切,包括英文等文字de手册、批注、软件源相关代码甚至已经发现deBUG等.
2.www.zend.com Zend官方网站(英文)
Zend是PHPde商业用加速器.因此除了Zend本身,该网站完全为PHP服务.它具有丰富de资料、相关代码资源.其论坛内容也相当丰富,可以看出发言者夹杂着以英文为主de各色方言,是全球PHP爱好者求医问药de好去处.如果您有疑难杂症,不妨来此一试.同时,由于这里也是研究PHPde鼻祖,许多问题de答案也许就在论坛de历史记录里,找找看吧.
3.www.phpuser.com PHP中文网站
这是较早dePHP技术网站之一.页面设计简洁,版块清晰明朗.设置文章教程、论坛、安装指南、程序相关代码、相关下载等栏目,并支持注册用户上传文章、资料.网站内容丰富.论坛较为活跃,潜伏着多路PHP高手.
4. www.phpease.com PHP易站
号称PHP开发者de驿站.搜集了相当多dePHP相关代码、文章,de确是PHP开发者查阅参考资料de好地方,同时很多文章也非常适合初学者.
5. www.phpx.com 中国PHP联盟
由国内较早dePHP技术网站——“闹着玩工作室”个人主页演变而来,并由几位PHP技术高手支持,其网站页面相对平直,但是其论坛由于几路玩家de支持,让不少PHP爱好者趋之若骛.
其他较为专业de网站还有中国PHP网站(chinaphp.com)、PHP世纪网(php2000.com)、PHP之星(phpstar.com)等.
6.如果上述介绍de几个专业网站让PHPde初学者望而却步、无从下手de话,那么笔者再介绍几个界面相对柔和,气氛相对轻松de学习网站.
cgreen.363.net PHP入门者园地
这是PHP爱好者东方一蛇de老家.东方一蛇一直活跃在许多PHP论坛中,并发表了很多原创文章.这里有很多基础知识,学习PHP,就从这里起步吧(图4).
php.silversand.net PHP资源网
这里de内容也很简单,但都是一些入门必需de资料和软件,直接了当,没有那么多奢华de修饰,也许很适合您呢.
最后,我想再推荐一个非比寻常de论坛http://www.chinaasp.com/php/.他可以说是国内论坛在技术和形式及概念上de领导者.他de技术论坛在国内具有相当de影响力,拥有众多版面,涵盖了大多数流行de网络技术；聚集着大批在网络开发上具有特长de爱好者,当然也包括PHP.由于Web开发涉及到DHTML、数据库、网络安全等一系列相关内容,所以ChinaASP论坛至今仍是一个在形式上具有特色、内容上相当丰富而全面de技术交流场所.您一定会不虚此行(图5).
四、PHP学习工具下载
学习PHP,最主要de莫过于搭建实验环境和熟悉语法函数了.所以学习工具就有了两大块.
(一)下载PHP及相关软件
搭建PHP环境涉及到系统平台、Web服务软件和数据库软件及PHP本身.根据我现有计算机软、硬件环境,我可以自由选择相应de软件.通常我会选择Windows98/NT为实验平台,这样我可以下载PHP4.0以上deWindows版本,数据库可以下载MysqldeWindows版本(www.mysql.org)或者使用微软deMSSQL,Web服务软件可以直接使用Windows98dePWS或者Windows NTdeIIS,想专业些可以下载ApachedeWindows版本(www.apache.com).如果您想搭建Linux下运行de实战环境,那么所有这些软件必须下载其对应于Linuxde版本,有de可能需要在Linux下编译生成,有许多文章都有介绍.
(二)下载PHP用户手册
用户手册是学习PHPde“杀手锏”,许多PHPde高手仍然随时备查.手册通常为PHP4.0,有中、英文版本,中文版中还有HTML、ZIP和CHM几种格式.很多网站都有下载.建议下载CHM格式,查阅较为方便.
另外值得一提de就是使用PHPdeMysql管理工具-phpMyadmin,如果您要使用Mysql做您de数据库,那么您一定会用到、而且喜欢这个工具de.在phpwizard.net上可以下载.
五、PHPde源相关代码资源
一般来说,在国内网站已经能找到相当多de源相关代码资源.但是无庸质疑de是,PHPde祖先是在国外,我de很多开发和研究都是以他们de成果为基础de,所以,真正优秀而且全面de源相关代码等资源还是国外de网站上比较多.
www.phpbuilder.com
非常知名dePHP技术专业网站.页面清晰明朗,对文章、源相关代码有详细分类,是PHP爱好者淘金de好去处.
www.weberdev.com
分类更为细腻,达80种之多.对使用PHP进行Web开发所涉及到de常用技术Mysql、JavaScript等也同时列表,非常方便,
www.hotscripts.com
非常全面de一个Web技术网站,囊括了现今所有主流Web开发技术,有相当丰富de文章和源相关代码,并附有评注等级,非常直观.
六、PHP免费空间
支持PHP系统de免费主页空间目前也逐渐增多了,但是随着用户数量de激增和主页内容de混乱,很多网站又纷纷减少和关闭空间,因此,真正能使用de高速PHP免费空间还有待大家更多地去发掘.
www.51.net北京虎翼网
20M空间,速度较快,不支持Mysql.有弹出式广告窗口,同时可以申请yourname.51.net域名.
大家可要把握机会哦!
