目录
一、引入js文件和css文件：在<head>里添加以下语句，js代码和css代码写在js文件里、
css文件里，js文件和css文件不用在包含<style>和<script>
<script type="text/javascript" src="js文件路径"></script>
<link rel="stylesheet" href="css文件路径" />二、设置UTF-8编码
<!--设置UTF编码-->
<meta charset="UTF-8">三、常见的css属性及其功能
width/height：设置元素宽度，高度
color：字体颜色
text-align:字体位置，居中为center
font-size：字体大小
font-family：字体种类，可为“华文楷体”等等
margin-top、bottom、left、right：设置离外包含元素距离
padding-top、bottom、left、right：设置离内包含元素距离，可设置内部字体形状等
background-color：设置背景颜色
position：可设置为relative或absolute，紧接着在下面设置top、bottom、left、right移动元素
text-decoration: none; 去除下划线
border-radius:100%; overflow:hidden; 设置圆角图片
四、常见CSS功能和JS功能
CSS功能：
（1）图片悬停放大效果
#p3:hover{
transform: scale(1.18); /*设置图片悬停放大倍数*/
}
#p3{
margin-left: 10%;
transition: all 0.6s; /*设置图片悬停放大时间*/
}
（2）实现菜单项的悬停下拉
.dropdown:hover .dropdown-menu { /*实现悬停下拉效果，hover为悬停后css样式*/
display: block; /*block为显示，none不显示*/
background: #90EE90;
}
（3）点击按钮回到顶部，设置锚点
<!--头部,同时定义锚点id为header-->
<div id="header" class="container-fluid bg-primary ">
…..
</div >
#goTop{ /*回到顶部css*/
position: fixed; /*fix格式：固定在浏览器窗口上*/
bottom: 100px;
left: 96%;
}
（4）小说页里的分页效果，悬停显示手指，同时字体变红
.page a,span{
text-decoration: none;
border:1px solid #f9d52b;
padding: 5px 7px;
color: #767675;
cursor: pointer; /*鼠标放在元素上变为手指*/
}
.page a:hover,.page span:hover{ /*鼠标放在元素上的效果*/
color: red;
}
（5）背景图像问题，铺满整个屏幕
body{
margin: 0 auto;
background-repeat:no-repeat ; /*背景图像铺满屏幕*/
background-size:100% 100%;
background-attachment: fixed;
}
（6）span标签无法设置长宽效果
#already span{
display: inline-block; /*span标签必须设置display:inline-block才能设置长度和宽度*/
width: 8%;
height: 5%;
border-top: 1px solid ;
border-left: 1px solid ;
border-right: 1px solid;
text-align: center;
font-size: 16px;
padding-top: 12px;
margin-top: 10px;
background-color: gainsboro;
}
JS功能：
（1）随机改变网页背景：点击按钮触发事件，获取随机数来改变网页背景颜色的js代码
//获取n位随机数
var char=["#DC143C","#D8BFD8","#6A5ACD","#4169E1","#1E90FF","#40E0D0","#90EE90","#FFDEAD",
"#FF0000","#A9A9A9","black"];
function generateMixed() {
var res = "";
var id = Math.floor(Math.random() * 10);
res += char[id];
return res;
}
function changeColor(){
var background=document.getElementById("main");
//获取n位随机数,随机来源chars
var color = generateMixed();
background.style.backgroundColor=color;
}
（2）时钟显示器：在网页上显示时间，通过jq操作css属性来显示不同的图片实现时钟效果
function add(i) { //设置函数，如果获取到的时间<10,就在它前面加上字符“0”，比如获取到的小时为5，那么输出就是“05”
if(i<10)
return '0'+i;
else
return ''+i;
}
window.onload=function () {
setInterval(function(){
var time = new Date();
var hour = time.getHours(), //获取当前小时数字
min = time.getMinutes(), //获取当前分钟数字
sec = time.getSeconds(); //获取当前秒数数字
hour=add(hour); //应用转化函数
min=add(min); //应用转化函数
sec=add(sec); //应用转化函数
var Img=document.getElementsByClassName('clockI') //获取图片，此时获取到是数组
var array=hour+min+sec; //将当前时间连接在一起
for(var i=0;i<Img.length;i++){
Img[i].src='images/num'+array.charAt(i)+'.png'; //charAt(i)获取某字符串的第i个字符
}
},1000) //设置定时器，每隔一秒刷新页面
}
（3）删除元素：点击删除按钮隐藏元素
window.onload=function(){
$(document).ready(function(){
$("#btn1").click(function(){
$("#btn1").parent().hide();
})
$("#btn2").click(function(){
$("#btn2").parent().hide();
})
$("#btn3").click(function(){
$("#btn3").parent().hide();
})
});
}
（4）二级菜单：悬停一级菜单时显示二级菜单，移出一级菜单范围时隐藏二级菜单。二级菜单可点击
/*二级菜单效果*/
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
var judge1=1; //判断从组移出时是移至外部还是移至标签（0代表一直标签，1代表移至外部）
var judge2=1;
var judge3=1;
$("#p1").mouseover(function(){
$("#p1").css('backgroundColor','yellowgreen');
$("#e1").show();
})
$("#p1").mouseout(function(){
$("#p1").css('backgroundColor','green');
if(judge1==1)$("#e1").hide();
})
$("#e1").mouseover(function(){
$("#e1").show();
judge1=0;
})
$("#e1").mouseout(function(){
$("#e1").hide();
judge1=1;
})
$("#p2").mouseover(function(){
$("#p2").css('backgroundColor','yellowgreen');
$("#e2").show();
})
$("#p2").mouseout(function(){
$("#p2").css('backgroundColor','green');
if(judge2==1)$("#e2").hide();
})
$("#e2").mouseover(function(){
$("#e2").show();
judge2=0;
})
$("#e2").mouseout(function(){
$("#e2").hide();
judge2=1;
})
$("#p3").mouseover(function(){
$("#p3").css('backgroundColor','yellowgreen');
$("#e3").show();
})
$("#p3").mouseout(function(){
$("#p3").css('backgroundColor','green');
if(judge3==1)$("#e3").hide();
})
$("#e3").mouseover(function(){
$("#e3").show();
judge3=0;
})
$("#e3").mouseout(function(){
$("#e3").hide();
judge3=1;
})
（5）使用iframe嵌套页面：使用jq操纵iframe标签的src属性达到页面局部切换效果。
$("#deleteGG").click(function(){
$("#ifr").attr('src','deleteGG.html');
})
$("#manageGG").click(function(){
$("#ifr").attr('src','manageGG.html');
})
$("#deleteNovel").click(function(){
$("#ifr").attr('src','deleteNovel.html');
})
五、iframe标签：实现页面局部刷新
/*
iframe:
第一种:让菜单项每个超链接都与iframe绑定
<a href="指向跳转链接" target="iframe标签的name属性">
<iframe name="">
第二种：通过jq或js设置iframe的src属性（该属性设置iframe的显示页）来切换不同的菜单项
$("#manageGG").click(function(){
$("#ifr").attr('src','manageGG.html');
})
*/