第一次编写的网页前端


之前学了下一些前端的基础,感觉这东西比较简单而且写起来还挺有趣的,前段时间花了一些时间写了点比较基础的前端页面来练习(页面看起来可能还行,但实际上有不少问题)。由于自己很菜,代码写得不太好,什么兼容性也解决不了,本来不想贴在博客的,但是毕竟没写过博客,也不知道写什么,还是贴在这作为我的第一篇博客算了...






---------------------------------------------------------------------------------------------------------------------------------

代码: 

登录页:

<!DOCTYPE html>
<html>
<head>
	<title>登录页面</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{padding: 0; margin: 0;}
		html,body{height: 100%}
		.body{
			width: 100%;
			height: 100%;
			background: url("img/login_background.jpg") no-repeat;
			background-size: 100% 100%;
		}

		.loginbox{
			padding-top: 15%;
			padding-left: 40%;
			width: 300px;
			height: 200px;


		}

		.caption{
			width: 255px;
			font-size: 18px;
			color: #fff;
			font-weight: bold;
			font-style: italic;
			margin-bottom: 20px;
			font-family: "华文彩云" "微软雅黑"			
		}

		.tr{
			height: 40px;
		}

		.td{
			font-size: 20px;
			color: #fff;
			padding-right: 1px;
		}

		input{
			opacity: 0.5
		}

		.submit{
			opacity: 1;
			padding-left: 30px;
			width: 270px;
			height: 40px;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			padding-right: 28px;
			border-radius: 20px;
			border:0px;
			color: #fff;
			background: rgba(255,255,255,0.3);
			cursor: pointer;
		}
	</style>
</head>
<body>
	<!-- 主体 -->
	<div class="body">
		<!--登录框-->
		<div class="loginbox">
			<!--待补充??????-->
			<form action="主页.html" method="">
				<table>
					<thead>
						<caption class="caption"> SCU活动策划平台会员登录</caption>
					</thead>
					<tbody>
						<tr class="tr">
							<td class="td" >账号:</td>
							<td><input autofocus size="28" type="text" name="account" placeholder="请输入登录账号" style="height: 25px;" required title="请填写账号" minlength="6" maxlength="20" value="scuniversity"></td>
						</tr>
						<tr class="tr">
							<td class="td">密码:</td>
							<td><input size="28" type="password" name="psw" placeholder="请输入登录密码" style="height: 25px" required title="请填写密码" minlength="6" maxlength="16" value="123456"></td>
						</tr>
					</tbody>
						<td colspan="2" height="50px">
							<input class="submit" type="submit" value="Login" name="login" id="login">
						</td>
				</table>
			</form>
		</div>
	</div>
	<script type="text/javascript">
		var log = document.getElementById("login");
		log.onmouseover = function(){
			this.style.background = "rgba(255,255,255,0.5)";
		}
		log.onmouseout = function(){
			this.style.background = "rgba(255,255,255,0.3)"
		}
	</script>
</body>
</html>

主页:

<!DOCTYPE html>
<html>
<head>
	<title>筹划平台主页</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin: 0;padding: 0;font-family: "微软雅黑"}

		header{
			height: 50px;
			width: 100%;
			background-color: #008dd7;
			position: fixed;
			opacity: 0.8;
			z-index: 100;
		}

		header img{float: left;opacity: 0.9}

		.logotitle{
			float: left;
			font-size: 25px;
			font-weight: bold;
			color: #fff;
			margin-left: 10px;
			height: 50px;
		}

		.logotitle span{vertical-align: -5px;}

		.mainpage{background-color: #0264a3;}

		header ul{margin-left: 120px;cursor: pointer;}

		header ul li{
			height: 50px;
			width: 100px;
			line-height: 50px;
			font-weight: bolder;
			color: #fff;
			float: left;
			list-style-type: none;
			text-align: center;
		}

		/*
		 *
		 *
		 *预留写网页主体部分
		 *
		 *
		 */


		 footer{
		 	width: 100%;
		 	height: 100px;
		 	background-color: #444;
		 	padding-top: 40px;
		 }

		 .linkbox{
		 	height: 30px;		 
		 }
	
		 footer div div{
		 	float: left;
		 }

		 .link{
		 	height: 30px;
		 	line-height: 30px;
		 	width: 100px;
		 		 
		 }

		 .link a{
		 	text-decoration: none;
		 	color: black
		 }

		 .link1{text-align: right;}
		 
		 .link2{width: 90px}

		 .copy{padding-left:460px;padding-top: 20px}
		 /*悬浮部分*/
		 .hover{
		 	width: 70px;
		 	position: fixed;
		 	top: 60%;
		 	left: 0;
		 	font-size: 12px;
		 	color: #fff;
		 	background-color: #333;
		 }

		 .hover ul li{
		 	height: 35px;
		 	line-height: 35px;	
		 	text-align: center;	 
		 	cursor: pointer;	
		 }

		 .ul-li{border-bottom: 2px solid white;}

		 #returnTop{
		 	display: none;
		 }

		 /*主体第一部分*/

		 .body-one{
		 	padding-top: 60px;
		 	height: 270px;
		 	margin: 0 auto;
		 	width: 1000px
		 }

		 .body-one-left{
		 	float: left;
		 	width: 400px;
		 }

		 .body-one-left p{
		 	height: 40px;
		 	line-height: 40px;
		 	font-size: 20px;
		 	border-bottom: 2px solid #ddeaf0;
		 	font-style: italic;
		 	color: #0366a4;
		 }

		 .body-one-left span{margin-left: 20px;color: #0366a4;}

		 .body-one-left ul li{
		 	line-height: 40px;
		 	height: 40px;
		 	font-size: 19px;
		 	list-style-image: url("img/ga_tj.jpg");		 	
		 	text-indent: 20px;		 	
		 	vertical-align: 3px;
		 	list-style-position: inside;
		 	border-bottom: 1px solid #ddeaf0;
		 }

		 .body-one-right{
		 	float: left;
		 	width: 500px;
		 	height: 250px;
		 	margin-left: 10px;
		 }

		 .image{
		 	position: absolute;
		 
		 }
		 .image1{display: block;}

		 /*轮播图图标*/	
		 .icon-box{
		 	position: relative;
			right: -530px;
			bottom: -230px;
		 	z-index: 10;
		 }

		 .icon-box span{
		 	width: 16px;
		 	height: 16px;
		 	margin-right: 3px;
		 	border-radius: 8px;
		 	text-align: center;
		 	background: #000;
		 	opacity: 0.8;
		 	display:block;		 
		 	float: left;
		 	font-size: 4px;
		 	color: #999;
		 	cursor: pointer;
		 }
		 /*轮播图标显示*/
		 .show{background: white !important;color: black !important;}
		 /*主体第二部分*/
		 .body-two{
		 	width: 1000px;
		 	margin:auto;		
		 	padding-bottom: 2px;
		 	height: 500px;
		 	padding-left: 80px
		 }

		.body-two-left,.body-two-right{
			float: left;			
		}		 

		.body-two-right{margin-left: 60px}

		 .body-two-left p,.body-two-right p{
		 	color: #000;
		 	cursor: pointer;
		 	font-family: "微软雅黑";
		 	line-height: 35px;
		 	font-size: 18px;
		 	border-left: 8px solid #0264a3;		 			 	
		 }

		 .body-two-left .tu,.body-two-left ul,.body-two-right .tu,.body-two-right ul{
		 	padding-left: 20px;
		 }

		 .body-two-left ul li,.body-two-right ul li{
		 	list-style-position:inside;		 	
		 	padding-top: 7px;					 	
		 }

		 a{
		 	text-decoration: none;
		 	color: black;
		 }

		 /*贪吃蛇*/
		 #can{
		 	position: fixed;
		 	left: 10px;
		 	top: 80px;
		 }




		 /*开学时增加的部分*/
		 /*导航栏key*/
		 header .key_d{
		 	float: right;
		 	font-style: italic;
		 	font-size: 17px;
		 	width: 80px;
		 	height: 50px;
		 	line-height: 45px;		 	
		 	font-weight: bold;
		 	text-decoration: underline;
		 }
		 header div .key{
		 	cursor: pointer;		 	
		 }
		 header div .key:hover{
		 	color: #fff;
		 }
		 /*点击Key后弹出的框*/
		 #key_box{
		 	width: 300px;
		 	height: 100px;
		 	display: none;
		 	z-index: 10000;
		 	margin: 200px 500px;
		 	position: fixed;
		 	background: #ccc;
		 	background: white;
		 	border: 10px solid #ccc;		 	
		 }	
		 #key_box span{
		 	float: right;
		 	font-size: 15px;		
		 	cursor: pointer; 	
		 }	
		 /*弹出框里的提交按钮*/ 		 
		 #key_box form .sub{
		 	text-align: center;
		 	width: 120px;
		 	margin-top: 10px;
		 	height: 25px;
		 	margin-left: 90px;
		 }
	</style>	
</head>
<body>

	<!--点击key后弹出框-->
	<div id="key_box">
		<span onclick="off()">X </span> 
		<br>
		<form>
			<table>						
				<tr>
					<td width="110px" align="right">活动key值:</td>
					<td width="150px"><input type="text" placeholder="输入key" autofocus size="25"></td>
				</tr>
				<tr>
					<td colspan="2"><button class="sub" formaction="activity.html" formtarget="_blank">提交</button></td>
				</tr>
			</table>	
		</form>
		
	</div>


	<!--头部导航栏-->
	<header>
		<img src="img/scu_logo.jpg">
		<div class="logotitle"><span>四川大学>></span></div>
		<ul>
			<li class="mainpage">首页</li>
			<li>创建活动</li>
			<li>参与活动</li>
		</ul>
		<div class="key_d"><span title="点击输入活动key值" class="key" id="key1">key</span></div>
	</header>
	<!--弹出框代码-->
	<script type="text/javascript">
		//弹出登录框
		var keybox = document.getElementById('key_box');
		var key = document.getElementById('key1');
		key.onclick = function(){
			keybox.style.display = 'block';
		}
		//关闭登录框
		function off(){
			keybox.style.display = 'none';
		}


		//这部分是网上找的拖拽代码
		var params = {
	left: 0,
	top: 0,
	currentX: 0,
	currentY: 0,
	flag: false
};
		var getCss = function(o,key){
	return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key]; 	
};
		var startDrag = function(bar, target, callback){
	if(getCss(target, "left") !== "auto"){
		params.left = getCss(target, "left");
	}
	if(getCss(target, "top") !== "auto"){
		params.top = getCss(target, "top");
	}
	//o是移动对象
	bar.onmousedown = function(event){
		params.flag = true;
		if(!event){
			event = window.event;
			//防止IE文字选中
			bar.onselectstart = function(){
				return false;
			}  
		}
		var e = event;
		params.currentX = e.clientX;
		params.currentY = e.clientY;
	};
	document.onmouseup = function(){
		params.flag = false;	
		if(getCss(target, "left") !== "auto"){
			params.left = getCss(target, "left");
		}
		if(getCss(target, "top") !== "auto"){
			params.top = getCss(target, "top");
		}
	};
	document.onmousemove = function(event){
		var e = event ? event: window.event;
		if(params.flag){
			var nowX = e.clientX, nowY = e.clientY;
			var disX = nowX - params.currentX, disY = nowY - params.currentY;
			target.style.left = parseInt(params.left) + disX + "px";
			target.style.top = parseInt(params.top) + disY + "px";

			if (typeof callback == "function") {
				callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
			}
			
			if (event.preventDefault) {
				event.preventDefault();
			}
			return false;
		}
		
		
	}	
};
startDrag(keybox,keybox);


	</script>
	<!--主体-->
	<div class="body-one">
		<div class="body-one-left">
			<p>推荐策划方案<span>RECOMMENDATION</span></p>
			<ul>
				<li><a href="http://www.baidu.com">寒暑假志愿活动策划怎么写?</a></li>
				<li><a href="#">社团大型聚餐活动策划方案</a></li>
				<li><a href="#">社团联欢晚会怎么策划?</a></li>
				<li><a href="#">同学聚会的活动推荐单</a></li>
				<li><a href="#">科技比赛活动策划</a></li>
			</ul>
		</div>
		<!--轮播图-->
		<div class="body-one-right" id="imgbox">
			<div class="image image1">
				<a href="#"><img src="img/one.jpg" width="600px" height="250px"></a>
			</div>
			<div class="image image2">
				<a href="#"><img src="img/two.jpg" width="600px" height="250px"></a>
			</div>
			<div class="image image3">
				<a href="#"><img src="img/three.jpg" width="600px" height="250px"></a>
			</div>
			<!--轮播图手动切换图标-->
			<div class="icon-box">
				<span class="show">1</span>
				<span>2</span>
				<span>3</span>
			</div>
		</div>
	</div>
	<!--主体第二部分-->
	<div class="body-two">
		<div class="body-two-left">
			<p class="jbt">   过往案例</p>
			<div class="tu">
				<img src="img/1.jpg" width="420px"/>
			</div>
			<ul>
				<li><a href="#">飞扬俱乐部大型农家乐</a></li>
				<li><a href="#">电子信息院学生会筹办新生典礼</a></li>
				<li><a href="#">计算机学院16级7班班聚</a></li>
				<li><a href="#">川大野外生存活动</a></li>
				<li><a href="#">软件学院老师年终聚会</a></li>
				<li><a href="#">大型电脑维修服务</a></li>
			</ul>					
		</div>
			<!--右边-->
		<div class="body-two-right">
			<p class="jbt">   站外拓展</p>
			<div class="tu">
				<img src="img/2.jpg" width="426px" height="279px" />
			</div>
			<ul>
				<li><a href="#">川大艺术学院参演2018春晚</a></li>
				<li><a href="#">川大第四届卓越教师获奖名单</a></li>
				<li><a href="#">教务处关于转专业学生2018春选课通知</a></li>
				<li><a href="#">2016级双学位录取结果查看</a></li>
				<li><a href="#">2018大学生创新创业项目申请</a></li>
				<li><a href="#">川大学生会介绍</a></li>
			</ul>		
		</div>
	</div>
	<!--尾部-->
	<footer>
		<!--友情链接-->
		<div class="linkbox">
			<div class="link link1" style="padding-left: 500px">友情链接:   </div>
			<div class="link link2"><a href="http://www1.scu.edu.cn/" target="_blank">>川大官网</a></div>
			<div class="link"><a href="http://jwc.scu.edu.cn/" target="_blank">>川大教务处</a></div>
		</div>
		<!--版权信息-->
		<div class="copy">
			<span>&copy;Copyright by 四川大学计算机学院 2018大创项目</span>
		</div>
	</footer>
	<!--悬浮部分-->
	<div class="hover">
		<ul>
			<li class="ul-li">联系我们</li>
			<li class="ul-li">意见反馈</li>
			<li id="returnTop">返回顶部</li>
		</ul>
	</div>
	<script type="text/javascript">
		var timer = null;
		returnTop.onclick = function(){
			cancelAnimationFrame(timer);
			timer = requestAnimationFrame(function fn(){
			var oTop = document.body.scrollTop || document.documentElement.scrollTop;
			if(oTop > 0){
			document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
			timer = requestAnimationFrame(fn);
			}else{
			cancelAnimationFrame(timer);
			} 
			});
		}
		window.onscroll = function () {
           var top = document.documentElement.scrollTop || document.body.scrollTop;
           var back_btn = document.getElementById('returnTop');
			if(top>0){
			 back_btn.style.display = 'block';
			}else{
			 back_btn.style.display = 'none';
			}
		}
		//自动播放轮播图
		var index = 1;		//图片数组下标
			timer = null;  //定时器
		var imgBox = document.getElementById("imgbox");  //轮播图最外层div
		var img = imgBox.getElementsByTagName("img");    //轮播图数组
			imgIcon = imgBox.getElementsByTagName('span');
		function changeImg(){  //改变图片
			for(var i = 0;i < 3;i++){
				img[i].style.display = 'none';
				imgIcon[i].className='';	
				console.log(imgIcon[i].className);			
			}
			img[index].style.display = "block";
			imgIcon[index].className = 'show';
			console.log(img[index].className);
			index++;
			if(index>=3)
					index = 0;				

		}
		//鼠标移开自动播放
		var timer1;
		imgBox.onmouseout = function(){		
			timer = setInterval("changeImg()",3000);
		}		
		//鼠标进入轮播图停止播放
		imgBox.onmouseover = function(){
			timer1 = clearInterval(timer);

		}
		//加载完网页自动播放轮播图
		imgBox.onmouseout();
		//手动切换轮播图		
			imgIcon[0].onclick = function()	{
				for(var j = 0;j < 3;j++){
				img[j].style.display = 'none';
				imgIcon[j].className='';			
				}
				this.className = 'show';
				img[0].style.display = 'block';
				index = 1;
				clearInterval(timer2);
			}
				imgIcon[1].onclick = function()	{
				for(var j = 0;j < 3;j++){
				img[j].style.display = 'none';
				imgIcon[j].className='';			
				}
				this.className = 'show';
				img[1].style.display = 'block';
				index = 2;
				clearInterval(timer2);
			}
				imgIcon[2].onclick = function()	{
				for(var j = 0;j < 3;j++){
				img[j].style.display = 'none';
				imgIcon[j].className='';			
				}
				this.className = 'show';
				img[2].style.display = 'block';
				index = 0;
				clearInterval(timer2);
			}
	</script>
</body>
</html>





最后那个页面:

<!DOCTYPE html>
<html>
<head>
	<title>活动</title>

	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		html,body{height: 100%;}
		/*左边页面*/
		.left{
			height: 100%;
			width: 20%;
			float: left;
			border: 2px solid black;
			overflow: hidden;
		}
		/*右边页面*/
		.right{
			width: 79%;
			height: 100%;
			float: left;
			border: 1px black solid;
		}
		/*临时写页面左边里面的内容*/
		.left-top{
			height: 10%;
			line-height: 60px;
			color: white;
			text-align: center;
			font-size: 21px;
			background: #444;
		}
		#lc{height: 90%;background: #666;}
		.left-center{			
			font-size: 15px;				
		}
		.left-center li{
			height: 45px;			
			width: 290px;
			font-size: 15px;		
			display: inline-block;
			vertical-align: center;
			line-height: 45px;			
			cursor: pointer;
			margin-top: 10px;
		}
		.left-center li span{
			font-size: 23px;
			color: #ddd;
			font-weight: bold;
			opacity: 0.8;			
		}
		#span1,#span2,#span3{
			display: none;
			position: relative;
			left: 70px;
		}
		.right{
			background: #ccc;
		}
		.content{
			margin: 90px 400px 30px 400px;
		}
		.profile{
			margin: 30px 300px 40px 300px;
		}
	</style>	

</head>
<body>
	<!--页面左边-->
	<div class="left">
		<div class="left-top">SCU活动筹划平台</div>
		<div id="lc">
			<ul class="left-center">				
				<li id="li1">   活动信息   <span id="span1">></span></li>
				<li id="li2">   活动管理   <span id="span2">></span></li>
				<li id="li3">   退出       <span id="span3">></span></li>
			</ul>
		</div>
	</div>
		<!--JS代码-->
	<script type="text/javascript">
		var li1 = document.getElementById("li1");
		var li2 = document.getElementById("li2");
		var li3 = document.getElementById("li3");
		var span1 = document.getElementById("span1");
		var span2 = document.getElementById("span2");
		var span3 = document.getElementById("span3");
		li1.onmouseover = function(){
			span1.style.display = "inline"
			li1.style.backgroundColor = "#888";
			li1.style.fontSize = '20px';
		}
		li1.onmouseout = function(){
			span1.style.display = 'none';
			li1.style.backgroundColor = "#666";
			li1.style.fontSize = '15px';
		}
		li2.onmouseover = function(){
			span2.style.display = "inline"
			li2.style.backgroundColor = "#888";
			li2.style.fontSize = '20px';
		}
		li2.onmouseout = function(){
			span2.style.display = 'none';
			li2.style.backgroundColor = "#666";
			li2.style.fontSize = '15px';
		}
		li3.onmouseover = function(){
			span3.style.display = "inline"
			li3.style.backgroundColor = "#888";
			li3.style.fontSize = '20px';
		}
		li3.onmouseout = function(){
			span3.style.display = 'none';
			li3.style.backgroundColor = "#666";
			li3.style.fontSize = '15px';
		}
	</script>
	<!--页面右边-->
	<div class="right">
		<section class="content">
			<span style="font-size: 27px; font-weight: bold;">活动名称 : ### </span><br><br>
			   发布人:###<br><br>
			   发布时间:2018-04-05<br><br>
			   目前参与人数:  <ins style="cursor:pointer;">32</ins>  人<br><br><br><br>			 
		</section>
		<section class="profile">
			活动简介:本次活动计划于2018年4月21日在艺术码头举行。需要至少30位干事准时参加,活动内容为帮助艺术学院机房检修电脑。
		</section>
	</div>
	<script type="text/javascript">
		//禁止鼠标滑动
		window.onmousewheel=function() {		
		return false;
	}
	</script>
</body>
</html>

            
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭