HTML基础(九)

HTM基础(九)

        div:人们常说的布局说的就是HTML+div,div一个毫无语意的块级元素,拥有会计的几个特点,自动换行。div本身并不难说,但它牵扯的都系却很广,就应为它的普适性。

        div有一个横重要的概念叫做盒子模型,一个盒子:它有边界,在里面装着内容,内容和边界之间存在着padding(内边界),然后边界与其他边界之间存在着margin(外边界),一个元素在浏览器中的大小由这些元素构成:

width=border-width*2+border-left+border-right+width+marigin*2;height计算方法相等。从这个公式一目了然关于元素在文档中的排版。除此之外元素定位position,和是否隐藏影响着页面元素的呈现。

<!doctype html>

<html lang="zh-CN">

  <head>
    <meta charset="utf-8" />
	<title>新闻图片链接</title>
	<style>
	  *{
	    padding:0;
		margin:0;
	  }
	  img{
		width:105px;
		height:90;
	  }
	  span{
	    color:#fff;
		background-color:rgba(0,0,0,.6);
		font-size:12px;
		width:105px;
		height:20px;
		line-height:20px;
        position:absolute;	
		top:60px;
		left:0;
	  }
	  span:hover{
		color:red;
	  }
	  
	  i{
	    display:inline-block;
		width:27px;
		height:27px;
		position:absolute;
		top:33px;
		left:1px;
	  }
	  .na{
		background:url("img/play.png")
	  }
	</style>
  </head>
  <body>
	<div class="pica">
	  <a href="http://www.sina.com" class="ac">
	    <img class="texta" src="img/bc.png" />
		<i class="na"></i>
		<span>金正恩会见王毅</span>
	  </a>
	</div>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_20901663/article/details/80201338