最近在有学习了下css+html，利用css+html写模仿写下了搜狐布局的一部分
首先创建一个html文件，命名为sohu.html
代码如下：
sohu.html登录部分设为首页超链接导航栏招生广告广告2房地产广告
在写css文件：
body{
width:950px;
/*高度定不下来不要写，自己适应 */
margin:0 auto;
/* background-color: pink; */
border:1px solid red;
font-size: 12px;
}
.top{
width:950px;
height:22px;
background-color: pink;
}
/*登入部分 */
.login{
width:416px;
height:22px;
background-color: green;
float:left;
}
/*设为首页 */
.indexpage{
width:105px;
height:20px;
background-color: gray;
float:left;
margin-left: 80px;
}
/* 超链接 */
.myhref{
width:250px;
height:20px;
float:right;
background-color: #b4b4b4;
}
/* logo */
.logo{
width:137px;
height:68px;
float:left;
background-color: yellow;
margin-top: 5px;
}
.logo img{
width:137px;
}
/*导航栏 */
.navi{
width:807px;
height:68px;
float:left;
background-color: #7CE574;
margin-top:5px;
margin-left: 5px;
}
/*广告部分 */
.ad{
width:950px;
height:212px;
background-color: pink;
margin-top: 5px;
float:left;
border:1px solid silver;
}
/*学生广告 */
.stuad{
width:126px;
height:196px;
background-color: #EC7E8C;
float:left;
margin:5px 0 0 5px;
}
/*广告2 */
.ad2{
width:453px;
height:196px;
margin:5px 0 0 15px;
background-color: #EC7E8C;
float:left;
}
/* 房地产广告 */
.housead{
height:196px;
width:150px;
background-color: #7CE574;
margin:5px 0 0 12px;
float:left;
}
/* 图片广告 */
.picad{
height:212px;
width:180px;
float:right;
background-color: #7CE574;
border-left: 1px solid silver;
text-align: center;
}
运行后界面为：
，转载请注明：/j903829182/article/details/38732321
