京東首頁效果圖：
當(dāng)面對(duì)1張?jiān)O(shè)計(jì)師給出的網(wǎng)頁效果時(shí)，我們切不可急忙著手去敲代碼實(shí)現(xiàn)相應(yīng)的效果。這樣做可能在后續(xù)工作中會(huì)讓我們因當(dāng)初的斟酌不周而事倍功半。所以為了避免這樣的情況出現(xiàn)，我覺得應(yīng)當(dāng)依照以下步驟去履行，可能效力會(huì)更高。
1、根據(jù)效果圖，先分析頁面的基本布局；
2、從上到下，由左至右，詳細(xì)分析；
3、分塊實(shí)現(xiàn)
此頁面分析以下：本京東首頁頁面由上到下共分為7個(gè)部份；分別是：頁面頂部、Logo&搜索框、主導(dǎo)航、banner廣告部份、頁面主體、配送方式、備案號(hào)。（注：各部份已在上圖用序號(hào)詳細(xì)標(biāo)出）
基本結(jié)構(gòu)：
jd_index.html
<!doctype html> <html> <head> <title>Insert your title</title> <meta charset="utf⑻"> <link rel="stylesheet" href="jd_index.css"> </head> <body> <!-- 1、網(wǎng)頁頭部 --> <header id="top">頁面頂部</header> <!-- 2、LOGO 和 搜索框 --> <div id="top_main">LOGO 和 搜索框</div> <!-- 3、主導(dǎo)航--> <nav id="nav">主導(dǎo)航</nav> <!-- 4、banner廣告部份--> <div id="banner">banner廣告部份</div> <!-- 5、頁面主體--> <section id="main">頁面主體</section> <!-- 6、頁面底部-配送方式 --> <footer id="foot_box">配送方式</footer> <!-- 7、頁面底部-備案號(hào) --> <footer id="footer">備案號(hào)</footer> </body> </html>
/*測(cè)試屬性*/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
border:1px solid black;
}
/*通用*/
body{
font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
color:#666;
margin:0;
}
ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
img{vertical-align:bottom;}
a{
color:#666;
text-decoration:none;
}
a:hover{
color:#FF0700;
text-decoration:underline;
}
.lf{float:left;}
.rt{float:right;}
.clear{clear:both;}
/**布局元素樣式**/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
width:1211px;
margin:0 auto;
}
下一篇 算法分析：快速排序
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
