格式与布局

绝对定位，相对定位，固定定位上下左右直接用top、bottom、right、left

1、绝对定位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="width:100px; height:100px; background-color:#F00; position:absolute；"></div>
      <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
       <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
        <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
         <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
          <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
           <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
    </body>

拉动滚动条在浏览器中跟着移动

2、相对定位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="width:100px; height:100px; background-color:#000;"></div>
      <div style="width:100px; height:100px; background-color:#F00; position:relative;top:20px"></div>
    </body>

3、固定定位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="width:100px; height:100px; background-color:#F00; position:fixed;bottom:20px; right:20px"></div>
      <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
      <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
      <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
      <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
      <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
    </body>

4、分层（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="width:100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px;"></div>
      <div style="width: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="width:100px; height:100px; background-color:#F00; position:fixed;top:20px; left:20px; z-index:2"></div>
      <div style="width:100px; height:100px; background-color:#3FF; position:relative;"></div>
    </body>

其他效果

1、半透明效果opacity:0.5; -moz-opacity:05; filter:alpa(opacity=50)透明度为50%

    <body>
     <div style="opacity:0.5; -moz-opacity:05; filter:alpa(opacity=50);">透明区域</div>
    </body>

2、圆角，border-radius:50%为圆形，可以是百分数也可以是像素，小于50%是圆角

    <body>
     <div style=" width:100px; height:100px; background-color:#3F0; border-radius:50%"></div>
    </body

    <body>
     <div style=" width:100px; height:100px; background-color:#3F0; border-radius:20%"></div>
    </body>

3、阴影box-shadow: px px px #000000

    <body>
     <div style=" width:100px; height:100px; background-color:#3F0; border-radius:20%; box-shadow:10px 10px 10px #000000 "></div>
    </body>

float：left、right

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
        *{ float:left}
        </style>
    </head>
      <body>
        <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
       <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
        <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
         <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
          <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div>
           <div><img  src="u=1857019421,341116136&fm=27&gp=0.jpg"/></div> 
      </body>

posted @ 2017-10-10 21:04 navyyouth 阅读(168) 评论(0) 编辑收藏举报

navyyouth

格式与布局

公告