一个简单css效果

最新推荐文章于 2022-06-28 15:06:06 发布
最新推荐文章于 2022-06-28 15:06:06 发布
阅读量825 收藏
点赞数
分类专栏： Css菜单 文章标签： css div class stylesheet float function

<html>
<head>
<title> new document </title>
<link type="text/css" rel="stylesheet" href="style.css" />
<script type="text/javascript">
function ShowTree(obj)
{
 whichEl = eval(obj);
 
 if (whichEl.style.display == "none")
 {
  var div = document.getElementsByTagName("div");
  for (i=0; i<div.length; i++)
  {
   if (div[i].className == whichEl.className)
   {
    div[i].style.display = "none";
   }
  }
  eval(obj + ".style.display=/"/";");
 }
 else
 {
  eval(obj + ".style.display=/"none/";");
 }
}

function ShowMain(obj1,obj2)
{
 whichEl = eval(obj1);
 if (whichEl.style.display == "")
 {
  eval(obj1 + ".style.display=/"none/";");
  eval(obj2 + ".style.display=/"/";");
 }
 else
 {
  eval(obj1 + ".style.display=/"/";");
  eval(obj2 + ".style.display=/"none/";");
 }
}
</script>
</head>

<body>

<div id="f1" class="frame_style" style="display:;">
 <div class="main_style">
  <div id="div1" class="title_style" οnclick="ShowTree('data1')">test</div>
  <div id="data1" class="data_style" style="display:none;">
   <ul>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
   </ul>
  </div>
  <div id="div2" class="title_style" οnclick="ShowTree('data2')">test</div>
  <div id="data2" class="data_style" style="display:none;">
   <ul>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
   </ul>
  </div>
 </div>
</div>
<div class="space_style"><div οnclick="ShowMain('f1','f2')"></div></div>

<div id="f2" class="frame_style" style="display:none;">
 <div class="main_style">
  <div id="div3" class="title_style" οnclick="ShowTree('data3')">test2</div>
  <div id="data3" class="data_style" style="display:none;">
   <ul>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
   </ul>
  </div>
  <div id="div4" class="title_style" οnclick="ShowTree('data4')">test2</div>
  <div id="data4" class="data_style" style="display:none;">
   <ul>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
   </ul>
  </div>
 </div>
</div>
<div class="space_style"><div οnclick="ShowMain('f2','f3')"></div></div>


<div id="f3" class="frame_style" style="display:none;">
 <div class="main_style">
  <div id="div5" class="title_style" οnclick="ShowTree('data5')">test3</div>
  <div id="data5" class="data_style" style="display:none;">
   <ul>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
   </ul>
  </div>
  <div id="div6" class="title_style" οnclick="ShowTree('data6')">test3</div>
  <div id="data6" class="data_style" style="display:none;">
   <ul>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
    <li>asdf</li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

style.css

a,input{
    behavior:url('blur.htc');
}

body
{
    margin:10px;
}
body,td,th,p,span,div,li{
 font-size:12px;
 line-height:150%;
 font-family:"宋体", Arial;
}
input{
 border-top-color:#CCCCCC;
 border-left-color:#CCCCCC;
 border-right-color:#999999;
 border-bottom-color:#999999;
 border-width:1px;
 border-style:solid;
 background-color:#FFFFFF;
 font-size:12px;
 padding-top:1px;
 float:right;
}

.frame_style{
 float:left;
}
.main_style{
 float:left;
 width:300px;
 height:350px;
 overflow:hidden;
}

.title_style{
 cursor:hand;
 padding:4px;
 padding-left:16px;
 margin-bottom:4px;
 border-color:#E1E1E1;
 border-style:solid;
 border-width:1px;
 width:300px;
 background-color:#FAFAFA;
}

.data_style{
 border-color:#F1F1F1;
 border-style:solid;
 border-width:1px;
 width:300px;
 background-color:FAFAFA;
}
.data_style ul{
 list-style-type:none;
 margin:0px;
 padding:10px;
}

.space_style{
 margin:4px;
 border-color:#F1F1F1;
 border-style:solid;
 border-width:1px;
 width:6px;
 height:340px;
 background-color:#FAFAFA;
 float:left;
}
.space_style div{
 cursor:hand;
 background-color:#CCCCCC;
 width:100%;
 height:20px;
 margin-top:160px;
}

css3实现的简单翻牌效果
09-13
css3实现的简单翻牌效果
CSS —— 常用效果（一）（纯 CSS）
HuoZhiyan 的博客
05-04 854
文章目录一、css 画圆二、css 画三角形 一、css 画圆 宽和高必须相等。 border-radius: 50% .circle{ border-radius: 50%; width: 50px; height: 50px; background-color: skyblue; } <div class="circle"></div> 二、css 画三角形 使用三个边框创建三角形。
开发中遇到的一些简单的CSS效果
guizi0809的博客
05-18 231
1. 导航菜单下划线效果 <nav> <div class="nav-item">菜单A</div> <div class="nav-item">菜单BBB</div> <div class="nav-item">菜单CC</div> <div class="nav-item">菜单DDDDDDD</div> <div cla
用CSS写一个简单的幻灯片效果页面
weixin_34302561的博客
11-29 622
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【用CSS写一个简单的幻灯片效果页面】 1.背景介绍CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。...
css简单特效
weixin_34195142的博客
01-08 862
右上角删除 &lt;div class="delete"&gt; &lt;span class="delete-icon" @click="_delete(item)"&gt;×&lt;/span&gt; &lt;/div&gt; 复制代码.delete { position: absolute; right: -4px; top: -16px; width: 0;
一个简单好看的纯CSS3翻书效果特效代码
03-20
效果描述： 好久没有看到如此高逼格的纯CSS3特效了 蛮精致的一款纯CSS3模拟书本翻页效果 如果看不到效果，建议用最新版的谷歌浏览器查看 使用方法： 1、将CSS样式引入到网页中 2、将index.html中的代码部分拷贝到你...
CSS实现一个简单loading动画效果
12-30
比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。 　CSS的animation可以做出大多数的loading，比如： loading1： 1、HTML： ...
css3实现多个元素依次显示效果
09-24
因此，在动画开始前，文章建议给元素添加一个class，如aninode，初始时设置为visibility:hidden（隐藏状态但占用空间），当需要元素显示时，再通过JavaScript给元素添加animated类来触发动画效果，并通过CSS设置该类...
一个简单好看的纯CSS3翻书效果.zip
07-11
【标题】中的“一个简单好看的纯CSS3翻书效果”是指使用CSS3技术实现的一种交互式的书籍翻页动画效果。这种效果通常用于电子书、在线阅读器或者网站的页面展示，给用户带来接近真实翻书的体验。CSS3是层叠样式表...
css---学习之路（使用css实现简单的动画效果）
小牛叹气生活不易的博客
06-28 827
使用css实现简单的动画效果
写一个简单的HTML页面及添加CSS样式
热门推荐
程序媛乐园
09-26 1万+
简单的HTML页面添加CSS 就是把效果分离开来，独立写一个SCC样式。 效果图 HTML代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" typ...
分享：一些简单css3效果
老金
01-06 1154
分享：一些简单css3效果 /* animation */ .ons{-webkit-animation:3s ease-out backwards;-moz-animation:3s ease-out backwards;-ms-animation:3s ease-out backwards;animation:3s ease-out backwards;} /* 淡入 */ .fadein...
简单的css实现的特效
weixin_33969116的博客
11-21 594
点赞动画 注意点： 通过一张长图，通过transition：第一个属性来确定要渐变的值，第二个值为时间，第三个值为速度大小，也可以指定步数。也可以通过算浏览器每一贞的时间来算出移动到最后一张图片的值为多少。 然后通过checkbox来判断是否点赞了。用label标签关联input，当input被checked的时候，来操作div属性。input:checked+label div。 美化io...
HTMl与CSS简单页面页面效果实例
henry的博客
12-12 7612
效果图如下： HTML和CSS代码： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .div{ position: relative; margin-l
简单的css3动画效果
weixin_44540471的博客
02-02 474
开发工具与关键技术：html+css3 作者： 李伙 撰写时间： 2019年2月2日 css3中的transition可以实现一些简单的动画效果，可以让我们的页面布局更加完美；下面是一个小小的例子； 首先设置一个div，在里面存放图片 &lt;div class="container"&gt; &lt;img src="../img/mm4.jpg" alt=""&gt; &lt;i...
简单的Css3效果
weixin_44560796的博客
01-17 476
简单的Css3动画效果 开发工具与关键技术：DW中的Css3效果 作者：冉冉 撰写时间：2019年1月17日 Css3有三大属性，分别是：transform，transition，animation。其中transform对旋转，缩放，扭曲，位移都能提供属性支持 transition是实现动画效果的一个属性 animation是用@keyframes规则达到不断变化的效果 我要实现的是...
利用css简单实现一个跑马灯效果
鹏仔工作室的秘密基地
03-08 2869
详情www.sharedblog.cn/?post=67 CSS代码 &lt;style type="text/css"&gt; div,body,input,textarea,a,select,h1,h2,h3,h4,h5,h6,span,p,ul,ol,li,dl,dd,dt,form,table,span,img{ margin:0; padding:0; } ....
CSS一些简单的样式
weixin_43641202的博客
03-28 661
CSS文本样式字体属性字体类型字体大小字体风格字体粗细字体属性文本样式文本颜色水平对齐方式首行缩进和行高文本装饰垂直对齐方式 字体属性 字体属性就如之前用到的font-size属性，可以设置字体大小，除此之外还可以定义字体类型、字体是否加粗、字体风格等。 属性名 含义 示例 font-size 设置字体大小 font-size:12px; font-family 设置字体类型 font-family:“微软雅黑”; font-style 设置字体风格 font-style:itali
简单惊艳的CSS样式
#的博客
03-09 536
简单惊艳的CSS样式 前言 虽然我不怎么做前端，但是偶尔也喜欢弄个网站啥的，为了收集一些简单使用高13格的样式，于是诞生了这篇文章，酷，而且这篇文章我会不断更新的。 隐藏鼠标 *{ cursor: none!important; } 除了隐藏鼠标之外，还有很多鼠标风格： 文字模糊效果 *{ /*transparent：透明*/ color: transparent; text-shadow: #111 0 0 5px; }...
css 写一个 渐变的效果
最新发布
06-09
以下是一个简单的例子： ```css .gradient { background: linear-gradient(to bottom, #ffffff, #000000); } ``` 这个例子演示了从上到下的线性渐变效果，从白色到黑色。其中，`to bottom`表示渐变方向为从上到下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值