整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
#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小时内与您取得联系。
