文西馬龍:http://blog.csdn.net/wenximalong/
對sohu頁面的分析
註釋很重要
素材
logo.jpg
right.jpg
sohu.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="sohu.css" />
<title>搜狐首頁</title>
</head>
<body>
<!--Top部分-->
<div class="top">
<span class="login">登錄表單</span>
<span class="setindex">設置首頁面</span>
<span class="myhref">超鏈接</span>
</div>
<!--logo部分-->
<div class="logo">
<img src="logo.jpg" />
</div>
<!--導航條-->
<div class="navi">
</div>
<!--廣告-->
<div class="adAll">
<div class="adstu">
招生廣告
</div>
<div class="adSport">
運動廣告
</div>
<div class="adfdc">
房地產廣告
</div>
<div class="adimg">
<img src="right.jpg" />
</div>
</div>
</body>
</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引入的代碼片段
<div id="logo">
<object data="media/logo.swf" type="application/x-shockwave-flash" width="766" height="148">
<param name="movie" value="media/logo.swf" />
<param name="SCALE" value="exactfit" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
</div>
背景圖 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文檔整理_目錄