css3导航布局源码大全_网页导航布局

文章目录：

• 1、求dw网页框架代码，布局方式采用DIV+CSS的布局方式，附件为导航栏格式，多谢
• 2、如何用CSS实现这个网页布局
• 3、CSS做网页三行式布局(上中下)，中间有一个div，是一个横向导航栏...
• 4、div+css如何布局导航

求dw网页框架代码，布局方式采用DIV+CSS的布局方式，附件为导航栏格式，多谢

简单谢了一个，主要涉及一个浮动，一个hover的隐藏，显示，不是很复杂，可以自己尝试写下，以下代码仅供参考

!DOCTYPE html

html

  head

    style

   div.menu-bar{

    margin:0 auto;

    width: 1024px;

   }

   div.menu-bar ul {

margin: 0;

padding: 0;

height: 100%;

width: 100%;

list-style-type: none;

background-color: #fffabf;

}

div.menu-bar li  a, div.menu-bar li  a:link, div.menu-bar li  a:visited, div.menu-bar li  a:active {

    display: block;

    padding: 0 0 0 10px;

    height: 100%;

    line-height: 30px;

    font-size: 24px;

    font-style: italic;

    text-decoration: none;

    background-color: #fffabf;

    color: #5d5636;

    cursor: pointer;

}

div.menu-bar ul ul {

margin-top: 2px;

display: none;

}

div.menu-bar ul ul li {

margin: 0;

padding: 0;

float: none;

display: block;

height: 28px;

width: 100%;

border: none;

}

div.menu-bar li:hover  ul {

  display: block;

}

   div.menu-bar ul li {

display: block;

float: left;

width:170px;

}

   /style

 /head

 body

  div

  ul

    li

      a href="#"首页/a

    /li

    li

      a href="#"专业特色/a

      ul

        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

      /ul

    /li

    li

      a href="#"实训基地建设/a

      ul

        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

      /ul

    /li

  /ul

/div

 /body

/html

如何用CSS实现这个网页布局

!DOCTYPE html

html

head

meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/

meta charset="utf-8"

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"

titleDocument/title

style

*{ padding: 0;margin: 0; }

.clearfix:after{clear: both;content: ".";display: block;height: 0;visibility: hidden;}

.clearfix{display: block; *zoom:1;}

body{ background: #ccc;}

/* 右上导航 */

#all{ width: 100%; height: 100%;}

.Top_right{ width: 100%; padding-top: 1%;}

.Top_right span{margin:10px;}

.right{ float: right; }

/* 输入框 */

.Import{ margin: 0 auto; width: 50%; padding-top: 15%;}

.Img{ text-align: center; }

.box{ text-align: center; }

/* 底部版权 */

.Bottom{ width: 30%; margin: 0 auto;}

.copy{text-align: center; padding-top: 20%;}

/style

/head

body

div id="all"

div class="fbe8-2a3b-4ef3-2295 Top_right clearfix"

div

span导航1/span

span导航2/span

span导航3/span

span导航4/span

span导航5/span

/div

/div

div

div

img src="" alt="图片地址"

/div

div

textarea name="box1" rows="2" cols="100"/textarea

/div

/div

div

div

img src="" alt="二维码"

/div

div{版权}/div

/div

/div

/body

/html

CSS做网页三行式布局(上中下)，中间有一个div，是一个横向导航栏...

你错了，你中间的div其实只是占领了一行，并不是宽度和其他两个一样，你分别非三个div定义一个背景颜色，你就知道他们的宽度是不一样了，之所以中间的宽度只有1px也会占领一行的关系，是因为div和p标签一样，都是类模块，他们的属性display=block;当设置成display=inline-block的时候，他们几个居然在一行显示了

div+css如何布局导航

先用DIV来把导航的位置定下来！ 然后用CSS设置DIV中导航连接的属性，比如颜色下划线等等。 具体怎么做要看你怎么设计了。

比如说百度空间的导航就是以下的设置方法：

/*导航栏设置*/

空间名称和简介区域

#header 主体部分{height:89px;background:#3399CC}

#header div.lc 左背景图{background:url(temp1/hdl.jpg) no-repeat}

#header div.rc 右背景图{background:url(temp1/hdr.jpg) no-repeat top right}

#header div.tit 空间名称{top:8px;left:20px;line-height:22px;font-size:20px;font-family:黑体}

#header div.tit a.titlink 空间名称链接{color:#FFFFFF;text-decoration:none}

#header div.tit a.titlink:visited{color:#FFFFFF;text-decoration:none}

#header div.desc 空间简介{top:33px;left:20px;color:#FFFFFF;font-size:13px}

#tabline TAB菜单下方的横线{top:89px;background-color:#FFFFFF}

#tab TAB菜单主体{top:67px;background:url(temp1/tabbg.gif) repeat-x}

#tab a.on,#tab a.on:link,#tab a.on:visited TAB选中状态{margin-top:3px;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;border-top:1px solid #FFFFFF;line-height:19px;background-color:#F3F1F1;color:#197CAE;font-size:14px}

#tab span TAB与TAB之间的分割符“|”{color:#FFFFFF;font-size:14px}

#tab a:link TAB未选中状态{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab a:visited{color:#FFFFFF;text-decoration:none;font-size:14px}

#tab2 设置TAB菜单主体{background:#DAE9F5}

#tab2 span TAB选中状态{color:#000000;font-size:12px;font-weight:bold}

#tab2 a TAB未选中状态{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

}