一、研究模板结构

1、研究本模板结构，修改网站css内容，进行重新调色。

 

2、了解html代码结构

 

 二、制作网站

1、div+css整体布局

 html代码

 

<div class="zhong">
<div class="top">logo</div>
<div class="banner">banner</div>
<div class="menu">menu</div>
<div class="main">main</div>
<div class="huoban">huoban</div>
<div class="bottom">bottom</div>
</div>
css样式

2、局部详细设计--left

.zhong { width:1000px; margin:0 auto;}
.top{ height:73px;background:url(../p_w_picpaths/bg_1.gif) repeat-x;padding:0 24px;}
.menu{background:url(../p_w_picpaths/bg_2.gif) repeat-x; height:52px;padding-left:80px;}
.main{background:url(../p_w_picpaths/bg_7.gif) repeat-x; min-height:573px;_height:573px;
padding:22px 37px 0 25px;}
.left{ width:184px; float:left; overflow:hidden;}
.right{ float:right; width:692px;}
.huoban{ margin:20px 0 15px 0;}
.bottom{ background:url(../p_w_picpaths/bg_8.gif) repeat-x; height:189px; text-align:center;
padding-top:15px;}

 

html代码

<div class="left">
    <div class="box_1">
      <div class="left_title">会员中心</div>
      <div class="left_nr">此处显示  class "left_nr" 的内容</div>
    </div>
    <div class="box_1">
      <div class="left_title">会员中心</div>
      <div class="left_nr">此处显示  class "left_nr" 的内容</div>
    </div>
    <div class="box_1">
      <div class="left_title">会员中心</div>
      <div class="left_nr">此处显示  class "left_nr" 的内容</div>
    </div>
    </div>

CSS样式

left{ width:184px; float:left; overflow:hidden;}
.left_title{
 color:#9FF;
 background:url(../p_w_picpaths/bg_3.gif) repeat-x;
 height:22px;
 line-height:22px;
 border:solid 1px #206292;
 padding-left:9px;
 margin-bottom:8px;
}
.box_1{ margin-bottom:28px;}
.left_nr li{background:url(../p_w_picpaths/dian.gif) no-repeat 13px 6px; padding-left:25px; height:20px; line-height:20px;}

 

3、局部详细设计--right

html代码<div class="right">
    <div class="right_top_img"><img src="p_w_picpaths/img_3.gif" /></div>
      <img src="p_w_picpaths/img_8.gif" style="float:left"/>
    <div class="news">
      <div class="news_title"><img src="p_w_picpaths/title_1.gif" width="75" height="21" /><a href="#"><img src="p_w_picpaths/more.gif" width="38" height="10" /></a></div>
      <table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

....
</table>

   </div>
  </div> 

css样式

.right{ float:right; width:692px;}
.right_top_img{ text-align:right; padding-bottom:35px;}

.news{float:right; width:665px;}
.news_title{border-bottom: dashed 1px #84888a; width:666px; height:30px; margin-bottom:12px;}
.news_title span{ float:left;}
.news_title a{float:right; margin-top:10px;}
.news table a{background:url(../p_w_picpaths/dian_2.gif) no-repeat 0 6px; padding-left:10px;}

4、局部详细设计--huoban

html代码

<div class="huoban">
      <div class="huoban_title"><img src="p_w_picpaths/title_2.gif" /></div>
      <div class="huoban_nr">
        <ul>
          <li><img src="p_w_picpaths/huoban_logo.gif" /></li>
          <li><img src="p_w_picpaths/huoban_logo.gif" /></li>
          <li><img src="p_w_picpaths/huoban_logo.gif" /></li>
          <li><img src="p_w_picpaths/huoban_logo.gif" /></li>
          <li><img src="p_w_picpaths/huoban_logo.gif" /></li>
        </ul>
        <div class="clear"></div>
      </div>
    </div>

css样式

.huoban{ margin:20px 0 15px 0;}
.huoban_title{background:url(../p_w_picpaths/img_9.gif) no-repeat 6px 0; padding-left:35px; height:30px;}
.huoban_nr{ background:#fff; padding:11px 0; border-top:solid 1px #c6d0da;border-bottom:solid 1px #c6d0da;}
.huoban_nr li{ float:left; margin-left:24px; display:inline;}