htmlcss导航（html网站导航）
本文目录一览：
- 1、怎么用html+css做一个导航条？
- 2、HTML使用DIV+CSS如何实现左边导航？
- 3、html+css怎么实现横向导航
- 4、怎么用html+css做一个导航条
- 5、html 和 css 导航居中问题 asp
怎么用html+css做一个导航条？
首先要建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
HTML使用DIV+CSS如何实现左边导航？
1、新建html文档。
2、书写hmtl代码。
ul
liA class="8ae8-4be0-cdfe-7d1b hover" href="#"前端交流/A/li
liA href="#"交互设计/A/li
liA href="#"视觉设计/A/li
liA href="#"用户研究/A/li
liA href="#"设计茶吧/A/li
liA href="#"前端交流/A/li
liA href="#"团队生活/A/li
div id="lanPos"/div
/ul
3、书写css代码。
style
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-weight: normal; }
body { line-height: 1; }
:focus { outline: 1; }
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
nav ul, ul, li { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; }
a:hover { text-decoration: underline; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }
.fl { float: left; display: inline-block; }
.fr { float: right; display: inline-block; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
html { font-size: 62.5%; /* 10÷16=62.5% */ }
body { font-size: 12px; font-size: 1.2rem; background: #F8F8F8; font-family: "宋体"; }
ul { width: 180px; margin: 0 auto; background: #fff; position: relative; z-index: 0; padding: 60px 20px 70px; }
ul li { height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #F8F8F8; }
ul li a { color: #666; display: block; }
ul li a:hover { color: #FF5F3E; text-decoration: none; }
ul li a.hover { color: #FF5F3E; }
#lanPos { width: 225px; height: 40px; line-height: 40px; background: #F8F8F8; border-left: 5px solid #FF5F3E; position: absolute; left: -5px; top: 0; z-index: -1; transition: top .2s; }
/style
4、书写并引用js代码。
script src="js/jquery.min.js"/script
script
$(function(){
$('#lanPos').css('top',$('.hover').offset().top);
$('ul li').hover(function(){
$('#lanPos').css('top',$(this).offset().top);
},function(){
$('#lanPos').css('top',$('.hover').offset().top);
})
$('ul li').click(function(){
for(var i=0;i$('ul li').size();i++){
if(this==$('ul li').get(i)){
$('ul li').eq(i).children('a').addClass('hover');
}else{
$('ul li').eq(i).children('a').removeClass('hover');
}
}
})
})
/script
5、代码整体结构。
6、查看效果
html+css怎么实现横向导航
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/
style type="text/css"
body{
text-align: center;
}
ul{
overflow: hidden;
background: #f00;
margin: 0 auto;
display: inline-block;
padding-left: 0
}
ul li{
padding: 10px 30px;
text-align: center;
font-size: 15px;
float: left;
list-style: none;
cursor: pointer;
border-right: 1px solid #fff
}
ul li:last-child{
border-right: 0
}
/style
/head
body
ul
li导航1/li
li导航2/li
li导航3/li
li导航4/li
li导航5/li
/ul
/body
/html
怎么用html+css做一个导航条
首先建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
导航条的更多样式及详细步骤可去这里参考
html 和 css 导航居中问题 asp
比如你定义一个导航容器#navbar设置这个容器的宽度（比如960px），里面放你的导航，就是那个ul
li列表，设置ul的宽度，这个宽度比你的导航容器宽度小，比如800px，然后设置ul的margin上下为零，左右自动，这样ul列表就相对navbar这个父容器居中了。css中，容器相对容器的居中都采用margin左右自动即可，文本居中用text-align，不过浮动元素不受这个控制
