网页总结
网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#bg_body {
margin: 0 auto;
width: 1200px;
background-image:url(img/images/bj001.jpg);
}
.head,.foot,.nav {
clear: both;
color: white;
}
.head {
margin: 5px auto;
text-align: center;
}
.nav {
height: 500px;
}
.nav1 ul li {
margin: 0 150px;
width: 70px;
display: inline-block;
text-align: center;
}
#nav21 {
float: left;
}
#nav22 {
height: 350px;
}
#nav221 {
text-align: center;
}
</style>
<script>
window.onload = function() {
var index = 0;
window.setInterval( function() {
h = document.getElementById("bg_body")
images = ["img/images/bj001.jpg","img/images/bj002.jpg","img/images/bj003.jpg","img/images/bj004.jpg","img/images/bj005.jpg","img/images/bj006.jpg"];
index += 1;
index %= images.length
h.style.backgroundImage = "url(" + images[index] + ")"
},10000)
}
</script>
</head>
<body id="bg_body">
<div class="head">
<h1>HTML5</h1>
</div>
<div class="nav">
<div class="nav1">
<ul>
<li><p onclick="aoo()">HTML</p></li>
<li><p onclick="foo()">CSS</p></li>
<li><p onclick="goo()">JavaScipt</p></li>
</ul></div>
<div id="nav2">
<div id="nav21">
<img id="nav211" src="" /></div>
<div id="nav22">
<p id="nav221">恭喜你降临web的边缘的地带，这里的资源贫瘠，在这里你将获得不到足够的灵力，你的
修真生涯既是开始，也是结束。即便如此，这里依然遍布着各个修真门派，现实而又残酷</p></div>
</div>
</div>
<div class="foot">
<p>世纪天成|上海邮通科技有限公司 版权所有|上海市徐汇区钦州北路1066号74号楼3楼|
不良信息举报电话：021-34144567自律公约</p>
<p>copyright © 2018 Shanghai Post & Telelcommunications Technology Co,.ltd
</p>
</div>
<script>
function foo () {
h1 = document.getElementById("nav22");
h1.innerHTML = "CSS:层叠样式表：Cascading Style Sheets"
+"<br>"+ "CSS内容主要分为：边框，圆角，背景，渐变，文本效果，字体，图片，按钮，框大小等"
+ "<br>" + "主要使用：magin,border,width,height,text,padding,backgrpound"
+ ",box,overflow,font等来实现样式表的书写";
h2 = document.getElementById("nav211");
h2.src = "img/a3.jpg"
}
function aoo() {
h1 = document.getElementById("nav22");
h1.innerHTML = "H5：超文本标记语言-HyperText MarkupLa"+
"nguage是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。"
+"<br>"+ "H5主要有以下标签:" + "<br>" + "标题:h1-h6。随着数字的变大，标题的大小逐渐变小，hr用于分隔内容"
+ "<br>" + "段落:p" +"<br>" + "头部:head,title,base,linl,meta,script,style" +"<br>"+ "CSS:style,link"
+"<br>" + "图像:map,img,area" + "<br>"+"表格:table,thread,tbody,tfoot,tr,td,th" +"<br>"+ "列表:ur,ul,ol,dl,dt,dd,"
+"<br>"+"区块:div,span" +"<br>" + "布局:div,span" +"<br>" +"表单:form,input,label,fieldset,legend,select,option,button,textarea"
+ "<br>" +"框架：iframe"
h2 = document.getElementById("nav211");
h2.src = "img/a1.jpg"
}
function goo(){
h1 = document.getElementById("nav22");
h1.innerHTML = "JavaScript 是 Web 的编程语言" + "<br>"
+ "如需在 HTML 页面中插入 JavaScript，请使用 <script>标签。"
+ "<script>和 </script>会告诉 JavaScript 在何处开始和结束。<script>和 </script>之间的代码行包含了 JavaScript"
+"<br>" +"JS大部分与Python相同，比如字符串，变量，函数，循环等，也有一些地方是不同的，比如变量的命名方式var；函数的命名方式function;JS中没有输出语句，是直接显示在浏览器中"
+ "循环的写法；JS中的数字是单一类型的；JS中可以自动转换类型"
h2 = document.getElementById("nav211");
h2.src = "img/a5.jpg"
}
</script>
</body>
</html>
