CSS学习备忘（一）

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #world{
            width: 1423px;
            height: 950px;
        }
        .head{
            width: 1423px;
            height: 541px;
           background-image: url("../liujin0821-1-4/101.jpg");
        }
        .inner{
            float:right;
            height: 133px;
            width: 286px;
            margin: 24px 572px 0;
        }
        .inner1{
            height: 243px;
            background-image: url("../liujin0821-1-4/body.jpg");
            overflow: hidden;
        }
        .tupian1{
            float: right;
            margin: 48px 218px 43px 14px;
            width: 238px;
            height: 154px;
        }
        .tupian2{
            float: right;
            margin: 48px 0 43px 14px;
            width: 238px;
            height: 154px;
        }
        .tupian3{
            float: right;
            margin: 48px 0 43px 14px;
            width: 238px;
            height: 154px;
        }
        .tupian4{
            float: right;
            margin: 48px 0 43px 14px;
            width: 238px;
            height: 154px;
        }
        .bottom{
            height: 168px;
            background-image: url("../liujin0821-1-4/dibubeijing.jpg");
        }
        .tubiao{
            width: 487px;
            height: 168px;
            overflow: hidden;
            margin-right: 28px;
            float: left;
        }
        .tubiao1{
             margin: 74px 0 48px 0;
             width: 113px;
             height: 46px;
            float: right;
         }
        .tubiao2{
            margin: 35px 0 48px 0;
            margin-right: 28px;
            width: 138px;
            height: 85px;
            float: right;
        }
        .txt{
            width: 625px;
            height: 168px;

            float:right;
            margin-right: 283px;
        }
        .txt-content{
            width: 625px;
            height: 60px;
            font-size: 12px;
            line-height:17px;
            text-align: justify;
            color:#522403;
            margin-top: 60px;
        }
        span{
            text-decoration: underline;
        }
        .txt-content img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="world">
    <div class="head">
        <img class="inner" src="../liujin0821-1-4/head1.png" alt=""/>
    </div>
    <div class="inner1">
        <img class="tupian1" src="../liujin0821-1-4/zhanwanganquanzhongxin.jpg" alt="战网安全中心"/>
        <img class="tupian2" src="../liujin0821-1-4/xiaolage.jpg" alt="小拉格"/>
        <img class="tupian3" src="../liujin0821-1-4/zhanghaozhuce.jpg" alt="帐号注册"/>
        <img class="tupian4" src="../liujin0821-1-4/kehuduanxiazai.jpg" alt="客户端下载"/>
    </div>
    <div class="bottom">
        <div class="tubiao">
            <img class="tubiao1" src="../liujin0821-1-4/wangyi.gif" alt="网易"/>
            <img class="tubiao2" src="../liujin0821-1-4/tubiao.png" alt="图标"/>
        </div>
        <div class="txt">
            <p class="txt-content">
                &copy;2012暴雪娱乐股份有限公司版权所有由上海网之易网络科技发展有限公司运营<span>著作权
            侵权</span>文网进字【2012】033号<span>沪网文【2011】0682-074</span><span>增值电信业务
            经营许可证编号：沪B2-20080012</span><span>法律文件</span>新出审字：【2012】712号
                <span>文化部网络游戏举报与联系邮箱：wlyxjb@gmail.com《互联网文化管理暂行规定》</span>
                <img src="../liujin0821-1-4/tupian2.gif" alt=""/>
                <img src="../liujin0821-1-4/tupian4.gif" alt=""/>
                <img src="../liujin0821-1-4/tupian3.gif" alt=""/>
                <img src="../liujin0821-1-4/tupian1.gif" alt=""/>
            </p>
        </div>
    </div>
</div>
</body>
</html>

 

      出现问题如下：

1、firefox浏览器调试结果截图： ；

2、IE浏览器调试结果截图：       ；

3、chrome浏览器调试结果截图：。

      初学者学习中遇到的问题，记录备忘留待解决。

 

posted on 2015-08-23 19:20  火蓝灬流苏  阅读(127)  评论(0)    收藏  举报