當前位置：首頁 » 編程語言 » html響應式導航

html響應式導航

發布時間: 2021-03-18 21:37:13

Ⅰ html5怎麼做導航欄

建議使用FF，Safari，舉個例子：
<!doctype html>
<html>
<head>
<title>HTML5+CSS3+javaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<style type="text/css">
body {
behavior: url(ie-css3.htc);
}
* {margin:0 auto;padding:0;}
body {font-size:13px;font-family:Arial;}
ul li {list-style:none;}

#menu {
width:982px;
height:35px;
margin-top:20px;display: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:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #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 gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-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>
<script language="JavaScript" type="text/javascript">
(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>
<menu id="menu"><form action="index.php" method="get">
<ul>
<li><a href="#" title="HomePage">HomePage</a></li>
<li><a href="#" title="Introuce">Introuce</a></li>
<li><a href="#" title="Procts">Procts</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>
<input type="search" class="text" value="search..." /></form>
</menu>
<body>

Ⅱ 用html5怎麼實現響應式導航手機端出左側滑的效果代碼

HTML5是無法做這個事情的。
准確點說應該是用CSS的響應式布局。
這個東西你可以去看一下bootstrap，這個前端框架就是大量利用了這個技術。

Ⅲ 前端開發響應式網站導航切換不同設備顯示結果如下請問這個是怎麼做到的了。在線等回答

你好！最簡單的方式是使用CSS的 @media屬性。根據不同的屏幕大小寫好CSS樣式。改變屏幕大小的時候會選擇相應的CSS屬性並渲染。

Ⅳ 響應式web導航添加CSS3過渡動畫為何不起作用

你只是設置了transition的參數，沒有設置怎麼響應這個過度，以及過度的值！

Ⅳ bootstrap響應式導航條怎麼用

拿去看看效果

<!DOCTYPEhtml>
<html>
<head>
<title>Bootstrap實例-默認的導航欄</title>
<linkhref="http://libs..com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="http://libs..com/jquery/2.0.0/jquery.min.js"></script>
<scriptsrc="http://libs..com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<navclass="navbarnavbar-default"role="navigation">
<divclass="navbar-header">
<aclass="navbar-brand"href="#">W3Cschool</a>
</div>
<div>
<ulclass="navnavbar-nav">
<liclass="active"><ahref="#">iOS</a></li>
<li><ahref="#">SVN</a></li>
<liclass="dropdown">
<ahref="#"class="dropdown-toggle"data-toggle="dropdown">
Java
<bclass="caret"></b>
</a>
<ulclass="dropdown-menu">
<li><ahref="#">jmeter</a></li>
<li><ahref="#">EJB</a></li>
<li><ahref="#">JasperReport</a></li>
<liclass="divider"></li>
<li><ahref="#">分離的鏈接</a></li>
<liclass="divider"></li>
<li><ahref="#">另一個分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</nav>


</body>
</html>

Ⅵ CSS響應式導航原理，下圖那個具體怎麼做出來的

基本原理就是：利用css的媒體查詢來檢測屏幕寬度，當屏幕達到一定寬度時會發生相對應的變化。
可以把它想像成：hover，：hover是當滑鼠經過時會發生對應的變化，而媒體查詢當屏幕寬度的變化到一定程度時才發生對應的變化。

Ⅶ 怎麼用css製作一個響應式布局的導航欄

這樣的你需要使用到css樣式

你可以去了解下

Media Queries 響應媒體查詢

你可以多去參考一些比較前沿的網站

比如 ipbun.cn 這樣網站的響應式做的不錯

Ⅷ 怎麼利用CSS實現HTML5響應式導航欄

寬高用百分比，然後用@media控制字體大小什麼的，具體你可以去bootstrap的官網上看下他官網的代碼。

Ⅸ bootstrap響應式導航怎麼設置折疊的大小

為了給導航欄添加響應式特性，您要折疊的內容必須包裹在帶有 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>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分離的鏈接</a></li>
<li class="divider"></li>
<li><a href="#">另一個分離的鏈接</a></li>
</ul>
</li>
</ul>
</div>
</nav>

</body>
</html>

重點分析其與默認導航欄的不同之處：
1、在
<div class="navbar-header">

中添加了一個按鈕：
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切換導航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</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>中
<div class="collapse navbar-collapse" id="example-navbar-collapse">

.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;
}
}

閱讀全文

html響應式導航

與html響應式導航相關的閱讀推薦