第三次作业代码

三个div并排显示：方法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好久不见</title>
<style>
div{
    width:100px;
    height:100px;
    display:inline;
    background:blue;
    border:1px solid blue;
        }
</style>
</head>

<body>
<div>56</div>
<div>12</div>
<div>34</div>
</body>
</html>

方法二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好久不见</title>
<style>
div{
    width:100px;
    height:100px;
    display:inline-block;
    background:blue;
    border:1px solid blue;
        }
</style>
</head>

<body>
<div>56</div>
<div>12</div>
<div>34</div>
</body>
</html>

方法三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>好久不见</title>
<style>
div{
    width:100px;
    height:100px;
    float:left;
    background:blue;
    border:1px solid blue;
    margin:20px;
        }
</style>
</head>

<body>
<div>56</div>
<div>12</div>
<div>34</div>
</body>
</html>

腾讯大学图片代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新年快乐</title>
<style>
body{
    margin:0;
    padding:0;  
    }
.box{
    width:266px;
    height:1165px;
    }
        .head{
            background:url(shiyi.png) no-repeat 20px 0px;
        font:bold 20px Verdana, Geneva, sans-serif; 
        padding-left:50px;  
        display:inline-block;
        }/*标题排行榜的样式
        与及top  top在此处我用背景图片插入*/
        .title-yi{
            border-top:solid #cccccc 1px;
            border-left:solid #cccccc 1px;
            border-right:solid #cccccc 1px;
            font:bold 15px Verdana, Geneva, sans-serif;
            padding:10px 26px 10px 26px;
            float:left;
            margin-left:20px;
            }/*标题最热排行的样式*/
            .title-er{
            border-bottom:solid #cccccc 1px;
            border-left:solid #cccccc 1px;
            opacity:0.5;
            font:bold 15px Verdana, Geneva, sans-serif;
            float:left;
            padding:10px 26px 10px 26px;
            }/*标题新课上线的样式*/
            img{
                padding-top:20px;
                padding-left:20px;
                }/*几张图片所处的位置*/
            dl{
                font: 12px/30px Verdana, Geneva, sans-serif;
            }
            a{
                color:black;
                text-decoration:none;}
                .lianjie-yi{
                    font:12px/30px Verdana, Geneva, sans-serif;
                    background:url(liu.png) no-repeat 20px 3px;
                    padding-left:50px;
                }
                .lianjie-er{
                background:url(qi.png) no-repeat 20px 3px;
                padding-left:50px;
                }
                .lianjie-san{
                background:url(ba.png) no-repeat 20px 3px;
                padding-left:50px;
                }
                .lianjie-si{
                    background:url(jiu.png) no-repeat 20px 3px;
                    padding-left:50px;
                    }
                .lianjie-wu{
                background:url(shi.png) no-repeat 20px 3px;
                padding-left:50px;
                }/*五个图标我以背景图片的形式插入
                以上五个为五句话之前的图标的具体样式*/
</style>
</head>

<body>
<div class="box">
    <h2 class="head">排行榜</h2></br>
    <span class="title-yi"><a href="#">最热排行</a></span>
    <span class="title-er"><a href="#">新课上线</a></span>
    ![](yi.png)<a href="#" target="_blank"></a></img>
    ![](er.png)<a href="#" target="_blank"></a></img>
    ![](san.png)<a href="#" target="_blank"></a></img>
    ![](si.png)<a href="#" target="_blank"></a></img>
    ![](wu.png)<a href="#" target="_blank"></a></img><!--五张图片的插入形式-->
    <dl>
    <dt><div class="lianjie-yi"><a href="#" target="_blank">张小龙：小程序正式发布，开....</a></div></dt>
    <dt><div class="lianjie-er"><a href="#" target="_blank">马化腾：通向互联网的七....</a></div></dt>
    <dt><div class="lianjie-san"><a href="#" target="_blank">马化腾：腾讯现在只做两件事</a></div></dt>
    <dt><div class="lianjie-si" ><a href="#" target="_blank">使用UE4制作VR内容的优化</a></div></dt>
    <dt><div class="lianjie-wu"><a href="#">何凌南：谣言在想什么</a></div></dt>
    </dl><!--图片下方的几个链接-->
    
</div>
</body>
</html>

百度云

第三次作业代码

推荐阅读更多精彩内容