使用CSS向下移动LI
[英]Shifting LIs down using CSS
问题描述
这是我要添加的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>
2 个解决方案
解决方案1
0 2015-10-17 10:24:26
<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>
解决方案2
0 2015-10-17 11:59:29
<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向下移动一段文字
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.