整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
#goTopBtn, #goBottom, #shangy, #xiay, #menuPage, #lPage, #fPage{
width: 18px;
line-height: 1.2;
padding: 5px 0;
font-size: 12px;
text-align: center;
position: fixed;
right: 10px;
cursor: pointer;
filter: Alpha(opacity=30);
opacity=.3;
font-weight:bold;
}
#goTopBtn, #goBottom, #menuPage, #lPage, #fPage{
background-color:#999;
color:#000;
}
#shangy, #xiay, #lPage, #fPage{
background-color: #bbb;
color: #000;
}
#fPage{
bottom: 236px;
height:42px;
white-space:nowrap;
overflow:hidden;
//writing-mode:tb-rl;
}
#menuPage{
bottom: 198px;
height:27px;
white-space:nowrap;
overflow:hidden;
}
#lPage{
bottom: 145px;
height:42px;
white-space:nowrap;
overflow:hidden;
}
#goTopBtn{
bottom: 105px;
}
#goBottom {
bottom: 30px;
}
#shangy {
bottom: 80px;
}
#xiay {
bottom: 55px;
}
#goTopBtn:hover, #goBottom:hover, #shangy:hover, #xiay:hover, #menuPage:hover, #lPage:hover, #fPage:hover{
background-color:#ccc;
border:#ccc 0px solid;
}
#goTopBtn a:link, #goBottom a:link, #xiay a:link, #shangy a:link, #menuPage a:link, #menuPage a:visited, #lPage a:link, #fPage a:link, #lPage a:visited, #fPage a:visited {
text-decoration: none;
color:white;
}
<div id="fPage"><a id="fPagea" href="javascript：void(null)" target="_self">上<br />一<br />頁</a></div>
<div id="menuPage"><a href="index.html" target="_self">目<br />錄</a></div>
<div id="lPage"><a id="LPagea" href="javascript：void(null)" target="_self">下<br />一<br />頁</a></div>
<div style="display:none" id="goTopBtn"><a target="_self" style="color:#fff;">∧</a></div>
<div style="display:none" id="shangy">
<a onclick="shangy()" target="_self" style="color:#fff;">↑</a></div>
<div id="xiay">
<a onclick="xiay()" target="_self" style="color:#fff;">↓</a></div>
<div id="goBottom">
<a onclick="downn()" target="_self" style="color:#fff;">∨</a></div>
<script type=text/javascript>
goTopEx();
function xiay(){
window.scrollBy(0,window.innerHeight-10);
}
function shangy(){
window.scrollBy(0,-window.innerHeight+10);
}
var obj3=document.getElementById("xiay");
var obj4=document.getElementById("goBottom");
function getHeight(){
if(browser4=="ch"){
//谷歌瀏覽器
return document.body.clientHeight;
}else{
//IE、firefox等瀏覽器
return document.documentElement.clientHeight;
}
}
getHeight()<window.innerHeight+50?obj3.style.display="none":obj3.style.display="";
getHeight()<window.innerHeight+50?obj4.style.display="none":obj4.style.display="";
if(browser4!="ch"){//firefox需要嘗一下才顯示向下圖標
xiay();
shangy();
}
//上一頁、下一頁按鈕，需要文件名是數字
var strUrl=window.location.href;
var arrUrl=strUrl.split("/");
var thispage=arrUrl[arrUrl.length-1];
var thispage2=thispage.split(".");
var thispage3=thispage2[thispage2.length-2];
if(thispage3 == 1){
var obj5=document.getElementById("fPage");
obj5.style.display="none"
}else{
var fpage = thispage3 - 1;
fpage = fpage +".html"
document.getElementById("fPagea").href=fpage;
}
if(thispage3 == 100){
var obj6=document.getElementById("lPage");
obj6.style.display="none"
}else{
var fpage = thispage3 - 1;
fpage = fpage +".html"
document.getElementById("fPagea").href=fpage;
}
</script>
當將鼠標停留在“上一面”按鈕處時，網頁效果如下：
-End-
導航欄
圖書管理功能模塊圖
圖書管理功能包4括大模塊 ，16個子模塊。
1. 制作方式： 列表<ul><li>制作。
四大模塊：用一個<ul><li></li></ul>列表制作出來，每個模塊下面的四個子模塊用同樣的<ul><li></li></ul>列表嵌套出來。
具體格式如下：
<ul> <li>模塊1 <ul> <li>模塊1.1</li> <li>模塊1.2</li> <li>模塊1.3</li> <li>模塊1.4</li> </ul> </li> <li>模塊2 <ul> <li>模塊2.1</li> <li>模塊2.2</li> <li>模塊2.3</li> <li>模塊2.4</li> </ul> </li> .......... </ul>
2.導航標簽<a>：都是一個超鏈接，通過點擊鏈接到相應的導航頁面。
所以在每個列表選項中，都應該加入超鏈接<a>標簽。
<ul> <li><a href="javascript：;" >用戶管理</a></li> ... </ul>
3.導航框的修飾：CSS樣式表
3.1 樣式表接入方式：
一般用鏈接式<link >，運用高內聚，低耦合的思想。
<link rel="stylesheet" type="text/css" href="CSS/demo.css">
3.2標簽選擇器
行內選擇器>id選擇器>class選擇器>標簽選擇器
常用到的為 id選擇器、class選擇器、標簽選擇器。
例如：
<ul> <li class="litems"><a href="javascript：;">用戶管理</a> <ul class="uitems"> <li><a href="javascript：;">添加用戶</a></li> </ul> </li> </ul>
具體用法見：HTML/CSS中可直接輸數據的表格
4.導航欄的框框
模塊標簽特點：
litems類標簽 中 <a>標簽的樣式如下：
.litems>a
{
background-color:#990020; /*背景色*/
height:30px;
display:block; /*塊顯示*/
line-height:30px; /*垂直居中*/
border-left: solid 12px #711515; /*邊框*/
padding-left:5px; /*左邊距*/
}
5.鼠標懸浮變化--- a:hover 屬性
鼠標未懸浮狀態
鼠標懸浮狀態
特點：鼠標懸浮時，字體變為黃色。
a:hover
{
color:#FF0;
}
制作一個簡單的導航欄，常用的就是列表格式。通過列表的嵌套和樣式的修改，即可建立一個簡約得體的導航列表。
以下附帶部分樣式源碼：
HTML列表內容
CSS樣式表源碼：
案例和由此案例重點講解的知識點介紹
案例代碼實現
行內標簽知識點詳解
此案例是頁面，效果如下：
此頁面的技術實現解析：
所有元素在統一行顯示的時候，需要使用到行內標簽img 和 a來實現
此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：
行內標簽
第一步：書寫導航條的html代碼
第二步：定義導航的css樣式
行內元素
-行內元素：
在html中<a>、<span>、<br>、<i>、<em>、<strong>、<label>等等屬于行內元素
-行內元素三大特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變（廢話）。
案例：
a{
background-color: PowderBlue;
width: 500px;
height: 300px;
//元素的高度、寬度、行高及頂部和底部邊距不可設置
}
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
