韩顺平_php从入门到精通_视频教程_第20讲_仿sohu主页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理

韩顺平_php从入门到精通_视频教程_第20讲_仿sohu主页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理

韩顺平_php从入门到精通_视频教程_第20讲_仿sohu首页面布局_可爱屋首页面_学习笔记_源代码图解_PPT文档整理
对sohu页面的分析

注释很重要

经验：写一点，测试一点，这是一个很好的方法。别写完了过后，再来测试，这样不好，错都不知道错在哪里了。

素材

https://www.php1.cn/detail/logo.jpg

https://www.php1.cn/detail/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文档整理_目录