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

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

对sohu页面的分析

注释很重要

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

素材

https://img.gxlcms.com/https://www.gxlcms.com/logo.jpg

https://img.gxlcms.com/https://www.gxlcms.com/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文档整理_目录

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网