第015讲仿sohu首页面布局-优快云博客

本文链接：https://blog.youkuaiyun.com/enlyhua/article/details/46762827

这里写图片描述

<html>
<head>
<link rel="stylesheet" type="text/css" href="aa.css">
</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="22.png"/></div>
<!--daohang-->
<div class="navi"></div>
<!--guanggao-->
<div class="adall">
<div class="adstu">招生广告</div>
<div class="adsport">运动广告</div>
<div class="adfdc">房地产广告</div>
<div class="adimg"><img src="222.png"/></div>

</div>
</body>
</html>

body{
    margin:0  auto;
    border:1px solid green;
    width:950px;
    height:800px;

}

.top{
    width:950px;
    background:silver;
    height:24px;
}

.login{
    width:350px;
    height:22px;
    background:pink;
    float:left;
}

.setindex{
    width:85px;
    height:20px;
    background:green;
    float:left;
    margin-left:50px;
}

.myhref{
    float:right;
    margin-right:5px;
}

.logo{
    width:118px;
    height:56px;
    background:silver;
    float:left;
    margin-top:3px;
}

.logo img{
    width:118px;
    height:56px;
}

.navi{
    width:820px;
    height:56px;
    background:green;
    float:left;
    margin-top:3px;
    margin-left:10px;
}

.adall{
    width:950px;
    height:211px;
    margin-top:3px;
    float:left;
    border:1px solid silver;

}

.adstu{
    width:126px;
    height:195px;
    background:#7bf773;
    margin:5px 0 0 5px;
    float:left;
}

.adsport{
    width:451px;
    height:195px;
    background:#7bf773;
    margin:5px 0 0 5px;
    float:left;
}

.adfdc{
    width:151px;
    height:195px;
    background:#7bf773;
    margin:5px 0 0 5px;
    float:left;
}

.adimg{
    width:181px;
    height:200px;

    margin:5px 0 0 5px;
    float:right;
    text-align:center;
    border-left:1px solid silver;
}

.adimg img{
    margin-top:10px;
}