css --- 應用媒介查詢制作響應式導航欄

在這里插入圖片描述
以上導航會自動適應各個尺寸的屏幕
代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
<meta name="format-detection" content="telephone=no" />
<!--[if it IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script>
<![endif] -->
<style>body{margin: 0}.container{width: 80%; margin: auto;}.header{background-color: #333;}li a{color: white;}@media screen and (max-width: 320px){.logo{height: 40px;}.header{height: 40px;}li{line-height: 50px;padding:0 15px 0 15px;display: block;background-color: #333;text-align: center;border-top: 1px solid white;}.logo{display: block;}}/* 這里定義了窗體寬度在 320px 以下的樣式 */@media screen and (min-width: 320px) and (max-width: 765px) {.logo{height: 50px;}.header{height: 50px;}li{line-height: 50px;padding: 0 15px 0 15px;display: block;background-color: #333;text-align: center;border-top: 1px solid white;}.logo{ display: block;}}/* 這里定義了窗體寬度 320px 到 765px 的樣式 */@media screen and (min-width: 765px) {.logo{height: 60px}.header{height: 60px;}li{display: block; line-height: 60px; float: left; padding: 0 15px 0 15px;}.logo{display: block; float: left;}}/* 這里定義了窗體寬度 765px 以上的樣式 */
</style>
</head>
<body><div class="header"><div class="container"><li><a href="#">導航1</a></li><li><a href="#">導航2</a></li><li><a href="#">導航3</a></li><li><a href="#">導航4</a></li></div>
</div>
</body>
</html>

參考《CSS高效開發實戰》 P102

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/251501.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/251501.shtml
英文地址，請注明出處：http://en.pswp.cn/news/251501.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！