韓順平_php從入門到精通_視頻教程_第20講_仿sohu首頁面布局_可愛屋首頁面_學習筆記_原始碼圖解_PPT文檔整理

韓順平_php從入門到精通_視頻教程_第20講_仿sohu首頁面配置_可愛屋首頁面_學習筆記_原始碼圖解_PPT文檔整理
對sohu頁面的分析

注釋很重要

經驗：寫一點，測試一點，這是一個很好的方法。別寫完了過後，再來測試，這樣不好，錯都不知道錯在哪裡了。

素材

logo.jpg

right.jpg

sohu.html

搜狐首頁登入表單設定首頁面超連結招生廣告運動廣告房地產廣告

sohu.css

body{margin: 0 auto;/*給一個背景或邊框方便調試*/border: 1px solid green;width: 950px;/*高度以後再去掉*/height: 800px;font-size: 12px;}.top{width: 950px;background: silver;height: 24px;}.login{width: 350px;height: 22px;background: pink;/*浮動自動把行向塊元素轉化，並帶上width和height屬性*/float: left;}.setindex{width: 85px;height: 20px;background: green;float: left;margin-left: 50px;}.myhref{float: right;margin-right: 5px;margin-top: 3px;}/*我的logo*/.logo{width: 138px;height: 56px;background: blue;float: left;margin-top: 3px;}.logo img{width: 138px;height: 56px;}/*導航*/.navi{width: 800px;height: 56px;background: green;float: left;margin-top: 3px;margin-left: 10px;}/*總體廣告div*/.adAll{width: 950px;height: 211px;border: 1px solid red;background: silver;margin-top: 3px;float: left}/*招生廣告*/.adstu{width: 126px;height: 195px;background: green;float: left;margin: 5px 0 0 5px;}.adSport{width: 451px;height: 195px;background: green;float: left;margin: 5px 0 0 15px;}/*房地產廣告*/.adfdc{width: 151px;height: 195px;background: green;float: left;margin: 5px 0 0 15px;}/*圖片廣告*/.adimg{width: 180px;height: 211px;background: pink;float: right;/*左右局中*/text-align: center;border-left: 1px solid red;}.adimg img{/*垂直局中不好做*/margin-top: 12px;}

最後把背景色去掉，IETester多瀏覽器測試

對仿sohu網站首頁布局，當你掌握後，就具備編寫較為複雜的頁面的基本功了。

可愛屋分析
沒有素材，僅僅聽講解。



flash引入的程式碼片段

背景圖 css檔案
background: url('nav_bg_right.gif');

滑鼠放在 導覽列上換色的障眼法，用的上下分色的圖片，然後在css中
當滑鼠移動到span的位置時，背景座標和常見的座標不一樣。
#navi a:hover span{
background-position: 100% -50px;
}



*{
font-size: 12px;
margin: 0;
padding: 0;
border: 0;

}

韓順平_php從入門到精通_視頻教程_學習筆記_原始碼圖解_PPT文檔整理_目錄

