Question

这是我要添加的html内容。这些是我公司的4个垂直行业，他们有个人客户，我希望这些客户的徽标出现在同一个框中向下移动，向下移动剩余文本，徽标库向下移动。

  <div class="box1">
     <div class="box1_bot">
        <div class="box1_top">
           <div class="pad" >
              <h2>CLIENTS</h2>

                 <ul>
                     <li><a href="#home">Consultants4manpower</a></li>
                     <li><a href="#news">Corporate Training</a></li>
                     <li><a href="#contact">English and PD Training</a></li>
                     <li><a href="#about">Career Counselling</a></li>
                </ul>
           </div>
        </div>
     </div>
  </div>

Answer 1

<html>
<head>
<script>

function show_logo_home(){
var loc = document.getElementById("logo");
var linknews = document.getElementById("news");
var linkcontact = document.getElementById("contact");
var linkabout = document.getElementById("about");
loc.style.visibility="visible";
loc.style.marginTop="-227";
linknews.style.marginTop="150";
}
</script> 
<style>
#logo {
background-color: #F00;
height: 150px;
width: 150px;
margin-left: 30px;
position: absolute;
visibility:hidden;}
</style>
</head>
 <body>
 <div class="box1">
 <div class="box1_bot">
    <div class="box1_top">
       <div class="pad" >
          <h2>CLIENTS</h2>

             <ul>
              <li ><a href="#home" onclick="show_logo_home()"id="home">Consultants4manpower</a></li>
                 <li id="news"><a href="#news" onclick="show_logo_news()"id="news">Corporate Training</a></li>
                 <li id="contact"><a href="#contact" onclick="show_logo_contact()"id="contact">English and PD Training</a></li>
                 <li id="about"><a href="#about" onclick="show_logo_about()"id="about">Career Counselling</a></li>
            </ul>
       </div>
      </div>
    </div>
  </div>

<div id="logo"></div>
</body>
</html>

Answer 2

 <div id="demo"></div>
 <button id="btn"onclick="popup()">click me</button>
   <style>

    #demo {
-webkit-transition: all 2s ease 0s;
-o-transition: all 2s ease 0s;
-moz-transition: all 2s ease 0s;
transition: all 2s ease 0s;
height: 0px;
width: 0px;
   }

   </style>
  <script>
    function popup(){
    document.getElementById('demo').style.cssText='height:500px;  width:500px;background-color:red;position:absolute;'
    document.getElementById('demo').style.marginLeft=250;
    document.getElementById('demo').style.marginTop=50;
   }
 </script>

使用CSS向下移动LI

2 个答案: