首页导航模板
篇一:各种网页 导航栏代码
<title</title
<style
body {font-size:12px;font-family:宋体}
ul.TabBarLevel1{
}
ul.TabBarLevel1 li{
float:left; padding:0; height:29px; margin-right:1px; list-style:none; margin:0; padding:0; height:29px; background-image:url();
background:url() left top no-repeat;
}
ul.TabBarLevel1 li a{
display:block;
line-height:29px; padding:0 20px; color:#333;
1
background:url() right top no-repeat;
white-space: nowrap;
}
ul.TabBarLevel1 li.Selected{
background:url() left top no-repeat;
}
ul.TabBarLevel1 li.Selected a{
background:url() right top no-repeat;
}
ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
} color:#F30; text-decoration:none;
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
color:#000;
2
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1
li.Selected a:active{
color:#F30;
} text-decoration:none;
div.HackBox {
padding : 2px 2px ;
border-left: 2px solid #6697CD;
border-right: 2px solid #6697CD;
border-bottom: 2px solid #6697CD;
}
</style
</head
<body
<div id=Whatever
<ul class=TabBarLevel1 id=TabPage1
<li id=Tab1<a href=# onclick=javascript:
switchTab('TabPage1','Tab1');宝贝详
情</a</li
<li id=Tab2 class=Selected<a href=# onclick=Javascript:switchTab('TabPage1','
Tab2');其他信息</a</li
3
<li id=Tab3<a href=# onclick=javascript:
switchTab('TabPage1','Tab3');出价记
录</a</li
<li id=Tab4<a href=# onclick=javascript:
switchTab('TabPage1','Tab4');留言簿
</a</li
</ul <div
class=HackBox<br<brXXXXXXXX<br</div
</div
<script language=JavaScript
//Switch Tab Effect
function switchTab(tabpage,tabid){
var oItem = document.getElementById(tabpage);
for(var i=0;i<oItem.children.length;i++){ var x =
oItem.children(i); x.className = ; var y = x.getElementsByTagName('a'); y[0].style.color=#333333; }
document.getElementById(tabid).className = Selected;
<br</li
<li style=text-align:center;<FONT color=#ff0000[1]</font
href=Article_177584_2.html[2]</a <a
4
href=Article_177584_2.html下一页</a </li <li
<script src=/gg/end.js</script<br
<script language=javascript
function copypageurltitle()
{
var clipBoardContent='';
clipBoardContent =document.title;
clipBoardContent+='\r\n';
clt;br
</li
<li class=title一种不错的网页导航栏原代码[网页特效]
相关文章:</li
<li?<a href=/InfoView/Article_188458.html target=_blank title=网页设计制作试
及参考答案网页设计
制作试题及参考答案</a</li
<li?<a href=/InfoView/Article_27653.html target=_blank title=五个反弹后门的源代码五个反弹后门的
源代码</a</li
<li?<a href=/InfoView/Article_195109.html target=_blank title=QQ空间非主流漂浮物代码10款QQ空
间非主流漂浮物代码10款</a</li
<li?<a href=/InfoView/Article_104373.html
5
target=_blank title=QQ空间超炫彩色字导航代码QQ空间
超炫彩色字导航代码</a</li
<li?<a href=/InfoView/Article_20804.html target=_blank title=新仙剑奇侠传 物品代码及金钱、人物属
性、仙术修改新仙剑奇侠传 物品代码及金钱、人物属性、
仙术修改</a</li
<a
<li?<a href=/InfoView/Article_194619.html target=_blank title=《圣安地列斯》作弊代码码中英对照《圣
安地列斯》作弊代码码中英对照</a</li
<li?<a href=/InfoView/Article_157021.html target=_blank title=显示日期和时间_QQ空间时间代码显示
日期和时间_QQ空间时间代码</a</li
<li?<a href=/InfoView/Article_58995.html target=_blank title=QQ空间自动刷留言板代码QQ空间自
动刷留言板代码</a</li
<li class=title一种不错的网页导航栏原代码[网页特
效] 相关软件</li
<li?<a href=/SoftView/SoftView_54694.html target=_blank title=凯立德手机导航软件 WindowMobile
0909 17B1ZF4 官方正式版凯立德手机导航软件
WindowMobile 0909 17B1ZF4 官方正式版</a</li
6
<li?<a href=/SoftView/SoftView_49278.html target=_blank title=CSS 视频教程 顶级网页设计师的必修
曹鹏老师作品CSS 视频教程 顶级网页设计师的必修 曹鹏
老师作品</a</li
<li?<a href=/SoftView/SoftView_53146.html target=_blank title=《交错的视线》中文硬盘版《交错的视
线》中文硬盘版</a</li
<li?<a href=/SoftView/SoftView_44025.html target=_blank title=星光网页自动刷新器 1.0星光网页自动
刷新器 1.0</a</li
<li?<a href=/SoftView/SoftView_2031.html target=_blank title=佳易网页王 V4.1佳易网页王
V4.1</a</li
<li?<a href=/SoftView/SoftView_38027.html target=_blank title=酒店宾馆饭店网站后台源代码网页模板
1.00酒店宾馆饭店网站后台源代码网页模板
1.00</a</li
<li?<a href=/SoftView/SoftView_58384.html target=_blank title=《代码之美》 《代码之美》 (精选中文
版PDF
)</a</li
<li?<a href=/SoftView/SoftView_29248.html target=_blank title=精美网页制作工具Frontpage2000精美
7
网页制作工具Frontpage2000</a</li
<p上一篇:<a href=/InfoView/Article_177583.html title=一种利用网页框架设计的下拉菜单一种利用网页框架
设计的下拉菜单</a</p
<p下一篇:<a href=/InfoView/Article_177585.html title=效果直逼flash的css+div+js菜单效果直逼flash的
css+div+js菜单</a</p
<li特别声明:本站除部分特别声明禁止转载的专稿外
的其他文章可以自由转载,但请务必注明出处和原始作
</li
<li者.文章版权归文章原始作者所有.对于被本站转载
文章的个人和网站,我们表示深深的谢意。如果本站转</li
<li载的文章有版权问题请联系编辑人员,我们尽快予以
更正. 转载请注明来源:</li
</ul
</div
<div id=article_right style=overflow:hidden;
<h3精品推荐</h3
<h3<a href=/InfoList/Article_Category.html target=_blank相关分类</a</h3 <div
style=
-wrap:break-word;word-break:break-all;white-space:normal; ?<a
8
href=/InfoList/Catalog_14_1.htmlHtml</a
?<a href=/InfoList/Catalog_36_1.htmlFrontPage</a
?<a href=/InfoList/Catalog_47_1.html经验技巧</a
<br?<a href=/InfoList/Catalog_70_1.htmlCss</a
?<a href=/InfoList/Catalog_73_1.html网页特效</a
?<a
href=/InfoList/Catalog_92_1.htmlDreamWeaver</a
<br?<a href=/InfoList/Catalog_122_1.html源码精华
</a
?<a href=/InfoList/Catalog_131_1.htmlXML</a
</div
<p align=center<script
src=/gg/all_150_60.js</script</p
<h3<a href=/InfoList/Top_1.html target=_blank热
点TOP10</a</h3
<div
style=word-wrap:break-word;word-break:break-all;white-space:normal;<table width=100% border=0 cellspacing=0 cellpadding=1
<tr
<td?<a href=/InfoView/Article_211294.html target=_blank title=很全的可爱的时钟代码很全的可爱的时
9
钟代码[图]</a </td
</tr
<tr
<td?<a href=/InfoView/Article_177787.html target=_blank title=JS实现的一种网页下拉菜单[网页特
效]JS实现的一种网页下拉菜单[网页特效]</a </td
</tr
篇二:淘宝网店导航颜色修改,及模板尺寸
这里值得注意的是,拓展版68元/月,我用的是专业版50
元/月(1砖以下免费),代码中的文字是可以一同复制的,
“ # ”后面6位为颜色代码,修改代码,即可得到想要的效果。
颜色代码网址/other/rgb.htm
这个是可以更改的,点击导航条编辑,进入显示设置,
下面是举例代码,可以更改自己喜欢的颜色:
/* 导航条背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0
0 #f86c4c}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{background: none repeat
scroll 0 0 #f86c4c}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{border-right:1px #f86c4c
10
solid;}
/*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .title{color:#000000}
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #f86c4c;}
/*所有分类右边线*/
.all-cats .link{border-right:1px #f86c4c solid;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{color:#000000}
淘宝网店装修模板尺寸大小及格式大全
淘宝店铺装修在用大量图片的时候你是否注意到,如果
尺寸不对则会变形或者无法上传呢,那么你知道淘宝店铺
在装修不同页面所对应的尺寸是多少,格式是什么吗,今天
淘宝学堂带来淘宝网店装修模板尺寸大小及格式,希望帮助
大家避免这些问题。
1.店标
大小:100*100px <=80k
代码:无(图片做好后直接上传)
格式:jpg、gif
设置:管理我的店铺—基本设置—店标—浏览—选择本
地做好店标文件
2、旺旺名片/头像
11
大小:120*120px <=100k
代码:无(图片做好后直接上传)
格式:jpg、gif
3、宝贝图片
大小:500*500px <=120k
代码:无(图片做好后直接上传)
格式:jpg、gif
4、旺铺店招
大小:950*150px <=80k
代码:无(图片做好后直接上传)
格式:jpg、gif、png
5、旺铺促销区
大小:宽度<=735px,高度无限制
代码:<img src=店铺公告地址/(图片必须放置在网络空间或网络像册,没有可以先申请一个,需支持宝淘外链的)
格式:jpg、gif、html、文本
6、旺铺宝贝描述
大小:宽度<=722px(窄),宽度<=922px(宽),高度随意
代码:<img src=店铺公告地址/(图片必须放置在网络空间或网络像册,没有可以先申请一个,需支持宝淘外链
12
的)
格式:jpg、gif、html、文本
普通店铺的宝贝描述尺寸大小没有什么限制,但考虑到显示器的显示尺寸,应掌握在1000PX以下。
7、宝贝分类
大小:宽度<=160,高度随意
代码:<img src=宝贝分类地址/(图片必须放置在网络空间或网络像册,没有可以先申请一个,需支持宝淘外链的)
格式:jpg、gif(地址不要超过40个字符)
8、背景音乐
代码:<BGSOUND balance=0 src=音乐地址 volume=0 loop=infinite </BGSOUND
格式:最好为WMA
设置:管理我的店铺—基本设置—公告
9、悬挂饰物
代码:<img src=图片地址 style=left:20px;position:relative;top:0px;
格式:同上,须放置在网络空间或网络像册中的图片
设置:管理我的店铺—基本设置—公告
10、论坛签名
大小:468*60px <=100k
代码:无(图片做好后直接上传)
13
格式:jpg、gif
淘宝店铺装修最佳尺寸
普通店铺
1.店标
大小:100*100px <=80k
代码:无(图片做好后直接上传)
格式:jpg、gif
设置:管理我的店铺—基本设置—店标—浏览—选择本地做好店标文件
2. 店铺公告尺寸:320*400
3.宝贝分类尺寸:88*88和88*30(宝贝分类含3个)
4.店铺介绍尺寸:600*450
5.计数器尺寸:137*94
6.论坛签名尺寸:468*60
7.店标尺寸:100*100
8.旺旺名片/头像
大小:120*120px <=100k
代码:无(图片做好后直接上传)
格式:jpg、gif
9、宝贝图片
大小:500*500px <=120k
代码:无(图片做好后直接上传)
14
格式:jpg、gif
旺铺
1.店招
大小:950*150px <=80k
代码:无(图片做好后直接上传)
格式:jpg、gif、png
2、旺铺促销区
大小:宽度<=735px,高度无限制
代码:<img src=店铺公告地址/(图片必须放置在网络空间或网络像册,没有可以先申请一个,需支持宝淘外链的)
格式:jpg、gif、html、文本
3、旺铺宝贝描述
大小:宽度<=722px(窄),宽度<=922px(宽),高度随意
代码:<img src=店铺公告地址/(图片必须放置在网络空间或网络像册,没有可以先申请一个,需支持宝淘外链的)
格式:jpg、gif、html、文本
普通店铺的宝贝描述尺寸大小没有什么限制,但考虑到显示器的显示尺寸,应掌握在1000PX以下。
4、宝贝分类
15
大小:宽度<=160,高度随意
代码:<img src=宝贝分类地址/(图片必须放置在网络空间或网络像册,没有可以先申请一个,需支持宝淘外链的)
格式:jpg、gif(地址不要超过40个字符)
5、背景音乐
代码:<BGSOUND balance=0 src=音乐地址 volume=0 loop=infinite </BGSOUND
格式:最好为WMA
设置:管理我的店铺—基本设置—公告
6、悬挂饰物
代码:<img src=图片地址 style=left:20px;position:relative;top:0px;
格式:同上,须放置在网络空间或网络像册中的图片
设置:管理我的店铺—基本设置—公告
7、论坛签名
大小:468*60px <=100k
篇三:制作网页模板photo
综合网站建设练习
第一章 企业类网站项目
? 教学目的:
网站设计涉及到艺术设计、网页制作技术及计算机软硬件
16
应用技术等相关领域。通过本章的学习使学生对网站的规划与设计有一个较全面深入的了解,并通过企业类网站建设实例了解网站设计的
与制作技巧,包括网站规划、网页布局、制作首页模板、切割图像素材及在Dreamweaver中进行网页元素的排版等。 ? 教学重点:
学会使用PhotoShop制作网站首页模板、用Flash制作网页横幅动画、用Fireworks切割网页模板、用Dreamweaver进行排版。
? 教学难点:
使用Fireworks切割网页模板、用Dreamweaver进行排版。
实例说明:
本实例以一个名为“广州臣富有限公司”的企业类网站作为教学范例,该网站以IT产品作为经营的主旨,同时提供投资咨询服务、理财代理服务、商业调查服务、企业版权服务等。网站采用了一种清新的设计
,首页使用了简单的配色,营造出一种素雅的感觉。 第一部分 用PhotoShop制作网页模板
一、 页面布局的规划
因为本例使用企业网站的经销方向比较窄,,所以相对首页需要发布的信息内容也不是很多,因此在布局上设计比较简单。针对网站的布局,首页将分成导航区、标题区、内容
17
区与页脚区。如图1所示(来自:www.xLtKwj.coM 小 龙 文档网:首页导航模板)。
标题栏
导航区
标题区
横幅区
背景图案
内容区 内容区
图1
划分基本区域后,还需要进行更加详细的二次界面分割。其中内容区需要划分出横幅区和信息区,信息区还需要依照各个标题信息的需要,划分不同的区域,例如公司简介区、产品介绍区、咨询服务区等,详细的页面布局规划如图2、3所示。
图2(基本布局)
图3(二次分割)
二、 图像素材的准备
在设计网页前,需要准备好一些必要的图像素材。为了让这些素材符合网页设计,需要针对图像的尺寸、效果做一些编辑,以便后续直接使用这些图像素材。本节将利用photoshop软件对图像素材进行一些处理,其中包括裁剪、描边等,处理好的图像素材如图5所示:
18
图5
编辑图像素材的操作步骤如下:
1( 打开Photoshop软件,新建空白图像文件。按图6设置参数。
图6
2( 新建一图层2,选择“矩形工具”,并设置绘图模式为“填充像素”,前景颜色为白色,接着在
图像上绘制一个矩形,如图7所示。
图7
3( 添加图层描边。双击图层2,打开“图层样式”对话框,选择“描边”复选框,设置描边大小
为1像素,填充颜色为“#999999”。如图8所示。
图8
4( 裁剪图像素材。打开“公司介绍.jpg”图像,用“裁剪工具”对图像进行裁剪。如图9所示,
双击裁剪区域即可裁剪图像。
相关热词搜索:首页 模板 导航 导航栏模板 导航网站模板
19