                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

本地书写时，通过.main .left image或者.main image为什么不能选择到图片

<html>
  <head>
     <title>布局练习</title>
     <meta charset="utf-8">
     <style type="text/css">
      body{
        margin:0;
        padding: 0;
        font-size:30px;
        font-weight: bold;
      }
      .main{
        width: 458px;
        padding: 20px;
        margin-left:100px;
        background: #9cf; 
        border: 1px solid gray;
        position: relative;
      }
      .main .left image{
      float: left; 
      margin:-20px 0 0 -130px;
      } 
      .main .right p{
        font-size: 12px;
        line-height: 25px;
      }
      
      .main .right span{
        position: absolute;
        right: 20px;
        top:10px;
        font-size: 12px;
      }
     </style>
  </head>

  <body>
   <div class="main">
      <div class="left">
       <image src="C:\Users\Desktop\Koala.jpg"  width="100px" height="100px">
      </div>

      <div class="right">
       <h6>樱桃小丸子</h6>
       <span>10分钟前</span>
       <p>网站重构随着这个概念的出现，也带来了DIV结构的流行，因此也就出现了我们口头说的“DIV+CSS做网站”。单从这个DIV+CSS的叫法来分析，可以了解到CSS已经被大家用在了页面布局上了。单一个页面不是只有控制DIV就控制了全面，还有很多其他的HTML标记，以前用table布局的页面，一样可以用CSS来控制它
       </p>
      </div>

   </div>
  </body>
</html>