野人部落实验室

Category: CSS

js实现div垂直方向自动居中

css代码

<style type=”text/css”>
#center{ width:700px; height:100px; background-color:#333; margin:0px auto;}
</style>

html代码

<div id=”center”>
</div>

JS代码

<script type=”text/javascript”>
function change(){
var winH=window.innerHeight;
var divH=document.getElementById(“center”).offsetHeight;
var FH=(winH-divH)/2;
document.getElementById(“center”).style.marginTop=FH+’px’;}
window.onload=change;
window.onresize=change;
</script>

css3旋转div标签

姑且就叫其为css3旋转div标签吧。不作具体介绍了。直接上代码和效果!

你好。这是一个 div 元素。
你好。这是一个 div 元素。

代码如下:

<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg); /* Opera */
}
</style>
<div>你好。这是一个 div 元素。</div>
<div id=”div2″>你好。这是一个 div 元素。</div>

Copyright © 2019 野人部落实验室

Theme by Anders NorenUp ↑