第七章浮动

最新推荐文章于 2022-06-28 14:45:02 发布

原创最新推荐文章于 2022-06-28 14:45:02 发布 · 543 阅读

CC 4.0 BY-SA版权

溢出处理:

<!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  type="text/css">
body{
font-size:12px;
line-height:22px;	
	
	}
#po{
	width:130px;
	height:150px;
	border:1px  #09F  solid;
	overflow:auto;
	}
</style>
</head>

<body>
<div  id="po"><img  src="../../photo-2.jpg"  alt="书"/>
<p>人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!人生若是无误,铅笔何须橡皮!!</p>
</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  type="text/css">
.s {
	background-color:#999;
	height: 90px;
	width: 900px;
}
.r {
	height: 25px;
	width:  900px;
	background-color: #999;
}
.t {
	float:left;
}
.t1 {
	float:right;
}
.r {
	list-style-type: none;
}
a {
	display:block;
	text-decoration: none;
	background-image: url(../../forumMenuBg.gif);
	background-repeat:no-repeat;
	color: #000;
}
a:hover {
	background-image: url(../../forumMenuBg.jpg);
	background-repeat:repeat-x;
	color: #FFF;
}
li {
	text-align:center;
	width:80px;
	float:left;
}
</style>
</head>
<body>
<div  class="s"> <img class="t" src="../../forumLogo.jpg"/> <img  class="t1" src="../../forumLogo_r.jpg"/> </div>
<div  class="r">
  <li><a  href="#">首页</a></li>
  <li><a  href="#">青鸟知识库</a></li>
  <li><a  href="#">青鸟论坛</a></li>
  <li><a  href="#">学员问答</a></li>
  <li><a  href="#">青鸟圈子</a></li>
  <li><a  href="#">实时课堂</a></li>
  <li><a  href="#">客户端下载</a></li>
  <li><a  href="#">帮助中心</a></li>
</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  type="text/css">
.rr{
	height: 500px;
	width:500px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	background-color:#CCC;
	}
	h1{
	background-color: #F0F;
	height: 40px;
	width:500px;
	padding:0px;
	margin:0px;
		}
  .one li{
	 float:left; 
	  width:220px;
	  height:220px;
	  
	  }
	  img{
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
	border-left-color: #FFF;		  
		  }
li{
	list-style-type: none;	
	}
span{
	display:block;
	
	text-indent:2em;
	background:url(icon-02.jpg) no-repeat;
	}
</style>
</head>
<body>
<div class="rr">
<h1>精彩片段</h1>
<!--</div>
<div--> <ul class="one">
<li><a  href="#"><img src="video-01.jpg"/></a>
    <h2>携手共同进步</h2>
    <p><span>时长: 80秒</span></p>
    <span>点击: 541563</span>
    </li>
<li><a href="#"><img src="video-02.jpg" /></a>
    <h2>美丽的起点</h2>
    <p><span>时长: 120秒</span></p>
   <span>点击: 657842</span>
    </li>
<li><a href="#"><img src="video-03.jpg" /></a>
    <h2>努力的过程</h2>
    <p><span>时长: 50秒</span></p>
   <span>点击: 912380</span>
     </li>
<li><a href="#"><img src="video-04.jpg" /></a>
    <h2>享受丰硕的成果</h2>
    <p><span>时长: 60秒</span></p>
     <span>点击: 47651280</span>
     </li>
</ul>



</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  type="text/css">
li {
	width:250px;
	float:left;
	list-style-type: none;

	border-right-width: medium;
	
	border-right-style: solid;
	
	border-right-color: #000;
	
}
ul {
	width:800px;
	height:100px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	float:left;
}
img {
	width:70px;
	height:70px;
	float:left;
}
</style>
</head>
<body>
<h2>相册服务</h2>
<div class="e">
  <ul class="u">
    <li><img  src="icon_01.gif" />
      <h3>云相册</h3>
      <span>手机相册高速上传</span> </li>
    <li><img  src="icon_02.gif" />
      <h3>映像派</h3>
      <span>个性便捷相片冲印</span> </li>
    <li><img  src="icon_03.gif" />
      <h3>VIP升级</h3>
      <span>支持外链扩充空间</span> </li>
  </ul>
</div>
</body>
</html>

第七章 浮动

第七章浮动