前台的技术有很多种，流行的框架也是枚不胜举，在这里我们只讨论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;
}