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