CSS学习笔记三_html/css_WEB-ITnose

<style type="text/css">/*body{    因为浏览器的不同，肯能在开发时，改变body外边框的值margin:0px;}*/div{border:#000000;padding-top:10px;padding-bottom:50px;padding-left:100px;padding-right:150px;/*padding:10px 50px 100px 150px ;/*上右下左*/}#div_1{background-color:#FF0000;/*margin-left:200px;*/float:left;/**/}#div_2{background-color:#FF9900;float:left;/*clear:left;*/}#div_3{background-color:#3300FF;/*clear:right;*/}</style>	<div id="div_1">1号盒子</div>	<div id="div_2">2号盒子</div>	<div id="div_3">3号盒子</div>

<style type="text/css">div{border:#000000 solid 1px;height:100px;width:200px;}#div_0{background-color:#66FF99;height:400px;width:400px;position:absolute;/*position:static;*/top:100px;left:100px;}#div_1{	background-color:#FF0000;	/*position:absolute;*/  /*假设父对象div_0没有定义position，比如是static，那么他的定位属性相对于body，有就是相对于div_0 */	position:relative;	left: 80px;/*通过一个小程序可以实现数值的改变，进而实现该盒子在页面飘动的效果*/	top:50px;/*这个数值是相对于body而言的*/	}#div_2{background-color:#FF9900;width:200px;}#div_3{background-color:#3300FF;}</style>	<div id="div_0">		<div id="div_1">1号盒子</div>		<div id="div_2">2号盒子</div>		<div id="div_3">3号盒子</div>	</div> 

<style type="text/css">#imgtext{border:#3333FF dashed 1px;width:280px;}#img{float:right;}#text{color:#F6C;font-family:"华文隶书";}</style>	<div id="imgtext">		<div id="img">			<img src="file:///C%7C/Users/Public/Pictures/Sample%20Pictures/1.jpg" height="200px"    style="max-width:90%" alt="">		</div> 		<div id="text">			这是一朵水仙花,呵呵呵呵呵呵呵呵呵呵呵呵呵呵asdsad最新的身份的广泛的广泛覆盖vbxcv大哥哥哥哥哥asdds的双方各持续持续持续弟弟！			撒反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复			反复！		</div>	  <br>  <p><br> </p>  <p class="sycode">   <strong>总结来说，如果外区域有定义过position，那么内区域定义的position属性值是针对外区域而言，如果没有那么内区域针对的是body而言</strong>  </p>  <p class="sycode">   <strong><br> </strong>  </p>  <p class="sycode">   <strong><br> </strong>  </p>  <p class="sycode">   <strong>CSS图像签名</strong>  </p>  <p class="sycode">   <strong><br> </strong>  </p>  <p class="sycode">   </p>
<pre name="code" class="sycode"><style type="text/css">#imgtest{border: #FF0000 dotted 1px;    width: 350px;    /*margin: 50px;*/    position: absolute;/*防止图像动了,而文字未动,所以在imgtext也要定位*/    top:50px ;}#text{    font-family: "华文隶书";    font-size: 20px;    position: absolute;    top: 30px;    left: 10px;}</style><div id="imgtest">    <div id="img">         <img  src="1.jpg" height="300px"    style="max-width:90%" alt="CSS学习笔记三_html/css_WEB-ITnose" >    </div>    <div id="text">        小狗    </div>
</div>