第015讲仿sohu首页面布局

来源：互联网发布：dnf最新版数据芯片搬砖编辑：程序博客网时间：2024/05/01 12:58

这里写图片描述

<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;}

0 0

第015讲 仿sohu首页面布局

第015讲仿sohu首页面布局