本文目录
- HTML5怎么做导航栏
- html5里面新增的用于网页布局的标签有哪些
- html5中侧边栏导航·怎样写
- html5点击左侧栏 然后链接出现在右边 一共有几种方式实现
- HTML5设计一个导航侧边栏
- HTML5如何制作特效导航栏
- HTML5的代码有没有大神帮我做一下
HTML5怎么做导航栏
建议使用FF，Safari，举个例子：《!doctype html》《html》 《head》 《title》HTML5+CSS3+JavaScript《/title》 《meta
html5里面新增的用于网页布局的标签有哪些
《header》标签
《header》标签定义文档的页眉（介绍信息）
用法：
《header》《h1》windyauang的Dreamweaver专栏《/h1》《/header》
《nav》标签
《nav》 标签定义导航链接的部分
用法：
《nav》
《ul》
《li》《a href=“#“》菜单一《/a》《/li》
《li》《a href=“#“》菜单二《/a》《/li》
《li》《a href=“#“》菜单三《/a》《/li》
《li》《a href=“#“》菜单四《/a》《/li》
《/ul》
《/nav》
《section》 标签
《section》 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分
用法： 《section》
《h1》标题一《/h1》
《p》文章段落内容《/p》
《/section》
《article》 标签
《article》 标签定义外部的内容。 外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自blog的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。总之，可以理解为article所表示的就是文章内容。
用法：《article》
《a href=“#“》文章内链接《/a》《br /》
文章内容文章内容文章内容
《/article》
《aside》 标签
《aside》标签定义article以外的内容。aside的内容应该与article的内容相关，如上图所示，它类似于布局中的辅助侧边栏。
用法： 《aside》
《h4》小标题《/h4》
段落内容段落内容
《/aside》
《footer》 标签
《footer》 标签定义section或document的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息，也就是类似于版权信息的东西。
用法： 《footer》
页脚文字，版权信息等
《/footer》
整体的Html5代码应该如下：
《!doctype html》
《html》
《head》
《meta charset=“utf-8“》
《title》无标题文档《/title》
《/head》
《body》
《header》 《h1》《a href=“#“》windyauang的Dreamweaver专栏-Html5布局示范文档《/a》《/h1》 《/header》
《nav》
《ul》
《li》《a href=“#“》菜单一《/a》《/li》
《li》《a href=“#“》菜单二《/a》《/li》
《li》《a href=“#“》菜单三《/a》《/li》
《li》《a href=“#“》菜单四《/a》《/li》 《/ul》
《/nav》
《section》
《header》内容标题《/header》
《article》文章内容《/article》
《footer》文章版权内容《/footer》
《/section》 《aside》相关内容《/aside》
《footer》页脚、页面版权内容《/footer》
《/body》
html5中侧边栏导航·怎样写
侧边栏导航标签：《aside》 《nav》 《ul》 《li》菜单一《/li》 《li》菜单二《/li》 《li》菜单三《/li》 《li》菜单四《/li》 《li》菜单五《/li》 《/ul》 《/nav》《/aside》样式自己加。
html5点击左侧栏 然后链接出现在右边 一共有几种方式实现
《div style=“width:630px;float:left;height:500px;“》《div style=“float:left;height:500px;width:150px;“》 《ul style=“padding:0px;margin:0ox;“》 《li id=“LI0“ style=“float:left;background:#ccc;margin-top:5px;width:140px;“》《a href=“#“ onclick=“document.getElementById(’cont0’).style.display=’block’;document.getElementById(’cont1’).style.display=’none’“》第一个内容《/a》《/li》 《li id=“LI1“ style=“float:left;background:#ccc;margin-top:5px;width:140px;“》《a href=“#“ onclick=“document.getElementById(’cont1’).style.display=’block’;document.getElementById(’cont0’).style.display=’none’“》第二个内容《/a》《/li》 《/ul》《/div》《div style=“float:left;width:430px;background:#eee;height:500px;“》《div id=“cont0“ style=“float:left;width:430px;height:500px;float:left;display:none“》 第一个内容 第一个内容 第一个内容 第一个内容 第一个内容 第一个内容 第一个内容 《/div》《div id=“cont1“ style=“float:left;width:430px;height:500px;float:left;display:none“》 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容《/div》《/div》《div》 刚写的 没测试，看下吧 应该可以是用的脚本控制 可以优化一下
HTML5设计一个导航侧边栏
《!DOCTYPE html》《html lang=“en“》《head》 《meta charset=“UTF-8“》 《meta name=“viewport“ content=“width=device-width, initial-scale=1.0“》 《title》Document《/title》 《style》 *{ margin:0; padding:0; } ul{ list-style: none; background-color: black; color:blanchedalmond; width: 100px; line-height: 48px; } li:nth-of-type(2n+1){ background-color: blue; } li:hover{ color: red; background-color: yellow; } 《/style》《/head》《body》 《ul》 《li》1《/li》 《li》2《/li》 《li》3《/li》 《li》4《/li》 《li》5《/li》 《li》6《/li》 《li》7《/li》 《li》8《/li》 《/ul》《/body》《/html》
请采纳
HTML5如何制作特效导航栏
鼠标移上去时，改变li元素的大小、背景色、文字颜色等
代码如下：
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“》
《title》《/title》
《style type=“text/css“》
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
position: relative;
margin-left: 10px;
}
div {
width: 150px;
height: 500px;
border: 1px dashed #000000;
text-align: center;
}
.active {
background-color: green;
color: #fff;
}
.show {
width: 2px;
height: 20px;
position: absolute;
left: 10px;
top: 15px;
background-color: white;
}
.li1 {
left: 20px;
border-radius: 5px;
}
《/style》
《/head》
《body》
《div id=“div1“》
《ul》
《li》《span》《/span》雅望天堂1《/li》
《li》《span》《/span》雅望天堂2《/li》
《li》《span》《/span》雅望天堂3《/li》
《li》《span》《/span》雅望天堂4《/li》
《/ul》
《/div》
《script type=“text/javascript“》
var oLi = document.getElementsByTagName(“li“);
var oSpan = document.getElementsByTagName(“span“);
for (var i = 0; i 《 oLi.length; i++) {
oLi.onmouseover = function() {
var sp = this.childNodes;
console.log(sp);
for (var i = 0; i 《 oLi.length; i++) {
oLi.setAttribute(“class“, ““);
oSpan.setAttribute(“class“, ““);
}
this.setAttribute(“class“, “active li1“);
sp.setAttribute(“class“, “show“);
}
oLi.onmouseout = function() {
for (var i = 0; i 《 oLi.length; i++) {
oLi.setAttribute(“class“, ““);
}
}
}
《/script》
《/body》
《/html》
这应该是你要的效果
HTML5的代码有没有大神帮我做一下
《!DOCTYPE html》《html》 《head》 《meta charset=“UTF-8“》 《title》《/title》 《style type=“text/css“》 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,text area,p,blockquote,th,td { margin:0; padding:0; } body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; } td,th,caption { font-size:14px; } h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;} a { color:#555; text-decoration:none; } a:hover { text-decoration:none; } img { border:none; } ol,ul,li { list-style:none; } input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; } table { border-collapse:collapse; } html {overflow-y: scroll;} .clearfix:after {content: “.“; display: block; height:0; clear:both; visibility: hidden;} .clearfix { *zoom:1; } .publish{ margin: 0 auto; width: 1000px; overflow: hidden; } header{ height: 60px; background: #ccc; border-radius: 5px; text-align: center; } .content{ margin-top: 20px; margin-bottom: 20px; height: 300px; border-radius: 5px; } article{ width: 700px; height: 300px; float: left; background: #123bad33; } article h3{ line-height: 40px; width: 95%; height: 40px; border-radius: 3px; margin: 0 auto; font-weight: bolder; background: #dbf; } article section{ width: 95%; margin: 10px auto; height: 240px; background: #00ff004f; } aside{ height: 298px; width: 248px; float: right; border: 1px solid #000; border-bottom-right-radius: 5px; border-top-right-radius: 5px; } footer{ height: 40px; text-align: center; line-height: 40px; font-size: 12px; background: #fda; } 《/style》 《/head》 《body》 《header class=“publish“》页头《/header》 《div class=“publish content clearfix“》 《article》 《h3》专题标题《/h3》 《section》专题内容《/section》 《/article》 《aside》 侧边栏 《/aside》 《/div》 《footer class=“publish“》页尾 版权所有©Xu Tel:xxxxxxxxx《/footer》 《/body》《/html》
Html5语义化标签：
头部《header》专题文章《article》侧边栏《aside》尾部《footer》