Web前台学习总结

　　前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论html，css，js这些基本的技术，相信大家如果掌握了这些最基本的技术，其他的技术也就会使用了。

下面是一个案例的形式来讲解上述的技术。

　　首先我们在开发界面的时候，都需要先把网页的框架搭建起来，网页的框架一般都会分为三部分，头部，中间部分，底部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>网站</title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<div id="header">顶部</div>
		<div id="main">
			<div id="main1">
				<div style="height: 600px;"></div>
			</div>
		</div>
		<div id="footer">底部</div>
	</body>
</html>

框架搭建好之后就是写我们的样式：样式的编写的时候，首先把不需要的样式去掉，在这里我自恋的把它命名为网页的初始化样式嘿嘿。

body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea{
	margin: 0px;
	padding: 0px;
	font-size: 13px;
}

ul{
	list-style: none;
}

img,a img{
	border: 0px;
	text-decoration: none;
}

a{
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

页面样式的初始化完成之后，就是写我们自己在html中定义的div的样式，这些样式是我们根据需求来完成。

#header{
	height: 452px;
	background: url(../img/top_bg.jpg) repeat-x;
}

#main{
	background: url(../img/main_top_bg.jpg) repeat-x;
}
#main1{
	background:url(../img/main1_bottom_bg.jpg) 0px bottom repeat-x;
}

#footer{
	height: 100px;
	background: url(../img/footer_bg.jpg) repeat-x;
}