HTML5怎么做导航栏_随笔

建议使用FF，Safari，举个例子：

<!doctype html>

<html>

<head>

<title>HTML5+CSS3+JavaScript</title>

body {

behavior: url(ie-css3.htc)

}

* {margin:0 autopadding:0}

body {font-size:13pxfont-family:Arial}

ul li {list-style:none}

#menu {

width:982px

height:35px

margin-top:20pxdisplay:block

background: #e3e3e3

background: -moz-linear-gradient(top, #ccc, #999)

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999))

-moz-box-shadow: 1px 1px 3px #333

-webkit-box-shadow: 1px 1px 3px #333

box-shadow: 1px 1px 3px #333

-webkit-border-top-left-radius:4px

-webkit-border-top-right-radius:4px

-moz-border-radius-topleft:4px

-moz-border-radius-topright:4px

-webkit-border-bottom-left-radius:4px

-webkit-border-bottom-right-radius:4px

-moz-border-radius-bottomleft:4px

-moz-border-radius-bottomright:4px

-o-border-radius:4px

-khtml-border-radius:4px

text-shadow: 0 1px 0 white

}

#menu ul {

margin-left:0

}

#menu ul li {

display:inline

}

#menu ul li a:link, a:visited {

text-align:centerfloat:leftwidth:6.8emtext-decoration:nonepadding:7.5px 0.75emfont-size:16pxfont-weight:boldmargin-top:0pxborder-right:1px solid #ccccolor: #454545

}

#menu ul li a:hover {

text-decoration:none

background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc))

background: -moz-linear-gradient(top, #333, #ccc)

-webkit-background-size:0 35px

color: #ddd

text-shadow: 0 1px 0 black

}

.text {

border:1px solid graywidth:150pxheight:17pxposition:relativetop:8pxleft:13pxfont-family:Arial

-webkit-border-top-left-radius:90px

-webkit-border-top-right-radius:90px

-moz-border-radius-topleft:90px

-moz-border-radius-topright:90px

-webkit-border-bottom-left-radius:90px

-webkit-border-bottom-right-radius:90px

-moz-border-radius-bottomleft:90px

-moz-border-radius-bottomright:90px

-o-border-radius:90px

-khtml-border-radius:90px

}

</style>

(function()

{

if(!0)

return

var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length

while(i<length)

{

document.createElement_x(e[i++])

}

})()

</script>

</head>

<body>

<ul>

<li><a href="#" title="HomePage">HomePage</a></li>

<li><a href="#" title="Introuduce">Introuduce</a></li>

<li><a href="#" title="Products">Products</a></li>

<li><a href="#" title="My album">My album</a></li>

<li><a href="#" title="Shopping">Shopping</a></li>

<li><a href="#" title="Contact our">Contact our</a></li>

</ul>

</menu>

<body>

HTML 固定宽度改为响应式布局需要怎么做不要用固定宽度属性来描述元素，改用百分比，这样元素的宽度就是父元素的百分比，这是响应式布局最基本的技巧。

采用响应式布局，需要注意以下几点：第一，用百分比给元素设定大小；第二，不要对元素进行绝对定位；第三，写css时用上@media媒体查询技巧。bootstrap是响应式布局做得不错的前端开发工具，有兴趣可以学习一下。

随着终端萤幕尺寸的种类越来越多，如果针对每一种尺寸都独立开发一个页面的话，这样的开发成本将会变得非常高，响应式布局就成了解决这一问题的有效途径。当然，深层次的响应式布局应该是贯穿前端和服务端的。

android表格布局怎么固定宽度android:layout_width="100dp"

这样的话还是用线性吧，

然后把它们的权重设为同一

个值，还有就是要会灵

活使用而已巢状

bootstrap设定了响应式布局，怎么占满宽度

您好，这样：最好在他既有机制上进行改动,不要打破他的设计理念,我觉得是最好不过的了.

比如你可以更改他的栅格数或栅格宽度，

但是要注意各个装置不同解析度下的效果了。

左边{

width: 240px

position: absolute

*position: relative

float: left

margin: 0

}

右边{

margin-left: 240px

position: relative

}

5响应式布局怎么写

自己写肯定累的半死，还会出现层出不穷的BUG，因为除PC外各种移动装置非常难搞，因此建议你直接使用【Bootstrap】框架，这也是大部分前端开发者的首选解决办法，如果你是大公司要开发自己的框架，也可以参考。毕竟这是国际层面上应用最为广泛的响应式框架。各种中文资料文件齐备。

不用bootstrap怎么做响应式布局

禁止响应式布局有如下几步：

移除此 CSS 文件中提到的设定浏览器视口（viewport）的标签：<meta>。

通过为 .container 类设定一个 width 值从而覆盖框架的预设 width 设定，例如 width: 970px !important。请确保这些设定全部放在预设的 Bootstrap CSS 档案的后面。注意，如果你把它放到媒体查询中，也可以略去!important 。

如果使用了导航条，需要移除所有导航条的摺叠和展开行为。

对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。不要担心，针对超小萤幕装置的栅格系统能够在所有解析度的环境下展开。

针对 IE8 仍然需要额外引入 Respond.js 档案（由于仍然利用了浏览器对媒体查询（media query）的支援，因此还需要做处理）。这样就禁用了 Bootstrap 对移动装置的响应式支援。

HTML5中响应式布局怎么弄

步骤1 建立空白的HTML 5模版

首先，我们建立一个空白的模版，程式码很简单，如下所示：

复制程式码

步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。程式码如下所示：

复制程式码

读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全域性CSS样式调整用的步骤3 往HTML 5标签中增加程式码

1）首先往标题中增加如下程式码：

Simple HTML5 Template

复制程式码

2）往导航标签中新增如下程式码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child

One Child Two with child Child One Child

Two Child Three Child Three

Contact

复制程式码

3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下程式码所示：

This is a title for post

Richard KS 20th March 2013 Tutorials HTML5, CSS3

and Responsive 10 Comments Lorem

Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum has been the industry's standard dummy text ever since the

1500s

复制程式码

4）新增标签 HTML5提供的元素标签用来表示当前页面或文章的附属资讯部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属资讯部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

改成响应式布局，支援手机

推荐你使用bootstrap这个自适应框架，引入bootstrapCSS档案，直接呼叫已经写好的class，就能实现自适应，详情参考ranyouranqiguolu.的网页原始码！

中table列怎么固定宽度

不要使用百分比，就可以如果不使用css style，就是width=150(以此类推)，

响应式布局

1024

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div>中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span>创建所谓的汉堡按钮。这些会切换为.nav-collapse <div>中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 响应式的导航栏</title>

</head>

<body>

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#example-navbar-collapse">

</button>

<a class="navbar-brand" href="#">W3Cschool</a>

</div>

Java <b class="caret"></b>

</a>

<li><a href="#">jmeter</a></li>

<li><a href="#">Jasper Report</a></li>

<li><a href="#">分离的链接</a></li>

<li><a href="#">另一个分离的链接</a></li>

</ul>

</li>

</ul>

</div>

</nav>

</body>

</html>

重点分析其与默认导航栏的不同之处：

1、在

中添加了一个按钮：

<button type="button" class="navbar-toggle" data-toggle="collapse"

data-target="#example-navbar-collapse">

</button>

如上所述，data-toggle用于告诉 JavaScript 需要对按钮做什么， data-target指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span>创建所谓的汉堡按钮。

.navbar-toggle {

position: relative

float: right

padding: 9px 10px

margin-top: 8px

margin-right: 15px

margin-bottom: 8px

background-color: transparent

background-image: none

border: 1px solid transparent

border-radius: 4px

}

.navbar-toggle:focus {

outline: 0

}

.navbar-toggle .icon-bar {

display: block

width: 22px

height: 2px

border-radius: 1px

}

.navbar-toggle .icon-bar + .icon-bar {

margin-top: 4px

}

@media (min-width: 768px) {

.navbar-toggle {

display: none

}

.sr-only {

position: absolute

width: 1px

height: 1px

padding: 0

margin: -1px

overflow: hidden

clip: rect(0, 0, 0, 0)

border: 0

}

.sr-only-focusable:active,

.sr-only-focusable:focus {

position: static

width: auto

height: auto

margin: 0

overflow: visible

clip: auto

}

.navbar-toggle .icon-bar {

display: block

width: 22px

height: 2px

border-radius: 1px

}

.navbar-toggle .icon-bar + .icon-bar {

margin-top: 4px

}

.navbar-default .navbar-toggle .icon-bar {

background-color: #888

}

.navbar-inverse .navbar-toggle .icon-bar {

background-color: #fff

}

2、项目列表被包裹在了一个另外增加的<div>中

.collapse {

display: none

}

.navbar-collapse {

padding-right: 15px

padding-left: 15px

overflow-x: visible

-webkit-overflow-scrolling: touch

border-top: 1px solid transparent

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1)

box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1)

}

@media (min-width: 768px) {

.navbar-collapse {

width: auto

border-top: 0

-webkit-box-shadow: none

box-shadow: none

}

.navbar-collapse.collapse {

display: block !important

height: auto !important

padding-bottom: 0

overflow: visible !important

}

@media (max-width: 480px) and (orientation: landscape) {

.navbar-fixed-top .navbar-collapse,

.navbar-fixed-bottom .navbar-collapse {

max-height: 200px

}

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zaji/6309398.html

HTML5怎么做导航栏

发表评论

评论列表（0条）