【记录】第一次做web项目

第一次做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;">&nbsp;&nbsp;&nbsp;收藏的图书</a></div>
						<div id="two2" onclick="fnOff()"><a href="#" style="color: #626262;">&nbsp;&nbsp;&nbsp;收藏的视频</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>&nbsp;&nbsp;&nbsp;
						<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;" />&nbsp;&nbsp;师范专业建设模块</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" />&nbsp;&nbsp;招聘信息&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<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">&nbsp;<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">友情链接&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="img/link2.jpg" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#"><img src="img/link3.jpg" /></a>&nbsp;&nbsp;&nbsp;&nbsp;<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>


  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值