html5侧边,css侧边栏

html5中侧边栏导航·怎样写

侧边栏导航标签:

我们注重客户提出的每个要求,我们充分考虑每一个细节,我们积极的做好成都做网站、网站制作服务,我们努力开拓更好的视野,通过不懈的努力,创新互联赢得了业内的良好声誉,这一切,也不断的激励着我们更好的服务客户。 主要业务:网站建设,网站制作,网站设计,重庆小程序开发,网站开发,技术开发实力,DIV+CSS,PHP及ASP,ASP.Net,SQL数据库的技术开发工程师。

aside

nav

ul

li菜单一/li

li菜单二/li

li菜单三/li

li菜单四/li

li菜单五/li

/ul

/nav

/aside

样式自己加。

html5常用标记及用法?

HTML5 新增结构元素分为主体结构元素和非主体结构元素

1.主体结构元素包括 article、section、nav、aside、time

2.非主体结构元素包括 header、hgroup、footer、address

一、主体结构元素

article

article 标签,从语义化上看为文档、页面,其用法如下:

通常是一篇文章、一个页面、一个独立完整的内容模块

一般会带个标题,并放在 header 标签中

article 元素可以互相嵌套

使用频率极高,强调独立性,多注意下与 header 标签的使用。

代码如下:

article

header

h1是我标签/h1

/header

p我是段落/p

article

div我的内容/div

/article

/article

section

section 标签,从语义化上看为部分,其用法如下:

用于页面内容的独立分块,往往是文章的一段

通常由内容和标题组成,没有标题的内容不推荐使用 section

使用频率低,强调分段分块。

注:《HTML5与CSS3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。

代码如下:

section

h1水果/h1

article

h2苹果/h2

div苹果是撒?/div

/article

article

h2桔子/h2

div桔子是撒?/div

/article

/section

!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 --

article

h1中国人物/h1

p三国、两晋、南北朝/p

section

h2三国/h3

p猛将猛将猛将猛将/p

/section

section

h2两晋/h3

p猛将猛将猛将猛将/p

/section

/article

nav

nav 标签,从语义化上看为导航,其用法如下:

通常作为页面导航的链接组

侧边栏导航

使用频率高。

代码如下:

nav

ul

lia href=""菜单1/a/li

lia href=""菜单2/a/li

lia href=""菜单3/a/li

/ul

/nav

aside

aside 标签,从语义化上看为在旁边、侧边,其用法如下:

在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。

在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。

使用频率低。

代码如下:

!-- 在article标签外使用时 --

article

h1马云是谁/h1

p马云,男,1964年10月15日出生于浙江省杭州市,中国著名企业家,阿里巴巴集团、淘宝网、支付宝创始人........../p

aside

h1参考资料/h1

p百度网、维基百科.../p

/aside

/article/p p!-- 在article标签内使用时 --

aside

nav

ul

lia href=""老赵的博客/a/li

lia href=""鬼哥的博客/a/li

lia href=""彪叔的博客/a/li

/ul

/nav

/aside

time

time 标签,从语义化上看为时间,其用法如下:

代表 24 小时中的某个时刻或某个日期

表示时刻时允许带时间差

可定义很多格式的日期和时间

使用频率低。

代码如下:

time datetime="2013-3-6"2014年3月6日/time

!-- datetime属性中日期与时间之间要用“T” 文字分隔,“T”表示时间 --

time datetime="2013-3-6T20:00"2014年3月6日20:00/time

!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 --

time datetime="2013-3-6T20:00Z"2014年3月6日20:00/time

二、非主体结构元素

header

header 标签,从语义化上看为文档的页眉,其用法如下:

一种具有引导和导航作用的结构元素

通常放置在整个页面或者页面内的一个内容区块的标题

一个网页内并没有限制 header 标签的个数

使用频率极高,比较容易理解。

代码如下:

header

h1我是大头/h1

/header

article

header

h1我是脖子/h1

/header

p我是身体/p

/article

hgroup

hgroup 标签,从语义化上看为标题组,其用法如下:

作为 header 标签的子元素

一个内容模块中包括了主标题和至少一个子标题才使用 hgroup

通常会将 h1~h6 元素进行分组

使用频率高。

代码如下:

article

header

hgrounp

h1我是刘备/h1

h2我是关羽/h2

h3我是张飞/h3

/hgrounp

/header

p吕布惊呆了/p

/article

footer

footer 标签,从语义化上看为文档的脚注,其用法如下:

一个内容块区的脚注

通常内容为联系信息、相关阅读、版权信息等

使用频率高,比较容易理解。

代码如下:

article

p吕布惊呆了/p

footer

ul

li关于三国/li

li地图信息/li

li游戏攻略/li

/ul

/footer

/article

address

address 标签,从语义化上看为地址,其用法如下:

用于文档中呈现的联系信息

通常内容为作者、网站链接、电子邮箱、地址、电话号码等

使用频率低。

代码如下:

address

a href=""作者:张三丰/a

a href=""地址:武当山/a

a href=""联系方式:1247/a

/address

HTML5设计一个导航侧边栏?

 !DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/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

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

li7/li

li8/li

/ul

/body

/html

 请采纳


本文标题:html5侧边,css侧边栏
URL分享:http://ybzwz.com/article/dsiijeo.html