表格 HTML CSS JS 布局

查看:119
本文介绍了表格 HTML CSS JS 布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题


table表格怎么布局尤其是条件1与条件1之间的线,谢谢大家

解决方案

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<title>线的过渡动画效果Demo</title>

</head>
<style>
.animate {

/*width: 0;*/
height: 0;
/*-webkit-transition: width 1600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/
/* transition: width 1600ms cubic-bezier(0.4, 0.61, 0.355, 1); */
 /*transition: width 1600ms; */
 transition: height; 

}

.div1 {

/*width: 100%;*/
/*height: 2px;*/
width: 2px;
/*background: #c2c2c2;*/
background: #f46c0e;
margin-left:100px;

}
</style>

<body bgcolor="#f6f5f5">

<!-- <div>线的过渡动画效果</div> -->
<br/>
<div style="width:400px;height:400px">
    <div class="div1 animate"></div>
</div>

</body>
<script type="text/javascript">

function line(){
    var t = setTimeout(function(){
        var element  = document.getElementsByClassName("div1")[0];
        console.log(element);

        // element.style.width = "100%";
        element.style.height = "100%";
        element.style.transitionDuration = "3s";
        element.style.transitionTimingFunction="cubic-bezier(0.4, 0.61, 0.355, 1)"
    },3000);
}
line();

</script>
</html>

这篇关于表格 HTML CSS JS 布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆