HTML - 区块 ¶

作者：KK
发表日期：2016.1.26

网页上有很多区域,比如说顶部的导航区啦,上面的大菜单区啦,左边的主体内容区,右侧栏呀这些

在使用HTML构建网页的时候我们也需要用一些代码来构造这些区域,所以要用一个区块标签,它叫div,可以说我们以后做网页过程中70~80%都在写这个标签,慢慢地,你一旦不小心入神,就会觉得玩这个标签是一门艺术!----真的有那么厉害吗?

<div>
导航区域:首页,新闻列表,关于我们
</div>
<hr />
<div>
主体区域:今天的焦点是有个熊孩子来学HTML了,一天内就黑掉了银行...
</div>
<hr />
<div>
页脚区域:联系方式:111111,邮件:xxxxx@cccdf.com 粤ICP备47474363
</div>

上面用了3个div标签构造了三个区域,每一个div会占用1行;但你可能觉得这跟p标签不是一样的效果咩?

是呀,现在看起来是一样的效果,但后面你学会CSS的时候就大有不同了,好了你先给这个标签留个印象就是了

var shiftWindow = function () { scrollBy(0, -50) }; if (location.hash) setTimeout(shiftWindow, 1); window.addEventListener("hashchange", shiftWindow); var element = document.createElement("script"); element.src = "./jssearch.index.js"; document.body.appendChild(element); var searchBox = $('#searchbox'); // search when typing in search field searchBox.on("keyup", function(event) { var query = $(this).val(); if (query == '' || event.which == 27) { $('#search-resultbox').hide(); return; } else if (event.which == 13) { var selectedLink = $('#search-resultbox a.selected'); if (selectedLink.length != 0) { document.location = selectedLink.attr('href'); return; } } else if (event.which == 38 || event.which == 40) { $('#search-resultbox').show(); var selected = $('#search-resultbox a.selected'); if (selected.length == 0) { $('#search-results').find('a').first().addClass('selected'); } else { var next; if (event.which == 40) { next = selected.parent().next().find('a').first(); } else { next = selected.parent().prev().find('a').first(); } if (next.length != 0) { var resultbox = $('#search-results'); var position = next.position(); // TODO scrolling is buggy and jumps around // resultbox.scrollTop(Math.floor(position.top)); // console.log(position.top); selected.removeClass('selected'); next.addClass('selected'); } } return; } $('#search-resultbox').show(); $('#search-results').html('

No results

'); var result = jssearch.search(query); if (result.length > 0) { var i = 0; var resHtml = ''; for (var key in result) { if (i++ > 20) { break; } resHtml = resHtml + '

' + result[key].file.t + '' + '' + result[key].file.d + '

'; } $('#search-results').html(resHtml); } }); // hide the search results on ESC $(document).on("keyup", function(event) { if (event.which == 27) { $('#search-resultbox').hide(); } }); // hide search results on click to document $(document).bind('click', function (e) { $('#search-resultbox').hide(); }); // except the following: searchBox.bind('click', function(e) { e.stopPropagation(); }); $('#search-resultbox').bind('click', function(e) { e.stopPropagation(); }); });