首先手机网站基本使用HTML5元素来布局，分为头部、内容和底部
头部区域——<header>
内容区域——<section>
底部区域——<footer>
在此，我已经写了一个大致布局
<!DOCTYPE html> <html> <head> <title>手机网开发</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <link rel="stylesheet" type="text/css" href="./public.css"> </head> <body> <header> <div class="top_head"> 这是头部部分 </div> <nav> <a class="active" href="">菜单1</a> <a href="">菜单2</a> <a href="">菜单3</a> <a href="">菜单4</a> <a href="">菜单5</a> </nav> </header> <section class="s1"> <div class="inner"> <article> 区域块1 </article> </div> </section> <section class="s2"> <div class="inner"> <article> 区域块2 </article> </div> </section> <footer> <div class="copyright">手机网站底部版权</div> </footer> </body> </html>
加载了公共样式public.css
@charset "utf-8"; /* 公共样式 */ *{ padding:0; margin:0;} body { /*min-320px;*/background:#fff; font:normal 18px/1.5 helvetica, verdana, san-serif;color:#333; } h1, h2, h3, h4, h5, h6, b, i, em { font-size:1em; font-weight:normal; font-style:normal; } ul, ol, li { list-style:none; } img { vertical-align:middle;border:none; } a { text-decoration:none; color:#333; } /*头部*/ header .top_head { width:100%; height:40px; line-height:40px; background:#373737;color:#fff;text-align:center;} header nav { width:100%; overflow:hidden;} header nav a { float:left; width:20%;font-size:18px; text-align:center; line-height:35px; background:#f4f4f4;} header nav a.active{background:#ddd} section.s1{height:100px;background:#eee;width:100%;} section.s2{height:100px;background:#ddd;width:100%;} /*底部*/ footer{padding-top:2px;} footer .copyright { text-align:center; color:#999; font-size:18px; margin:5px 0 20px;}
那么运行一下，看它的效果如何？会根据屏幕的大小而自适应的。
