第三次作业代码
2017-01-21 本文已影响0人
一只大粑粑
三个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>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img>
<a href="#" target="_blank"></a></img>
<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>
