※網頁製作，html、css樣式是各種前端的基礎，細節決定各種效果的特色。首先，需要觀察，然後是一些積累總結。以下是設計效果圖。
body,html, body, div, p, ul, li, h1, h2,h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td{margin: 0px;padding: 0px;}
繪製一個大的div（包含所有元素，定寬和定高）居中（margin：0 auto），同時給整個body一個背景 body{ background: url("../image/bj.gif");}
※2 logo製作
div#shouye>div#logo>div#logo_left>img
#logostyle=”position:relative”劃定頭部的區域寬高大小定位相對
仔細劃定小塊區域（圖片，文字），小塊中圖片和文字用div包裹，小div中定於位置信息（absolute，float，right，top），圖片和文字信息中說明（字體大小，顏色，加粗，文字樣式，圖片樣式等等），畫一個差不多，以後可以細調。
※3 菜單製作
3.1 div#nav>ul>li*10>a
在nav的div上面加背景和行高，li屬性上加display和背景（圖片分割圖）center right（定位）以及裏寬度大小等，在a標籤上加入字體樣式。
3.2 加入二級菜單
div#nav1>ul>li*3>a
給二級菜單設置一個相對定位，把對應的位置找到，寫下寬度，分別設定li和a的屬性。
做好位置和樣式。
※ 4 banner廣告製作
div#bannerbox>div#ban>img div#shuzi>span*4
同樣的，在最大bannerbox使用相對定位，在數字div中使用絕對定位，對每個span的寬度和高度設定，效果如下：
5 中部模塊
5.1左部製作
像是人化妝一樣，先給整個中間部分打一個底子，添加一個背景，然後在左邊添加製作標題
div#tzhongjian>div#topleft>div#toptitle>div.jia,在toptitle中加入img（包裹jia）和span標籤，
先給toptitle 上設置行高和浮動#topleft .toptitle{line-height: 55px;float: left}，然後分別對span標籤和.jia圖片設置，效果如下。
新聞div佈局與製作
div#toplist>div#renliang>img
div#liebiao>ul>li*4>a
做的過程中出現了小問題，需要把toplist的position的定位設爲絕對，然後在定位圖片。
在列表的li中加一個小三角的背景圖，直接在li的background上設置就行。如果需要讓三角左移，只需要在ul中設置一個margin-left就行。
5.2 中部製作
中部製作的時候首先將公司動態的div進行絕對定位，通過left和top對位置進行設定。然後在圖片div中寫入圖片，設置一個margin。最後給文字span外面加一個divbaoguo，設置line-height和text-align: center後製作完成。
5.3 右部製作
同理，完成右部製作
以下爲JavaScript特效
1 banner廣告條切換效果
設計思路：1 div+css佈局圖片，只顯示一張圖片（定義圖片數組，定義定時器函數）
2 根據要演示的圖片數目，定義圖片按鈕。
把動作綁定到span的圖片按鈕上
<spanonmouseover="Showbannerbynum(1)" onmouseout="btnMouseOut()">1</span>
2 無縫滾動效果實現
設計思路：1 Marquee滾動標籤，offsetWidth 是對象的可見寬度，
scrollWidth是對象的實際內容的寬，不包邊線寬度
2 利用scrollLeft不斷累加的方式實現
demo1中記錄的是圖片信息（很多image），將demo1中的html內容複製給demo2。
設置滾動函數，首先，demo的scrollLeft對象的向左滾動條距離增加。當滾動長度等於demo2的實際寬度時scrollWidth，將demo scrollLeft值減小，變成
demo.scrollLeft = demo.scrollLeft-demo2.offsetWidth。
佈局關鍵：保證demo1 和demo2 在同一行上
如何合理的佈局是關鍵
div#demo>table>tbody>tr>td#demo1+ td#demo1
在td#demo1中合理對圖片進行佈局
td#demo1>table>tbody>tr>td>table>tr>td>a>img*5
CSS樣式設置爲最後成敗的關鍵
#demo{ float:left;width:600px; overflow:hidden;border:1px dashed #ccc;}
3 在線諮詢功能實現
我們在瀏覽頁面的時候經常跳出這個在線諮詢對話框，很煩人，是不是，但是如果項目要求我們做出來，我們還是要把這個效果做出來的。
以下是騰訊暴漏給我們的一個接口，我們只需要把這個接口放到a標籤中，將href屬性設置下即可。
<a href = http://wpa.qq.com/msgrd?v=3&uin=123456789&site=www.chengdoujiajun.com&menu=yes>
屬性介紹：document.body.scrollTop
//這個就是網頁主體部分（body）的滾動條（非標準）360瀏覽器
Document.documentElement.scrollTop
//文檔元素對象（documentElement）的滾動條（標準）
設計原理：
我們可以寫一個事件函數來設置圖片的高度隨着滾動條的拉下而位置保持不變。
然後在通過window.onsrcoll來觸發事件。
//實現在線諮詢功能
function changeSit() {
var zixun = document.getElementById('zixun');
zixun.style.top= document.documentElement.scrollTop+document.body.scrollTop+200+'px'
}
//觸發window的滾動條事件
window.onscroll = changeSit;
4 設爲首頁和加入收藏功能實現
Functionshoucang(stitle,surl){
//傳入兩個參數，一個是收藏的title，一個是收藏的url
try{ window.external.addFavorite(stitle,surl)}
catch(e){
try{window.sidebar.addPanel((stitle,surl,””)}
catch(e){ alert("加入收藏失敗，請使用Ctrl+D進行添加")}}}
function sethome(obj,vrl){
//傳入兩個參數，一個是要設爲首頁的 ，一個是設爲首頁的url
try{obj.style.behavior = ‘url(#default#homepage)’;//先設置行爲爲默認
obj.setHomePage(vrl);//設置首頁面
}catch{
alert("此操作被瀏覽器拒絕！\n請在瀏覽器地址欄輸入“about:config”並回車\n然後將 [signed.applets.codebase_principal_support]的值設置爲'true',雙擊即可。");
}
var prefs =Components.classes['@mozilla.org/preferences
-service;1'].getService(Components.interfaces.nsIPrefBranch);
prefs.setCharPref('browser.startup.homepage',vrl);
}else{
alert("您的瀏覽器不支持，請按照下面步驟操作：1.打開瀏覽器設置。2.點擊設置網頁。3.輸入："+vrl+"點擊確定。"); }}
最後，在網頁上綁定這兩個動作
<li class="fore1"><a href="javascript:void(0)"onclick="sethome(this,window.location)">設爲首頁</a></li>
<li class="ge">|</li>
<li class="fore2"><ahref="javascript:void(0)"onclick="shoucang(document.title,window.location)">加入收藏</a></li>