目录
第一次做web项目
记录
第一次小学期这应该是第二天了,做完很有成就感
这只是一个简单的网页 但是额感觉快累死了,刚学。。。–6.23凌晨1:45…
明天再说 或者说是今天起来…
代码片
.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {background-color: white;position: relative;}
#diva {margin: 0 auto;width: 1000px;background-color: white;
height: 1480px;}
#div1 {height: 96px; background-color: white;}
#div2 {width: 100%; height: 40px; background-color: #232323;
position: absolute;right: 0px;left: 0px;}
#div3 {height: 285px; background-color: deepskyblue; margin-top: 55px;
margin-bottom: 15px;}
#div4 {height: 31px; background-color: white; margin-bottom: 15px;}
#div5 {height: 420px; background-color: white; margin-bottom: 15px;}
#div6 {height: 300px; background-color: white; margin-bottom: 30px;}
#div7 {width: 100%; height: 220px;position: absolute;left: 0px;right: 0px;}
a {text-decoration: none;}
#two {height: 40px; width: 108px; display: none;background-color: white;margin-top: 6px;}
#div1a a{color: #FE4A12;}
#div1a {width: 108px; height: 28px; border: 1px solid #E5E5E5;z-index: 10;}
#two1:hover {background-color: #E5E5E5;}
#two2:hover {background-color: #E5E5E5;}
#div1b a{color: #9A9A9A;}
#div1a {position: absolute; top: 60px; left: 940px;}
#div1b {position: absolute; top: 63px; left: 1073px;}
#div2all{position: absolute;left: 210px;}
.div2l{width: 90px;height: 40px;float: left;background-color: black;
color: white;text-align: center;line-height: 40px;}
.div2l:hover{height: 42px;background-color: #FE4A12;margin: 2px;
box-shadow: 5px 5px 5px #000000;}
.div2l a{color: white;}
.div31l{width: 30px;height: 25px;background-color: #FFFFFF;color: #FF7101;
border: 1px solid #FF7101;text-align: center;line-height: 25px;}
.div31l:hover{background-color: #FF7101;color: #FFFFFF;}
#div31{position: absolute;left: 700px;top: 380px;}
#div32{position: absolute;left: 740px;top: 380px;}
#div33{position: absolute;left: 780px;top: 380px;}
#div34{position: absolute;left: 820px;top: 380px;}
#div4{border: 2px solid #C4C4C4;}
#div4a{text-align: center;width: 98px;height: 31px;line-height: 31px;
border-right: 1px solid #C4C4C4;float: left;}
#div4b{width: 90%;float: left;}
a{text-decoration: none;color: black;}
#div5{width: 1000px;height: 420px;}
#div5a{margin: 1px;width: 234px;height: 420px;}
#div5b{width: 510px;height: 420px;}
.a5l{width: 230px;height: 243px;}
#div5a1{height: 45px;text-align: center;line-height: 45px;
border: 1px solid #D6D6D6;border-bottom: 1px solid #808080;}
#div5a1:hover{background-color: #2F2F2F;color: white;}
#div5a2 {margin-top: -8px;margin-left: 7px;display: none;}
#div5a11{width: 6px;height: 45px;float: left;}
.div5a3{width: 80px;height: 36px;background-color: #E4E4E4;text-align: center;
line-height: 36px;margin: 5px;float: left;margin-left: 26px;font-size: 12px;}
#div5a3{background-color: #FEFEFE;}
#div5a4{height: 45px;text-align: center;line-height: 45px;
border: 1px solid #D6D6D6;border-bottom: 1px solid #808080;}
#div5a4:hover{background-color: #2F2F2F;color: white;}
#div5a5 {margin-top: -8px;margin-left: 7px;display: none;}
#div5a12{width: 6px;height: 45px;float: left;}
.div5a5{margin-top: 3px;font-size: 12px;}
.b5l{width: 520px;height: 243px;}
#div5a{float: left;}
#div5b{float: left;}
#div5c{float: left;}
#div5a{font-size: 15px;}
#div5b1{width: 510px;height: 45px;text-align: center;line-height: 45px;position: relative;
border: 1px solid #D6D6D6;border-bottom: 1px solid #FD4A12;}
#div5b1a{position: absolute;top: 0px;left: 10px;width: 80px;}
#div5b1a:hover{background-color: #FD4A12;color: white;box-shadow: 4px 2px 4px #00BFFF;}
#div5b1b{position: absolute;top: 0px;right: 50px;}
#div5b{position: relative;margin: 1px;}
#div5b2{position: absolute;top: 66px;left: 14px;}
#div5b3{position: absolute;left: 120px;top: 70px;font-size: 15px;}
.div5b3l{position: absolute;left: 330px;}
.div5b3l2{margin: 5px;}
.div5b3l2:hover a{color: #FD4A12;}
#div5b4{width: 510px;height: 45px;text-align: center;line-height: 45px;position: relative;
border: 1px solid #D6D6D6;border-bottom: 1px solid #FD4A12;}
#div5b4a{position: absolute;top: 0px;left: 15px;width: 100px;}
#div5b4a:hover{background-color: #FD4A12;color: white;box-shadow: 4px 2px 4px #00BFFF;}
#div5b4b{position: absolute;top: 0px;right: 50px;}
#div5b5{position: absolute;top: 310px;left: 34px;}
#div5b6{position: absolute;top: 310px;left: 154px;}
#div5b7{position: absolute;top: 310px;left: 274px;}
#div5b8{position: absolute;top: 310px;left: 394px;}
.div5b5l{font-size: 13px;color: #555555;}
.div5c1bl{width: 204px;height: 40px;margin: 10px;text-align: left;
border: 1px solid #9A9A9A;font-size: 13px;}
#div5c{position: relative;margin: 1px;}
.div5ct{position: absolute;left: 11px;}
.div5ct2{text-align: left;line-height: 40px;margin-left: 10px;}
.div5ct3{position: absolute;right: 10px;margin-top: -38px;margin-right: 10px;}
#div5c2{margin-top: 60px;}
#div5c1b{margin-top: 30px;}
#div6{width: 1000px;height: 300px;}
#div6a{width: 233px;}
#div6b{width: 754px;}
#div6a1{height: 45px;text-align: center;line-height: 45px;position: relative;
border: 1px solid #D6D6D6;border-bottom: 1px solid #FD4A12;}
#div6a1a{position: absolute;top: 0px;left: 10px;width: 80px;}
#div6a1a:hover{background-color: #FD4A12;color: white;
box-shadow: 4px 2px 4px #00BFFF;}
.div6a2l{float: left;margin: 13px;}
#div6a{float: left;}
#div6b{float: left;margin-left: 1px;}
#div6b1{height: 45px;text-align: center;line-height: 45px;position: relative;
border: 1px solid #D6D6D6;border-bottom: 1px solid #FD4A12;}
#div6b1a{position: absolute;top: 0px;left: 10px;width: 80px;}
#div6b1a:hover{background-color: #FD4A12;color: white;
box-shadow: 4px 2px 4px #00BFFF;}
.div6b2l{float: left;margin: 10px;}
.div6b2t{font-size: 13px;text-decoration: none;color: #9A9A9A;text-align: center;}
#div7 {width: 100%; height: 220px; background-color: #303030;}
#div7{color: #909090;text-align: center;}
#div7a{position: absolute;top: 0px;left: 280px;}
#div7b{color: white;}
</style>
</head>
<body>
<div id="diva">
<div id="div1">
<img src="img/2019-06-21_090622.png" width="626px" height="88px"/>
<div id="div1a">
<a href="#" onmouseover="fnShow()">
<img src="img/2019-06-21_100048.png" />我的收藏<img src="img/2019-06-21_101108.png" />
</a>
<div id="two">
<div id="two1" onclick="fnOff()"><a href="#" style="color: #626262;"> 收藏的图书</a></div>
<div id="two2" onclick="fnOff()"><a href="#" style="color: #626262;"> 收藏的视频</a></div>
</div>
</div>
<div id="div1b"><img src="img/2019-06-21_211703.png" /><a href="#">联系客服</a></div>
</div>
<div id="div2">
<div id="div2all">
<div id="div2a" class="div2l"><a href="#">首页</a></div>
<div id="div2b" class="div2l"><a href="#">课程介绍</a></div>
<div id="div2c" class="div2l"><a href="#">教程下载</a></div>
<div id="div2d" class="div2l"><a href="#">师资力量</a></div>
<div id="div2e" class="div2l"><a href="#">就业信息</a></div>
<div id="div2f" class="div2l"><a href="#">学员作品</a></div>
<div id="div2g" class="div2l"><a href="#">校园生活</a></div>
<div id="div2h" class="div2l"><a href="#">报名流程</a></div>
<div id="div2i" class="div2l"><a href="#">常见问题</a></div>
<div id="div2j" class="div2l"><a href="#">学校路线</a></div>
</div>
</div>
<div id="div3">
<div id="div3a" class="div3l"><img src="img/01.jpg" /></div>
<div id="div31" class="div31l" onmouseover="fnChange(1)">1</div>
<div id="div32" class="div31l" onmouseover="fnChange(2)">2</div>
<div id="div33" class="div31l" onmouseover="fnChange(3)">3</div>
<div id="div34" class="div31l" onmouseover="fnChange(4)">4</div>
</div>
<div id="div4">
<div id="div4a" class="div4l">通知公告</div>
<div id="div4b" class="div4">
<marquee>
<img src="img/icon6.gif" />
<a href="#" style="color: #000000;">【广州喜讯】报名网页页面UI就业班喜送基础班</a>
<img src="img/icon6.gif" /><a href="#" style="color: #000000;">史上最难就业年,怎么办?到传智免费学PS吧!</a>
</marquee>
</div>
</div>
<div id="div5">
<div id="div5a">
<div id="div5aa" class="a5l">
<div id="div5a1" onmouseover="fnShow5a2()" onmouseout="fnOff5a2()">
<div id="div5a11"></div>
<img src="img/icon6.gif" style="width: 6px;height: 8px;" /> 师范专业建设模块</div>
<div id="div5a2"><img src="img/icon8.gif" /></div>
<div id="div5a3">
<div id="div5a3a" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">人才培养</a></div>
<div id="div5a3b" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">教学改革</a></div>
<div id="div5a3c" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">师资队伍</a></div>
<div id="div5a3d" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">示范效应</a></div>
<div id="div5a3e" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">课程体系</a></div>
<div id="div5a3f" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">实习实训</a></div>
<div id="div5a3g" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">校企互联</a></div>
<div id="div5a3h" class="div5a3"><img src="img/2019-06-22_100637.png" />
<a href="#">more</a></div>
</div>
</div>
<div class="a5l">
<div id="div5a4" onmouseover="fnShow5a5()" onmouseout="fnOff5a5()">
<div id="div5a12"></div>
<img src="img/2019-06-22_102434.png" /> 招聘信息
<img src="img/more.gif" /> </div>
<div id="div5a5" class="div5a5"><img src="img/icon8.gif" /></div>
<div id="div5a6" class="div5a5"><img src="img/2019-06-22_104323.png" /><a href="#">北京市和信息科技招聘UI设计</a></div>
<div id="div5a7" class="div5a5"><img src="img/2019-06-22_104323.png" /><a href="#">上海为网络公司招聘前端工程师</a></div>
<div id="div5a8" class="div5a5"><img src="img/2019-06-22_104323.png" /><a href="#">用特互动网络公司招聘前端工程师</a></div>
<div id="div5a9" class="div5a5"><img src="img/2019-06-22_104323.png" /><a href="#">北京蓝红科技招聘UI设计实习生</a></div>
<div id="div5a10" class="div5a5"><img src="img/2019-06-22_104323.png" /><a href="#">上海益网络公司招聘JS前端工程师</a></div>
</div>
</div>
<div id="div5b">
<div class="b5l">
<div id="div5b1">
<div id="div5b1a">专业动态</div>
<div id="div5b1b"><img src="img/more.gif" /></div>
</div>
<div id="div5b2"><img src="img/pic1.jpg" /></div>
<div id="div5b3">
<div class="div5b3l">2013/06</div>
<div id="div5b3a" class="div5b3l2"><img src="img/2019-06-22_202259.png" /><a href="#">网页平面设计学院七七版香山哟</a></div><div class="div5b3l">2013/06</div>
<div id="div5b3b" class="div5b3l2"><img src="img/2019-06-22_202259.png" /><a href="#">传智播客王爷平面六七久违的体育课</a></div><div class="div5b3l">2013/06</div>
<div id="div5b3c" class="div5b3l2"><img src="img/2019-06-22_202259.png" /><a href="#">网页平面设计学院四期奥林匹克森林公园一日游</a></div><div class="div5b3l">2013/06</div>
<div id="div5b3d" class="div5b3l2"><img src="img/2019-06-22_202259.png" /><a href="#">网页平面设计学院三七班798艺术区一日游</a></div><div class="div5b3l">2013/06</div>
<div id="div5b3e" class="div5b3l2"><img src="img/2019-06-22_202259.png" /><a href="#">网页平面设计学院二期版自助烧烤</a></div>
</div>
</div>
<div class="b5l">
<div id="div5b4">
<div id="div5b4a"><img src="img/2019-06-22_210058.png" /> 师资力量</div>
<div id="div5b4b"><img src="img/more.gif" /></div>
</div>
<div id="div5b5"><a href="#"><img src="img/teacher01.gif" /><div class="div5b5l">网页主讲张老师</div></a></div>
<div id="div5b6"><a href="#"><img src="img/teacher02.gif" /><div class="div5b5l">网页主讲刘老师</div></a></div>
<div id="div5b7"><a href="#"><img src="img/teacher03.gif" /><div class="div5b5l">网页主讲韩老师</div></a></div>
<div id="div5b8"><a href="#"><img src="img/teacher04.gif" /><div class="div5b5l">网页主讲邵老师</div></a></div>
</div>
</div>
<div id="div5c">
<div id="div5c1">
<div id="div5c1a"> <b>精品课程</b> <i style="color: #AEAEAE;">Course</i> </div>
<div id="div5c1b" class="div5c1bl"><div class="div5ct"><img src="img/2019-06-22_215116.png" /></div><div class="div5ct2"><a href="#">Photoshop图像处理</a></div><div class="div5ct3"><img src="img/2019-06-22_214858.png" /></div></div>
<div id="div5c1c" class="div5c1bl"><div class="div5ct"><img src="img/2019-06-22_215142.png" /></div><div class="div5ct2"><a href="#">网页平面设计</a></div><div class="div5ct3"><img src="img/2019-06-22_214916.png" /></div></div>
<div id="div5c1d" class="div5c1bl"><div class="div5ct"><img src="img/2019-06-22_215207.png" /></div><div class="div5ct2"><a href="#">UI设计</a></div><div class="div5ct3"><img src="img/2019-06-22_214950.png" /></div></div>
<div id="div5c1e" class="div5c1bl"><div class="div5ct"><img src="img/2019-06-22_215227.png" /></div><div class="div5ct2"><a href="#">HTMl+CSS网页制作</a></div><div class="div5ct3"><img src="img/2019-06-22_214959.png" /></div></div>
<div id="div5c1f" class="div5c1bl"><div class="div5ct"><img src="img/2019-06-22_215244.png" /></div><div class="div5ct2"><a href="#">JavaScript制作网页特效</a></div><div class="div5ct3"><img src="img/2019-06-22_215011.png" /></div></div>
</div>
<div id="div5c2"><img src="img/study.gif" /> </div>
</div>
</div>
<div id="div6">
<div id="div6a">
<div id="div6a1">
<div id="div6a1a">数据统计</div>
</div>
<div id="div6a2" class="div6a2l"><a href="#"><img src="img/pic02.gif" /></a></div>
<div id="div6a3" class="div6a2l"><a href="#"><img src="img/pic03.gif" /></a></div>
<div id="div6a4" class="div6a2l"><a href="#"><img src="img/pic022.gif" /></a></div>
<div id="div6a5" class="div6a2l"><a href="#"><img src="img/pic033.gif" /></a></div>
</div>
<div id="div6b">
<div id="div6b1">
<div id="div6b1a">资源中心</div>
</div>
<div id="div6b2" class="div6b2l"><a href="#"><img src="img/book01.gif" /><div class="div6b2t">网页设计与制作<br />(HTML+CSS)</div></a></div>
<div id="div6b3" class="div6b2l"><a href="#"><img src="img/book02.gif" /><div class="div6b2t">PhotoShop CS6图像<br />设计基础教程</div></a></div>
<div id="div6b4" class="div6b2l"><a href="#"><img src="img/book03.gif" /><div class="div6b2t">Java基础入门</div></a></div>
<div id="div6b5" class="div6b2l"><a href="#"><img src="img/book04.gif" /><div class="div6b2t">C语言开发入门教程</div></a></div>
<div id="div6b6" class="div6b2l"><a href="#"><img src="img/book05.gif" /><div class="div6b2t">Objective-C入门教程</div></a></div>
</div>
</div>
<div id="div7">
<div id="div7a"><img src="img/2019-06-22_110226.png" /></div><br /><br />
<div id="div7b">友情链接 <a href="#"><img src="img/link2.jpg" /></a>
<a href="#"><img src="img/link3.jpg" /></a> <a href="#"><img src="img/link4.jpg" /></a></div>
<div id="div7c">传智播客-专业JAVA培训,.net培训,php培训,ios培训,C++培训,网页设计,平面设计配虚拟机构</div>
<div id="div7d">版权所有 2006 - 2013 北京传智播客教育科技有限公司</div>
<div id="div7e">地址:北京市昌平区建材城西路禁言楼办公室一层 邮编:100096</div>
<div id="div7f">电话:010-82935150/60/70 传真:010-8561321321 邮箱 zjklhiaysi65sdhs</div>
<div id="div7g">京ICP备32784565487号 京公网安备564798415112313</div>
</div>
</div>
<script>
var oDiv=document.getElementById("diva");
var oDiv1a=document.getElementById("div1a");
var oDiv1t=document.getElementById("two");
var oDiv3a=document.getElementById("div3a");
var oImg=oDiv3a.getElementsByTagName("img");
var oDiv5a2=document.getElementById("div5a2");
var oDiv5a11=document.getElementById("div5a11");
var oDiv5a5=document.getElementById("div5a5");
var oDiv5a12=document.getElementById("div5a12");
function fnShow(){
oDiv1t.style.display="block";
oDiv1a.style.height="70px";
}
function fnOff(){
oDiv1t.style.display="none";
oDiv1a.style.height="28px";
}
function fnChange(w){
var w;
oImg[0].src="img/0"+w+".jpg";
}
var t=1;
function fnChange2(){
if(t>4){
t=1;
}
oImg[0].src="img/0"+t+".jpg";
t++;
}
setInterval("fnChange2()",3000);
function fnShow5a2(){
oDiv5a2.style.display="block";
oDiv5a11.style.backgroundColor="#FD4A12";
}
function fnOff5a2(){
oDiv5a2.style.display="none";
oDiv5a11.style.backgroundColor="white";
}
function fnShow5a5(){
oDiv5a5.style.display="block";
oDiv5a12.style.backgroundColor="#FD4A12";
}
function fnOff5a5(){
oDiv5a5.style.display="none";
oDiv5a12.style.backgroundColor="white";
}
</script>
</body>
</html>