导航栏偏左侧怎么调html

html-css014

导航栏偏左侧怎么调html,第1张

运用display的block设置左拉导航栏，设置下拉导航栏。在HTML中设置导航栏左侧是运用display的block设置左拉导航栏，设置下拉导航栏。HTML是由Web的发明者TimBerners-Lee和同事DanielWConnolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。

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: 0padding: 0border: 0outline: 0font-size: 100%vertical-align: baselinebackground: transparentfont-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: 0padding: 0border: 0font-size: 100%vertical-align: baselinebackground: transparenttext-decoration: none}

a:hover { text-decoration: underline}

ins { background-color: #ff9color: #000text-decoration: none}

mark { background-color: #ff9color: #000font-style: italicfont-weight: bold}

del { text-decoration: line-through}

abbr[title], dfn[title] { border-bottom: 1px dotted #000cursor: help}

table { border-collapse: collapseborder-spacing: 0}

hr { display: blockheight: 1pxborder: 0border-top: 1px solid #ccccccmargin: 1em 0padding: 0}

input, select { vertical-align: middle}

.fl { float: leftdisplay: inline-block}

.fr { float: rightdisplay: inline-block}

.clearfix:after { visibility: hiddendisplay: blockfont-size: 0content: " "clear: bothheight: 0}

.clearfix { display: inline-table}

* html .clearfix { height: 1%}

.clearfix { display: block}

html { font-size: 62.5%/* 10÷16=62.5% */ }

body { font-size: 12pxfont-size: 1.2rembackground: #F8F8F8font-family: "宋体"}

ul { width: 180pxmargin: 0 autobackground: #fffposition: relativez-index: 0padding: 60px 20px 70px}

ul li { height: 40pxline-height: 40pxtext-align: centerborder-bottom: 1px solid #F8F8F8}

ul li a { color: #666display: block}

ul li a:hover { color: #FF5F3Etext-decoration: none}

ul li a.hover { color: #FF5F3E}

#lanPos { width: 225pxheight: 40pxline-height: 40pxbackground: #F8F8F8border-left: 5px solid #FF5F3Eposition: absoluteleft: -5pxtop: 0z-index: -1transition: 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=0i<$('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、查看效果