今天用html+css做一個最簡單的頁面。效果圖如下：
說明：這里的韓文用中文隨便代替。
1、拿到效果圖首先分析頁面布局
該圖是豎排結構，分5個大的DIV：
我做的頁面寬度是1024px的，在5個DIV外面加一個大框給一個名為all的class。設定寬為1024px，並居中。
一般頁面都是按順序做，這個看個人習慣。由於只是一個頁面，我的css就和HTML寫在一個頁面里面。
2、先寫第一個div，給他一個class名稱為top.
css樣式如下：
效果如下：
這樣第一個div就做好了。
3、下面做menu和logo
css如下：
效果圖：
4、做menu的子菜單
css如下：
一般二級菜單的可以用js做，我這邊沒用js，直接用的css,給一級菜單和二級菜單定位，用樣式（圖中矩形框中的css）控制二級菜單的隱藏顯示。這樣寫的缺點就是不兼容IE6。其他的主流瀏覽器像谷歌，火狐和IE高版本都可以兼容。
5、banner最好做了，直接放圖片或設置背景都可以。此處省略
6、分析主體內容，第4個DIV
該DIV中分上下兩層，第一層顯示新聞列表，關於我們和產品中心，第二層顯示logo+版權說明和一個下拉框
因為第一層的內容是並排顯示，所以這三個DIV設置像左浮動。
按從左向右的順序，先做新聞板塊
樣式：
7、圖中關於我們又分左右結構，直接讓圖片左浮，左右結構就出來了。這種寫法暫時還沒遇到什么問題。
產品中心應該是用js做的百葉窗效果，這里暫時只是樣式。效果會后續補上。在產品中心和底部logo之間加
底部的logo和其他div就會自動下去了。
下面附上代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html+css基本頁面</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px; color:#464646;}
a{ text-decoration:none;}
ul li{ list-style:none;}
.clear{clear: both;font-size: 1px;width: 1px;height: 0px;visibility: hidden;overflow: hidden;}
/*.clear樣式的作用是清除浮動*/
.all{ width:1024px; margin:0 auto;}
.top{ background:#404040; display:table; width:100%;}
.top ul{ float:right; margin-right:30px;}
.top ul li{ float: left; margin:0px 10px;}
.top ul li a{ display:block; color:#c2c2c2; line-height:30px; margin:10px 0px; width:75px; text-align:center;}
.top ul li a.a_hover{background:url(images/topa_bg.png) no-repeat;}
.top ul li a:hover{background:url(images/topa_bg.png) no-repeat;}
.header{ background:url(images/menu_bg.jpg) repeat-x;}
.logo img{ display:block; margin:0px auto; padding-top:20px;}
.menu{ display:table; margin:0 auto;}
.menu ul li{ float:left; position:relative;}
.menu ul li.li_line{ width:2px; background:url(images/li_linebg.png) no-repeat; height:44px;}
.menu ul li a{ display:block; line-height:44px; width:150px; text-align:center; color:#000; font-size:14px;}
.menu ul li a.menua_hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}
.menu ul li a:hover{ background:url(images/menua_hover.png) no-repeat; color:#fff;}
.menu ul li:hover ul{ display:table;}
.menu ul li ul{ position:absolute; width:350px; padding-left:30px; left:15px; background:#001126; display:none;}
.menu ul li ul li{ float:left;}
.menu ul li ul li a{ width:80px; line-height:24px; color:#fff; font-size:12px;}
.menu ul li ul li a:hover{ background:none; color:#246477;}
.main{ padding:20px; background:url(images/bottombg.jpg); height:183px;}
.news{ float:left; width:220px; margin:0px 20px;}
.news dl dd{ float:left; color:#464646; font-size:14px; font-weight:bold; line-height:24px;}
.news dl dt{ float:right; line-height:24px; background:url(images/newsdd_bg.jpg) no-repeat left center; padding-left:6px;}
.news ul li{ line-height:22px;}
.news ul li a{ background:url(images/newa_bg.jpg) no-repeat left center; padding-left:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:210px; display:block;}
.about{ width:305px; display:table; margin:0px 20px; float:left;}
.about img{ float:left; margin:20px;}
.about img.view{ margin:5px 0px 0px 0px;}
.about h3{ line-height:24px; margin-top:20px; color:#4380ab; font-size:16px; }
.about span{ line-height:20px; display:block;}
.pro{ width:320px; float:left; border:1px solid #d7d7d7; display:table;}
.pro ul{ float:left;}
.pro ul.pro_ulview{ width:254px;}
.pro ul.pro_ulview li{ float:left; background:none; width:157px; margin-right:10px;}
.pro ul.pro_ulview li a.more{ margin:10px 0px 0px 20px; display:block;}
.pro ul img.view{ margin-top:40px; }
.pro ul img{ float:none; display:block;}
.pro ul strong{ display:table; line-height:30px; margin-left:20px;}
.pro ul span.view{ width:140px; display:block; margin-left:20px;}
.pro ul li{ width:33px; height:112px; background:url(images/pro_libg.jpg);}
.footer_logo{ float:left; margin:20px;}
.footer_menu{ float:left; margin:5px 0px 0px 70px;}
.footer_menu ul li{ float:left; width:102px; line-height:30px; text-align:center;}
.footer_menu ul li.fli_line{ width:1px; background:url(images/fli_linebg.png) no-repeat; height:30px;}
.footer_menu ul.bq{ margin-left:38px;}
.footer_menu ul span{ line-height:22px; margin-right:10px; color:#7d7d7d;}
.select{ float:right; margin-top:20px;}
</style>
</head>
<body>
<div class="all">
<div class="top">
<ul>
<li><a href="#" class="a_hover">頭部示例1</a></li>
<li><a href="#">頭部示例2</a></li>
<li><a href="#">頭部示例3</a></li>
<li><a href="#">頭部示例4</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="logo" />
</div>
<div class="menu">
<ul>
<li class="li_line"></li>
<li>
<a href="#" class="menua_hover">菜單1</a>
<ul>
<li><a href="#">二級菜單1</a></li>
<li><a href="#">二級菜單2</a></li>
<li><a href="#">二級菜單3</a></li>
<li><a href="#">二級菜單4</a></li>
</ul>
</li>
<li class="li_line"></li>
<li><a href="#">菜單2</a>
<ul>
<li><a href="#">二級菜單1</a></li>
<li><a href="#">二級菜單2</a></li>
<li><a href="#">二級菜單3</a></li>
<li><a href="#">二級菜單4</a></li>
</ul>
</li>
<li class="li_line"></li>
<li><a href="#">菜單3</a></li>
<li class="li_line"></li>
<li><a href="#">菜單4</a></li>
<li class="li_line"></li>
<li><a href="#">菜單5</a></li>
<li class="li_line"></li>
<li><a href="#">菜單6</a></li>
<li class="li_line"></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div>
<img src="images/banner.jpg" alt="banner" />
</div>
<div class="clear"></div>
<div class="main">
<div class="news">
<dl>
<dd>NEWS</dd>
<dt>more</dt>
</dl>
<div class="clear"></div>
<ul>
<li><a href="#">新聞示例1新聞示例1新聞示例1新聞示例1</a></li>
<li><a href="#">新聞示例2新聞示例2新聞示例2新聞示例</a></li>
<li><a href="#">新聞示例3新聞示例3新聞示例3新聞示例</a></li>
<li><a href="#">新聞示例4新聞示例4新聞示例4新聞示例</a></li>
</ul>
</div>
<div class="about">
<img src="images/about.png" alt="about" />
<h3>ABOUT</h3>
<span>關於我們關於我們關於我們關於我們關於我們關於我們</span>
<a href="#"><img src="images/about_view.png" alt="view" class="view"/></a>
</div>
<div class="pro">
<ul class="pro_ulview">
<li>
<strong>產品<span>案例1</span></strong>
<span class="view">產品簡介產品簡介產品簡介產品簡介產品簡介產品簡介產品簡介產品簡介</span>
<a href="#" class="more"><img src="images/about_view.png" alt="view"/></a>
</li>
<img src="images/pro_img.png" alt="pro" class="view"/>
</ul>
<ul>
<li></li>
</ul>
<ul>
<li></li>
</ul>
</div>
<div class="clear"></div>
<div class="footer_logo"><img src="images/footer_logo.png" alt="footer_logo" /></div>
<div class="footer_menu">
<ul>
<li><a href="#">首頁</a></li>
<li class="fli_line"></li>
<li><a href="#">關於我們</a></li>
<li class="fli_line"></li>
<li><a href="#">產品中心</a></li>
</ul>
<div class="clear"></div>
<ul class="bq"><span>版權所有@某某網站</span><span>聯系電話:01234567890</span></ul>
</div>
<div class="select"><img src="images/select.jpg" alt="select" /></div>
</div>
</div>
</body>
</html>
至於圖片，用的到的就從效果圖上切下來就ok了。
第一次總結這樣的東西，不足之處還請見諒。希望可以和大家一起交流，一起進步。
頁面一般分特效頁面和普通頁面。
布局一般分為菜單+LOGO，主體內容和尾部的版權說明。
特效頁面的布局不確定，普通頁面的布局一般分上中下，中間部分又分上下結構或左右結構。先把大體框架搭起來，再一點點往里填，會好做一點。
最后給大家一個參考網站：http://www.w3school.com.cn/里面前端需要的東西基本上都有了。遇到問題也可以去里面找解決方法。個人極力推薦。