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;
}