本文目录
网页设计 制作导航条 如何制作
一, 键盘上可以直接输 |
二, 如果是一条虚线的话, 那么是这样做的:
用Fireoworks新建一个1*3PX的图片, 在中间画一个点,然后将其导出,再在DW里建一个单元格,将其背景设为这个图片(注意,让它垂直方向重复,水平方向不重复 -- CSS),大功告成
三,CSS
《a href=“#“ style=“border-right:1px solid #000“》链接《/a》
如何用DW制作导航条
兄弟,你要做网页,代码肯定是要学的 不懂可以私
相信我,慢慢来不难的,我帮你写好了,你只需要修改自己喜欢的样式即可
并且所有要修改样式的地方我都帮你备注好了
您只需要把 这堆东西放入《head》《/head》两个标签之间的中间
《style》
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK; /*导航栏背景颜色*/
}
li {
float: left; /*在导航栏内对齐方式*/
}
li a {
display: block;
color: white; /*字体颜色*/
text-align: center; /*字居中*/
padding: 14px 14px; /*框大小*/
text-decoration: none; /*把《a》标签自带的下划线去掉*/
}
li a:hover {
background-color: #228B22; /*鼠标经过框框时的背景颜色*/
font-size: 25px; /*鼠标经过时字体大小*/
}
《/style》
在把 这堆放在《body》《/body》之间
《ul》
《li》《a class=“active“ href=“#home“》主页《/a》《/li》
《li》《a href=“#news“》新闻《/a》《/li》
《li》《a href=“#contact“》联系《/a》《/li》
《li》《a href=“#about“》关于《/a》《/li》
《/ul》
示例页面HTML
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“》
《title》导航栏《/title》
《style》
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: BLACK; /*导航栏背景颜色*/
}
li {
float: left; /*在导航栏内对齐方式*/
}
li a {
display: block;
color: white; /*字体颜色*/
text-align: center; /*字居中*/
padding: 14px 14px; /*框大小*/
text-decoration: none; /*把《a》标签自带的下划线去掉*/
}
li a:hover {
background-color: #228B22; /*鼠标经过框框时的背景颜色*/
font-size: 25px; /*鼠标经过时字体大小*/
}
《/style》
《/head》
《body》
《ul》
《li》《a class=“active“ href=“#home“》主页《/a》《/li》
《li》《a href=“#news“》新闻《/a》《/li》
《li》《a href=“#contact“》联系《/a》《/li》
《li》《a href=“#about“》关于《/a》《/li》
《/ul》
《/body》
《/html》
如何利用ps制作漂亮的网站导航条
打开PS，新建一文件，大小设置为“200*800”，背景色设为“透明”。
选择“工具栏”中的“圆角矩形工具”项，并设置合适的“半径”（如20像素），然后在绘图区域进行绘制，可以通过按键盘组合键“Ctrl+T”对其进行调整。
切换至“路径”面板，点击“将路径作为选区载入”按钮。
接着返回“图层”面板，选择“工具栏”中的渐变工具，并设置合适的渐变色进行填充。
接着双击该图层，为其添加“浮雕 图层样式”
新建一个“图层2”，接着选择“圆角矩形工具”，将半径设置为“10像素”，并绘制如图所示的图形。然后切换至“路径”面板，点击“将路径作为选区载入”按钮，然后返回图层面板，填充一种纯色。
双击“图层2”，为其添加“图层样式”
接着将“图层2”拖动到“新建图层”按钮上以创建“图层2 副本”，接着选择“移动”工具将“图层2 副本”移动到合适的位置。
按住键盘上“Ctrl”键不放的同时，点击“图层2 副本”以选中该图像，然后为其填充另一种颜色。
基本的导航栏结构已经做好。接下来创建切片。点击“工具栏”中的“切片”工具，然后对整个图像区域进行划分。
最后点击“文件”→“存储为Web所有格式”项，选择文件类型为“JPEG”格式，接着点击“存储”按钮，在打开的“另存为”窗口中将“存储类型”设置为“网页和图像”，最后点击“保存”按钮。
网页设计导航条
下面的代码，你去看看，不好用再说。
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《title》无标题文档《/title》
《style type=“text/css“》
《!--
body {
background-color: #0099FF;
}
#navigation {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navigation li {
border-bottom-style: none;
border-bottom-color: #ed9f9f;
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-top-color: #ed9f9f;
border-right-color: #ed9f9f;
border-left-color: #ed9f9f;
float: left;
}
#navigation li a {
text-decoration: none;
display: block;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 0.5em;
border-right-width: 1px;
border-left-width: 12px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #711515;
border-left-color: #711515;
border-top-style: none;
border-bottom-style: none;
width: 50px;
text-align: center;
margin: 0px;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFFFF;
background-color: #c11136;
}
#navigation li a:hover {
color: #ffff00;
background-color: #990020;
}
#navigation ul li:hover ul,#navigation ul a:hover ul {
visibility: visible;
}
#navigation ul ul {
visibility: hidden;
}
#navigation ul ul li {
clear: both;
}
#navigation ul ul li a {
border: 1px solid #CCCCCC;
}
#navigation ul ul li a:link, #navigation ul ul li a:visited {
color: #000000;
background-color: #FFCC66;
}
#navigation ul ul li a:hover {
color: #006699;
background-color: #99CC00;
}
.nav {
border: 1px solid #0099CC;
position: absolute;
width: 357px;
left: 112px;
top: 34px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 12px;
}
.nav li {
float: left;
}
.nav li a {
border: 1px solid #FF3333;
display: block;
padding: 5px;
background-color: #FFCC33;
text-decoration: none;
}
--》
《/style》
《/head》
《body》
《div id=“navigation“》
《ul》
《li》《a href=“#“》首页《/a》《/li》
《li》《a href=“#“》关于我们《/a》《/li》
《li》《a href=“#“》产品展示《/a》
《div》
《ul》
《li》《a href=“#“》产品1一《/a》《/li》
《li》《a href=“#“》产品2一《/a》《/li》
《li》《a href=“#“》产品3一《/a》《/li》
《li》《a href=“#“》产品4一《/a》《/li》
《li》《a href=“#“》产品5一《/a》《/li》
《li》《a href=“#“》产品6一《/a》《/li》
《/ul》
《/div》
《/li》
《li》《a href=“#“》联系电话《/a》
《div》
《ul》
《li》《a href=“#“》产品1一《/a》《/li》
《li》《a href=“#“》产品2一《/a》《/li》
《li》《a href=“#“》产品3一《/a》《/li》
《li》《a href=“#“》产品4一《/a》《/li》
《li》《a href=“#“》产品5一《/a》《/li》
《li》《a href=“#“》产品6一《/a》《/li》
《/ul》
《/div》
《/li》
《li》《a href=“#“》公司介绍《/a》《/li》
《/ul》
《/div》
《/body》
《/html》
网页中的导航条怎样简单的制作出来
不麻烦啊。。。。css文本导航条，你多去学学就很简单啊。。。你加我qq，我传个给你，这个里面有很多精美的导航。。。 //css代码 body { margin:0; padding:0; font: bold 11px/1.5em Verdana; } h3 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px; } img { border: none; } /*- Menu Tabs 1--------------------------- */ #tabs1 { float:left; width:100%; background:#F4F7FB; font-size:93%; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(“images/tableft1.gif“) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(“images/tabright1.gif“) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } //图片 //html代码 《h3》Tab Menu 1《/h3》 《div id=“tabs1“》 《ul》 《li》《a href=“#“ title=“Link 1“》《span》Link 1《/span》《/a》《/li》 《li》《a href=“#“ title=“Link 2“》《span》Link 2《/span》《/a》《/li》 《li》《a href=“#“ title=“Link 3“》《span》Link 3《/span》《/a》《/li》 《li》《a href=“#“ title=“Longer Link Text“》《span》Longer Link Text《/span》《/a》《/li》 《li》《a href=“#“ title=“Link 5“》《span》Link 5《/span》《/a》《/li》 《li》《a href=“#“ title=“Link 6“》《span》Link 6《/span》《/a》《/li》 《li》《a href=“#“ title=“Link 7“》《span》Link 7《/span》《/a》《/li》 《/ul》 《/div》 《br /》《br /》
记得采纳啊
