一個個人用的瀏覽器首頁,可以把一下常用的網站放在這里,平常打開會比較方便,
第一步,HTML代碼
<script src="https://www.cnblogs.com/szharf/p/js/jquery-3.4.1.min.js"></script>
<div id="navigate">
<ul>
<li >
<p id="labels_1" >搜索</p>
<div >
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
</div>
</li>
<li >
<p id="labels_2" >作業</p>
<div >
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
</div>
</li>
<li >
<p id="labels_3" >學習</p>
<div >
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
</div>
</li>
<li >
<p id="labels_4" >娛樂</p>
<div >
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
<p><a href="https://www.cnblogs.com/szharf/p/#" target="_blank">名字</a></p>
</div>
</li>
</ul>
</div>
第二步,為HTML設定樣式
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
color: white;
text-align: center;
}
body{
min-height: 100vh;
/*背景圖片路徑*/
background: url(https://raw.githubusercontent.com/szharf/hello-world/master/images/%E4%B9%A6%E6%88%BF.jpg) no-repeat;
background-size:100% 100%;
font-family: "微軟雅黑";
}
#navigate{
width: 80%;
height: 50px;
margin: auto;
background-color: rgba(205,104,57,0.8) ;
}
.labels{
border-bottom:solid gainsboro 1px;
float: left;
width: 25%;
line-height: 50px;
font-size: 20px;
}
.tab{
display: none;
background-color:rgba(238,118,33,0.8);
overflow:auto;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
font-size: 16px;
line-height: 40px;
}
/*美化滾動條*/
.tab::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 3px rgba(238,118,33,0.3);
background-color:#F5F5F5;
}
.tab::-webkit-scrollbar {
width:5px;
background-color:#font: 5px F5 F5;;
}
.tab::-webkit-scrollbar-thumb {
background-color:#CD6839;
border:2px solid #CD6839;
}
第三步,用jQuery添加事件
$(function(){
//滑鼠懸浮顯示div的內容
$(".labels_1").mouseover(function () {
$(".one").slideDown();
//滑鼠離開,div隱藏
}).mouseleave(function () {
$(".one").slideUp();
})
//2
$(".labels_2").mouseover(function () {
$(".two").slideDown();
}).mouseleave(function () {
$(".two").slideUp();
})
//3
$(".labels_3").mouseover(function () {
$(".three").slideDown();
}).mouseleave(function () {
$(".three").slideUp();
})
//4
$(".labels_4").mouseover(function () {
$(".four").slideDown();
}).mouseleave(function () {
$(".four").slideUp();
})
//獲取頁面高度,減去頂部高度
var height =$(window).height()-51;
//獲取內容的高度
var height1 =$('.one').outerHeight();
//判斷div高度是否大于頁面高度
if(height1>=height){
//當div高度大于頁面高度時,為div設定高度
$(".one").height(height);
}
var height2 =$('.two').outerHeight();
if(height2>=height){
$(".two").height(height);
}
var height3 =$('.three').outerHeight();
if(height3>=height){
$(".three").height(height);
}
var height4 =$('.four').outerHeight();
if(height4>=height){
$(".four").height(height);
}
})
好了,很簡單,這就已經完成了
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/876.html
標籤:HTML5
上一篇:vue移動端上拉加載