HTML使用DIV+CSS如何实现左边导航？
1、新建html文档。
2、书写hmtl代码。
<ul>
<li><A class="hover" href="#">前端交流</A></li>
<li><A href="#">交互设计</A></li>
<li><A href="#">视觉设计</A></li>
<li><A href="#">用户研究</A></li>
<li><A href="#">设计茶吧</A></li>
<li><A href="#">前端交流</A></li>
<li><A 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、查看效果
实现方法：这个要使用js或者jquery来做成对隐藏与显示动作。超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
拓展：
1、在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Web）。
2、HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
