phpstudy集成环境

 首页 > 我在DW布局中锚点位置显示正常，但是到浏览器一测没有效果都到一块去了，请教大牛是怎么回事?

我在DW布局中锚点位置显示正常，但是到浏览器一测没有效果都到一块去了，请教大牛是怎么回事?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/mycss.css" rel="stylesheet" type="text/css">
<link href="css/donghua.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.11.3.min.js" type="text/jscript"></script>
<script src="js/Posfixed.js" type="text/jscript"></script>
<script src="js/Myjs.js" type="text/javascript"></script>
</head>

<body>

<nav>
<ul>
<li>教育经历</li>
<li>我的技能</li>
<li>我的作品</li>
<li id="in"><input type="search" placeholder="搜索一下"/></li>
<li id="lx">我的联系方式</li>
</ul>
</nav>

<header>
<div class="img">
<div class="me">
</div>
</div>
</header>

<article>

<div class="box">

教育经历:

<div class="line1">
</div>
<div class="yuan1">

<p>2011.08-2014.08</p>

</div>
<div class="fang1">
<div class="sanjiao1"></div>
<div class="xfang1">

<p>123<br/><br/>
   专业：123</p>

</div>
</div>

<div class="line2"></div>
<div class="yuan2">

<p>2014.08-2015.02</p>

</div>

<div class="fang2">

<div class="sanjiao2"></div>
<div class="xfang2">
<p>123<br/><br/>
   学习123</p>
</div>

</div>

<div class="line3"></div>

<div class="yuan3">
<p>2015.02-2015.11</p>
</div>

<div class="fang3">

<div class="sanjiao3"></div>
<div class="xfang3">
<p>123<br/><br/>
   123</p>
</div>

</div>

我的技能:

<div class="jineng">

<p>PS:</p>
 <div class="ps"></div>
<p>AI:</p>
 <div class="ai"></div>
<p>HTML:</p>
 <div class="ht"></div>
<p>CSS:</p>
 <div class="css"></div>
<p>HTML5:</p>
 <div class="h5"></div>
<p>CSS3:</p>
 <div class="c3"></div>
<p>Javascript:</p>
 <div class="j"></div>
<p>Jquery:</p>
 <div class="jq"></div>

</div>

我的作品:

<a href="#"><div class="zuoping1">
  <div class="zhezhao"><h1>作品一</h1></div>
</div></a>

<a href="#"><div class="zuoping2">
  <div class="zhezhao"><h1>作品二</h1>
  </div>
</div></a>

</div>
</article>
<footer>

<div class="weixing"></div>
<div class="qq"></div>
</footer>
</body>
</html>
css_________
@charset "utf-8";
/ CSS Document /
*{ margin:0;
padding:0;
}
a{ text-decoration:none;
}

a:visited{ color:#EEE; }

nav{ width:100%;

 height:50px;
 background:#000; 
 z-index:666;
 }

nav ul{ list-style:none;}

nav li{ float:left;

    width:150px;
    text-align:center;
    line-height:50px;
    color:#EEE;
    }

nav ul #in input{ width:450px;

              height:30px;
              border:0;
              margin-left:60px;
              background:url(../img/search.png) no-repeat;
              background-color:#EEE;
             }

nav ul #lx{ margin-left:430px;

        width:150px;}

header{ width:100%;

    height:353px;
    background:#000;
    }

.img{ width:658px;

 height:353px;
 background:url(../img/sha.jpg);
 margin:0 auto;
 position:relative;
 }

.me{

width: 200px;
height: 267px;
background: url(../img/me.jpg) no-repeat;
-webkit-mask: url(../img/bj.png) no-repeat;
position: absolute;
left: 210px;
top: 73px;
transition:all 0.5;
transform:scale(1);
-webkit-animation:a 2s infinite ease-in-out;
}

article{ width:100%;

     height:2200px;
     background:#DDD;
     
     }

.box{ width:900px;

  height:2200px;
  border:1px solid;
  margin:0 auto;
  position:relative;
 }

.box #01{

display: block;
width: 120px;
height: 50px;
margin-top: 10px;

}

.box #01 p{ font-weight:bold;

        font-size:26px
        }

.wenzi1{ width:160px;

     height:50px;
     margin-top:16px;
     }

.wenzi1 p{ font-size:30px;

       color:#f7b634;
       font-weight:bold;
       }

.line1{

width: 10px;
height: 200px;
background: #AAA;
position: absolute;
left: 367px;
top: 3px;
-webkit-animation: line1 ease-in-out 3s backwards;
    }

.yuan1{

width: 90px;
height: 90px;
border-radius: 50%;
background: #06F;
position: absolute;
left: 326px;
top: 202px;
transition: all 1s;
-webkit-animation: yuan1 ease-in-out 1s backwards;
-webkit-animation-delay: 3s;
opacity: 1;
}

.yuan1 p{ font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000; 
      }

.fang1{

width: 250px;
height: 120px;
position: absolute;
left: 430px;
top: 183px;
-webkit-animation: fang1 ease-in-out 2s backwards;
-webkit-animation-delay: 5s;
opacity: 1;

}
.sanjiao1{ width:0;

      height:0;
      border-top:13px solid transparent;
      border-right:13px solid #06F;
      border-bottom:13px solid transparent;
      margin-top:50px;}

.xfang1{

width: 239px;
height: 120px;
background: #06F;
border-radius:15px;
position: absolute;
left: 13px;
top: 0px;

}
.xfang1 p{ font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:33px;
      text-shadow: 1px 3px 3px #000000; }

.line2{

width: 10px;
height: 200px;
background: #AAA;
position: absolute;
left: 368px;
top: 293px;
-webkit-animation: line1 ease-in-out 3s backwards;
-webkit-animation-delay: 6.5s;

    }

.yuan2{

width: 90px;
height: 90px;
border-radius: 50%;
background: #cd3738;
position: absolute;
left: 329px;
top: 494px;
transition: all 1s;
-webkit-animation: yuan1 ease-in-out 1s backwards;
-webkit-animation-delay: 9.5s;
opacity: 1;
}

.yuan2 p{ font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000; }

.fang2{

width: 256px;
height: 120px;
position: absolute;
left: 60px;
top: 481px;
-webkit-animation: fang2 ease-in-out 2s backwards;
-webkit-animation-delay: 10s;
opacity: 1;

}

.sanjiao2{ width:0;

       height:0;
       border-top:13px solid transparent;
       border-left:13px solid  #cd3738;
       border-bottom:13px solid transparent;
       margin-top:50px;
       margin-left:240px;
       
       
       }

.xfang2{

width: 239px;
height: 120px;
background: #cd3738;
border-radius:15px;
position: absolute;
left: 1px;
top: 1px;

}
.xfang2 p{font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000;}

.line3{

  width: 10px;
  height: 200px;
  background: #AAA;
  position: absolute;
  left: 368px;
  top: 585px;
  -webkit-animation: line1 ease-in-out 3s backwards;
  -webkit-animation-delay:10.5s
}

.yuan3{

width: 90px;
height: 90px;
border-radius: 50%;
background:#967fb5;
position: absolute;
transition: all 1s;
-webkit-animation: yuan1 ease-in-out 1s backwards;
-webkit-animation-delay:13.5s;
opacity: 1;
left: 329px;
top: 786px;
        }

.yuan3 p{ font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000; }

.fang3{

width: 256px;
height: 120px;
position: absolute;
left: 437px;
top: 774px;
-webkit-animation: fang3 ease-in-out 2s backwards;
-webkit-animation-delay: 14s;
opacity: 1;

}

.sanjiao3{ width:0;

      height:0;
      border-top:13px solid transparent;
      border-right:13px solid #967fb5;
      border-bottom:13px solid transparent;
      margin-top:50px;}

.xfang3{

width: 239px;
height: 120px;
background: #967fb5;
border-radius: 15px;
position: absolute;
left: 13px;
top: 1px;

}

.xfang3 p{ font-weight:bold;

      text-align:center;
      color:#EEE; 
      margin-top:26px;
      text-shadow: 1px 3px 3px #000000;}

.wenzi2{ width:160px;

     height:50px;
     margin-top:900px; }

.wenzi2 p{ font-size:30px;

       color:#f7b634;
       font-weight:bold; }

.box #02{

display: block;
width: 120px;
height: 50px;
padding-top:1000px;

}

.box #02 p{ font-weight:bold;

        font-size:26px
        }

.jineng{

width: 600px;
height: 450px;
position: absolute;
left: 235px;
top: 1204px;

}
.jineng p{ font-weight:bold;}
.jineng .ps{ width:500px;

         height:30px;
         background:#09F;}

.jineng .ai{ width:490px;

         height:30px;
         background:#0C0;
         }

.jineng .ht{ width:550px;

         height:30px;
         background:#F90;}

.jineng .css{ width:545px;

          height:30px;
          background:#888;}

.jineng .h5{ width:490px;

         height:30px;
         background:#800;}

.jineng .c3{ width:550px;

         height:30px;
         background:#0B0;}

.jineng .j{ width:450px;

        height:30px;
        background:#CF0;}

.jineng .jq{ width:490px;

         height:30px;
         background:#F60;}

.box #03{

display: block;
width: 120px;
height: 50px;

}

.box #03 p{ font-weight:bold;

        font-size:26px
        }

.zuoping1{

width: 300px;
height: 163px;
background:url(../img/01.png) no-repeat;
position: absolute;
left: 169px;
top: 1923px;

}

.zuoping2{

width: 300px;
height: 163px;
background:url(../img/02.png) no-repeat;
position: absolute;
left: 523px;
top: 1923px;
}

.zhezhao{ width:300px;

      height:163px;
      background:rgba(34,7,0,.6); 
      opacity:1;
      transition:all ease-in-out 0.5s;
      }

.zhezhao h1{ text-align:center;

         line-height:160px;
         color:#EEE;}

.zuoping1:hover .zhezhao{ opacity:0;}

.zuoping2:hover .zhezhao{ opacity:0;}

footer{ width:100%;

     height:150px;
     background:#000; 
     position:relative;
     }

.weixing{

width: 100px;
height: 100px;
background: url(../img/weixing.jpg) no-repeat;
position: absolute;
left: 598px;
top: 14px;

}

.qq{

width: 100px;
height: 100px;
background: url(../img/qq.jpg) no-repeat;
position: absolute;
left: 480px;
top: 14px;

}

换浏览器试试，用谷歌浏览器

【热门文章】
【热门文章】