Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 麻豆精品国产免费观看,亚洲综合欧美在线,日本一二三区免费 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          原創自適應簡單工具導航源碼
          
        
           
          
	
	
          
		原創自適應簡單工具導航源碼
          
                        
          己制作的，現在只弄了一個首頁，后期可能添加詳情頁，沒有css代碼，js代碼外鏈了，如不放心可以本地化。
          詩夢自己制作
          有點丑和有點亂不要在意，只是個人用來放自己喜歡的和用到的網站，源碼你們創建個html文件放進去訪問就可以了。
          代碼
          1. <html>
          2. <head>
          3. <meta charset="utf-8">
          4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
          5. <meta name="viewport" content="width=device-width, initial-scale=1">
          6. <title>詩夢-工具站</title>
          7. <meta name='keywords' content='詩夢,博客導航,工具導航,'>
          8. <meta name='description' content='詩夢導航站。'>
          9. <link rel="shortcut icon"  type="image/x-icon"/>
          10. <link rel="stylesheet" >
          11. <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
          12. <style>
          13. body{
          14. margin: 0 auto;
          15. text-align: center;
          16. }
          17. .container {
          18. max-width: 580px;
          19. padding: 12px;
          20. margin: 0 auto;
          21. }
          22. </style>
          23. <body>
          24. <body style="background-image: url(https://wx2.sinaimg.cn/mw690/8c534571ly1fdmdspgc5sj20sg0hs0wu.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;-moz-background-size: cover;">
          25. <div class="container">
          26. <div class="header">
          27. <ul class="nav nav-pills pull-right" role="tablist">
          28. <li role="presentation" class="active"><a href="/">首頁</a></li>
          29. <li role="presentation" class="active"><a >收錄</a></li>
          30. </ul>
          31. <h3 class="text-muted" align="left">工具導航</h3>
          32. </div>
          33. <hr>
          34. <div type="button" class="btn btn-primary btn-block" id="start">公告</div><br>
          35. <div class="alert alert-danger" role="alert" style="text-align:left;">
          36. <span class="glyphicon glyphicon-info-sign"></span><strong>申請收錄</strong><br>
          37. 有好玩的網站，請點擊上面申請收錄!
          38. </div>
          39. <a type="button" class="btn btn-primary btn-block">博客</a><br>
          40. <a  type="button" class="btn btn-info btn-info">詩 夢 博 客</a>
          41. <a  type="button" class="btn btn-info btn-info">古 韻 博 客</a>
          42. <a  type="button" class="btn btn-info btn-info">小 文 博 客</a>
          43. <a  type="button" class="btn btn-info btn-info">往 昔 執 念</a>
          44. <a  type="button" class="btn btn-info">次 元 之 家</a>
          45. <a  type="button" class="btn btn-info">墨 淵 博 客</a>
          46. <a  type="button" class="btn btn-info">森 七 博 客</a>
          47. <a  type="button" class="btn btn-info">冰 凌 博 客</a>
          48. <a  type="button" class="btn btn-info">引 導 單 頁</a>
          49. <a  type="button" class="btn btn-info">網 頁 刷 新</a>
          50. <a  type="button" class="btn btn-info">詩 夢 音 樂</a>
          51. <hr>
          52. <a htef="https://www.mom1.cn" type="button" class="btn btn-primary btn-block">工具</a><br>
          53. <a  type="button" class="btn btn-info btn-info">等待添加</a>
          54. <a  type="button" class="btn btn-info btn-info"> 等待添加</a>
          55. <a  type="button" class="btn btn-info btn-info">等待添加</a>
          56. <a  type="button" class="btn btn-info btn-info">等待添加</a>
          57. <a  type="button" class="btn btn-info"> 等待添加</a>
          58. <a  type="button" class="btn btn-info"> 等待添加</a>
          59. <a  type="button" class="btn btn-info"> 等待添加</a>
          60. <a  type="button" class="btn btn-info"> 等待添加</a>
          61. <a  type="button" class="btn btn-info"> 等待添加</a>
          62. <hr>
          63. <a type="button" class="btn btn-primary btn-block">友鏈</a><br>
          64. <a  type="button" class="btn btn-info"> 詩夢博客</a>
          65. <a  type="button" class="btn btn-info"> 詩夢單頁</a>
          66. <a  type="button" class="btn btn-info"> 詩夢音樂</a>
          67. <hr>
          68. <a  class="btn btn-default btn-sm"><span class="glyphicon glyphicon-credit-card"></span> 詩夢</a>
          69. <a  class="btn btn-default btn-sm"><span class="glyphicon glyphicon-exclamation-sign"></span> 幫助</a>
          70. <a  class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span> 收錄</a>
          71. </div>
          72. <br>
          73. &copy; Powered by <a >詩夢博客</a>
          74. </p>
          75. </div>
          76. </body>
          77. </html>
          本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導航制作；菜單導航是網站建設中最常用的一塊了，基本每個網站內都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。
          由上圖我們可以看出，該圖包含一個橫向導航條，然后鼠標經過橫向導航條之后，子導航顯示出來。
          1）制作頁面所用知識點
          我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經過（hover）的效果。
          1、列表標簽ul、dl（我們使用ul、dl來創建同類型的導航元素內容，通過設置css樣式來達到圖片所示效果）；
          2、浮動元素float（每個導航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；
          3、絕對定位absolute（對于子導航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據元素空間）
          4、鼠標經過hover（使用css的鼠標經過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現子菜單的顯示與隱藏）
          具體的實現html代碼以及css代碼就如下圖所示：
          2）縱向菜單導航
          還有一個縱向菜單導航原理跟橫向的類似，只需簡單調整一下css代碼即可。
          html代碼跟橫向一樣，這里就不再貼圖，具體的實現圖片效果以及css代碼就如下圖所示：
          好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。
          每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
          天無意中看到一個網站的導航條，覺得效果還不錯，而且制作也很簡單，就自己試著用HTML+CSS做了個一模一樣的，下面就把導航條的制作方法及步驟分享給大家！

          導航按鈕效果圖
          代碼如下：
          <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一級導航</title>
		<style>/*css樣式可以在style里面寫*/
			body {
				margin: 0;/*外邊距:分別左,上,右,下都為0,這樣就不會出現左右上下間距*/
				padding: 0;/*內邊距:分別左,上,右,下都為0,這樣就不會出現左右上下內間距*/
			}
			/*第一個div樣式*/
			#menu {
				width: 100%;/*寬度:100%表示瀏覽器默認寬度*/
				height: 45px;/*高度*/
				background-color:#FF0033;/*背景顏色:紅色*/
			}
			/*第二個div樣式*/
			#menu-title {
				width: 1000px;
				height: 45px;
				margin-left: auto;/*margin-left: auto;margin-right: auto;可以把div自動居中*/
				margin-right: auto;
			}
			/*第二個div里面無需列表樣式*/
			#menu-title ul {/*ul是無序列表*/
				margin: 0px;
				padding: 0px;
				list-style: none;/*列表樣式:無*/
			}
			/*第二個div里面無需列表li樣式*/
			#menu-title ul li {
				width: 142.8px;
				height: 45px;
				float: left; /*多個li往左浮動*/
				line-height: 45px;/*行高*/
				text-align: center;/*文本對齊:居中*/
			}
				/*第二個div里面無需列表li里的a：超鏈接樣式*/
			#menu-title ul li a {
				color: white; /*顏色:白*/
				text-decoration: none;/*文本下劃線:無*/
			}
			/*第二個div里面無需列表li里的a：超鏈接鼠標經過樣式*/
			#menu-title ul li:hover {
				background-color: #333333;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="menu-title">
				<ul>
					<li><a href="#">首頁</a></li>
					<li><a href="#">軟件中心</a></li>
					<li><a href="#">產品案例</a></li>
					<li><a href="#">免費素材</a></li>
					<li><a href="#">聯系我們</a></li>
					<li><a href="#">會員注冊</a></li>
					<li><a href="#">會員登錄</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

          以上HTML+CSS代碼復制可用。
          好多小白不知道怎么搭配顏色，為你們搜集了一下網頁顏色搭配工具：http://tool.c7sky.com/webcolor/#hue_0
          下一個文章：HTML+CSS二級導航制作，敬請期待
                              	
          
	
	

          

          

 
          
        
        
           上一篇：網頁的類型 
          
          下一篇：什么是 HTML5- 
          
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
久久久久久免费一区二区三区
|
亚洲大尺度无码无码专线一区|
人妻激情偷乱视频一区二区三区|
无码国产精品久久一区免费
|
中文精品一区二区三区四区|
一区视频免费观看|
91精品一区二区三区久久久久
|
无码精品前田一区二区|
无码人妻精品一区二区三区久久久
|
日亚毛片免费乱码不卡一区|
久久精品无码一区二区三区免费
|
亚洲a∨无码一区二区|
无码免费一区二区三区免费播放|
无码欧精品亚洲日韩一区夜夜嗨|
国产成人久久一区二区三区|
久久久久久人妻一区二区三区
|
国产一区二区在线视频|
综合久久一区二区三区|
精品国产一区二区三区在线观看
|
少妇人妻偷人精品一区二区|
av无码精品一区二区三区四区|
精品一区二区三区无码免费直播|
国产在线一区二区三区在线|
国产伦精品一区二区三区在线观看|
精品国产AV无码一区二区三区|
好吊妞视频一区二区|
成人免费一区二区三区在线观看|
亚洲综合激情五月色一区|
欧美日韩精品一区二区在线视频|
日本高清一区二区三区|
国产一区二区精品在线观看|
一区二区三区四区视频在线|
精品久久久久中文字幕一区
|
亚洲一区在线观看视频|
亚洲国产精品无码第一区二区三区
|
国产成人精品一区二三区|
乱中年女人伦av一区二区|
中文字幕一精品亚洲无线一区|
久久人妻av一区二区软件|
中文字幕无码不卡一区二区三区|
天堂一区二区三区精品|