一个简单css效果

最新推荐文章于 2022-06-28 15:06:06 发布
最新推荐文章于 2022-06-28 15:06:06 发布
阅读量800 收藏
点赞数
分类专栏： 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;
}

So_CooL
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3实现的简单翻牌效果
09-13
css3实现的简单翻牌效果
css简单特效
weixin_34195142的博客
01-08 852
右上角删除 &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效果
weixin_44560796的博客
01-17 441
简单的Css3动画效果 开发工具与关键技术：DW中的Css3效果 作者：冉冉 撰写时间：2019年1月17日 Css3有三大属性，分别是：transform，transition，animation。其中transform对旋转，缩放，扭曲，位移都能提供属性支持 transition是实现动画效果的一个属性 animation是用@keyframes规则达到不断变化的效果 我要实现的是...
开发中遇到的一些简单的CSS效果
guizi0809的博客
05-18 189
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
简单的css3动画效果
weixin_44540471的博客
02-02 440
开发工具与关键技术：html+css3 作者： 李伙 撰写时间： 2019年2月2日 css3中的transition可以实现一些简单的动画效果，可以让我们的页面布局更加完美；下面是一个小小的例子； 首先设置一个div，在里面存放图片 &lt;div class="container"&gt; &lt;img src="../img/mm4.jpg" alt=""&gt; &lt;i...
一个简单好看的纯CSS3翻书效果特效代码
03-20
效果描述： 好久没有看到如此高逼格的纯CSS3特效了 蛮精致的一款纯CSS3模拟书本翻页效果 如果看不到效果，建议用最新版的谷歌浏览器查看 使用方法： 1、将CSS样式引入到网页中 2、将index.html中的代码部分拷贝到你...
CSS实现一个简单loading动画效果
12-30
比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。 　CSS的animation可以做出大多数的loading，比如： loading1： 1、HTML： ...
一个简单好看的纯CSS3翻书效果.zip
07-11
【标题】中的“一个简单好看的纯CSS3翻书效果”是指使用CSS3技术实现的一种交互式的书籍翻页动画效果。这种效果通常用于电子书、在线阅读器或者网站的页面展示，给用户带来接近真实翻书的体验。CSS3是层叠样式表...
27个精致的CSS3动画效果
08-23
8. **Flexbox布局**：也称为弹性盒模型，是CSS3中的一个布局模块，用于处理复杂的单轴布局问题，如响应式设计、对齐和填充。 9. **Grid布局**：网格布局系统则提供了一个二维的布局模型，可以方便地创建复杂的网格...
CSS简单实现重叠线效果
09-25
它包含一个2像素宽的灰色实线边框，并设置了上下10像素的外边距，以便与页面其他内容保持适当的距离。注意，这里使用了`margin:10px 0;`，意味着左右外边距为0，这有助于保持元素间的紧凑布局。 为了实现重叠线效果...
分享：一些简单css3效果
老金
01-06 1139
分享：一些简单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特效
neal1991的专栏
10-07 4448
在网上看到一个前端大牛的主页，觉得他有一个特效特别酷，一开始还以为是要用什么javascript代码来实现，但仔细看一下，发觉只是用几行css代码就搞定了，我觉得挺好的。 他这个效果就是鼠标放在左半部分和右半部分，整个网页的布局颜色会相互变化，我贴上前后两张图来比较一下，你们就明白了。 当鼠标放在左半部分： 当鼠标放在右半部分： 可能静态的图片看不太出效果，但是动态看起来还是比较酷的
CSS —— 常用效果（一）（纯 CSS）
HuoZhiyan 的博客
05-04 821
文章目录一、css 画圆二、css 画三角形 一、css 画圆 宽和高必须相等。 border-radius: 50% .circle{ border-radius: 50%; width: 50px; height: 50px; background-color: skyblue; } <div class="circle"></div> 二、css 画三角形 使用三个边框创建三角形。
用CSS写一个简单的幻灯片效果页面
weixin_34302561的博客
11-29 604
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【用CSS写一个简单的幻灯片效果页面】 1.背景介绍CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。...
css---学习之路（使用css实现简单的动画效果）
小牛叹气生活不易的博客
06-28 777
使用css实现简单的动画效果
简单的css实现的特效
weixin_33969116的博客
11-21 574
点赞动画 注意点： 通过一张长图，通过transition：第一个属性来确定要渐变的值，第二个值为时间，第三个值为速度大小，也可以指定步数。也可以通过算浏览器每一贞的时间来算出移动到最后一张图片的值为多少。 然后通过checkbox来判断是否点赞了。用label标签关联input，当input被checked的时候，来操作div属性。input:checked+label div。 美化io...
写一个简单的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...
HTMl与CSS简单页面页面效果实例
henry的博客
12-12 7553
效果图如下： HTML和CSS代码： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .div{ position: relative; margin-l
CSS一些简单的样式
weixin_43641202的博客
03-28 625
CSS文本样式字体属性字体类型字体大小字体风格字体粗细字体属性文本样式文本颜色水平对齐方式首行缩进和行高文本装饰垂直对齐方式 字体属性 字体属性就如之前用到的font-size属性，可以设置字体大小，除此之外还可以定义字体类型、字体是否加粗、字体风格等。 属性名 含义 示例 font-size 设置字体大小 font-size:12px; font-family 设置字体类型 font-family:“微软雅黑”; font-style 设置字体风格 font-style:itali
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、付费专栏及课程。

余额充值