网页设计导航栏代码模板(网页设计中导航栏)
如何设计一个html页面的导航栏在手机端自适应
用以下代码开头：
!DOCTYPE HTMLhtmlheadmeta charset="utf-8"meta name="viewport" content="width=device-width, initial-scale=1"
使用百分比定义宽度，，
CSS代码可以适当使用：
@media only screen and (max-width:449px){
}
自动根据屏幕像素 调用不同的CSS代码。
网页导航栏制作：如何为网页添加导航栏
01
制作一个放导航栏的容器
制作一个放导航栏的容器，容器名为nav，容器宽为1000px，高为30px，背景颜
色为灰色，相关代码如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
div id="nav"/div
02
显示结果
在浏览器中显示的结果为下图所示：
03
在容器中放入一些导航栏
导航栏代码如下:
ul
li模块一/li
li模块二/li
li模块三/li
li模块四/li
li模块五/li
li模块六/li
/ul
04
为导航栏添加一些属性
style type="text/css"
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
#nav ul
{
width:960px;
height:35px;
}
#nav ul li
{
float:left;
width:100px;
float:left;
list-style:none;
background:yellow;
line-height:35px;
}
/style
05
导航栏在浏览器页面的显示结果如下图所示：
求网页制作导航栏的代码或方法
css代码如下：---------------------
#box_topbar {
/*width: 980px;*/
width:100%;height:135px;
z-index:100;
_position: relative ;
_top:0px;
}
#topNav {
width: 100%;height: 105px;
z-index: 100;
overflow: visible;
position: fixed;
top: 0px; /* position fixed for IE6 */
_position: absolute;
_top: expression(documentElement.scrollTop + "px");background:#1a1a1a;
color:#fff;
}
html代码如下------------------------------
div id="box_topbar"
div id="topNav"
/div/div
做网页还是用Dreamweaver更方便一些的