html頁面中想要制作一個懸浮在固定位置的一個導航,該怎么制作懸浮導航呢?我們可以使用Dreamweaver來制作,請看下文詳細介紹。
1、啟動Dreamweaver,并新建一個html軟件
2、新建好以后可以看到自動生成的網頁代碼
3、在head中添加樣式代碼<style type="text/css"></style>,body中插入一個div
4、為了方便查看效果,可以給diV定義高于屏幕的高度。并引入樣式a。
.a{width: 1920px;height: 10000px;background: #BFBFBF;}
5、在寫一個DIV模塊,并引入CSS模擬一個方形的紅色代碼,刷新后可以看到寫好的模塊只在頂部,并不是懸浮在固定位置的哦
.b{width: 100px;height: 100px;background: #ff0000;}
6、這時候就需要用到position: fixed;代碼了。代碼如下:
position: fixed;left: 100px;top: 100px;z-index: 100;
寬度和高度設置好后就固定在一個位置了,z-index是把DIV設置到了最頂層,這樣就可以啦,往下拉頁面看看是不是固定在這個位置不變的呢
以上就是Dreamweaver制作懸浮在固定位置的一個導航的方法,希望大家喜歡,請繼續關注武林網。
相關推薦:
Dreamweaver登陸界面怎么顯示?
Dreamweaver怎么給頁面添加時間?
Dreamweaver無法打開提示javascript錯誤怎么辦?
新聞熱點
疑難解答