格式与布局

---恢复内容开始---

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>无标题文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
      <div style="100px; height:100px; background-color:#F00; position:absolute;"></div>
      <div><img  src="../图片/本子.jpg"/></div>
       <div><img  src="../图片/本子.jpg"/></div>
        <div><img  src="../图片/本子.jpg"/></div>
         <div><img  src="../图片/本子.jpg"/></div>
          <div><img  src="../图片/本子.jpg"/></div>
           <div><img  src="../图片/本子.jpg"/></div>
    </body>

代码表示：绝对定位position：absolute（浏览器动跟着动）

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
       <div style="100px; height:100px; background-color:#000;"></div>
      <div style="100px; height:100px; background-color:#F00; position:relative;top:20px"></div>
    </body>

代码表示：相对定位position：relative移动时相对自己的位置移动，而不是根据浏览器移动

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
      <div style="100px; height:100px; background-color:#F00; position:fixed;bottom:20px; right:20px"></div>
      <div><img  src="../图片/本子.jpg"/></div>
      <div><img  src="../图片/本子.jpg"/></div>
      <div><img  src="../图片/本子.jpg"/></div>
      <div><img  src="../图片/本子.jpg"/></div>
      <div><img  src="../图片/本子.jpg"/></div>
    </body>

上面代码：固定定位position：fixed 怎么拉动滚动条位置都不动。

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
      <div style="100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px;"></div>
      <div style="100px; height:100px; background-color:#3FF; position:relative;"></div>
    </body>

上面代码：分层（z-index）显示：

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
      <div style="100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px; z-index:2"></div>
      <div style="100px; height:100px; background-color:#3FF; position:relative;"></div>
    </body>

显示：。

流

 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>带着小图片</title>
        <style type="text/css">
        *{
            margin:0 auto; padding:0;
            }
        .w{ 
            float:left;
            }     
        </style>
    </head>
    
    <body>
        <div style="604px; height:41px; border:1px solid #e9e9e9;">
        <div class="w">春节</div>
        <div class="w">元宵节</div>
        <div class="w">端午节</div>
        <div class="w">中秋节</div>
        <div class="w">国庆节</div>
        <div style=" 104px; height:41px;"></div>
        </div>
    </body>

代码显示：float：left/right

       <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>带着小图片</title>
        <link  rel="shortcut icon" href="../图片/本子.jpg"/>
    </head>
   
    
    <body>
       
    </body>

　　代码显示：网页title带小图片<link rel="shortcut icon" href=""/>写在head里但不要写在style里，显示：。

<body>
        <div style="0px; height:0px; border-bottom:50px solid transparent; border-left:50px solid #00F;
 border-right:#FF0 solid 50px; border-top:50px solid #F00;"></div>
    </body>

　　显示：，边框透明 border：transparent

---恢复内容结束---

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>无标题文档</title>
        <style type="text/css">
        </style>
    </head>
    <body>
      <div style="100px; height:100px; background-color:#F00; position:absolute;"></div>
      <div><img  src="../图片/本子.jpg"/></div>
       <div><img  src="../图片/本子.jpg"/></div>
        <div><img  src="../图片/本子.jpg"/></div>
         <div><img  src="../图片/本子.jpg"/></div>
          <div><img  src="../图片/本子.jpg"/></div>
           <div><img  src="../图片/本子.jpg"/></div>
    </body>