帖一个简单css效果

最新推荐文章于 2023-03-26 23:12:44 发布
最新推荐文章于 2023-03-26 23:12:44 发布
阅读量843 收藏
点赞数
分类专栏： 杂项 文章标签： css div class stylesheet float function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lstup/article/details/898841
版权

 temp.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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;
}

lstup
关注
专栏目录
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
努力是为了站在万人之中，成为别人的光
07-25 4万+
今天我将使用 Wea​​ther 和 Unsplash API 以及倾斜效果和玻璃形态外观创建凉爽的天气应用程序 ⛅ Weather.io ☔⚓ 第 1 步 - 设置环境并收集所有资源 第 2 步 - 从 index.html 开始 第 3 步 - 设置索引文件的样式 第 4 步 - 获取 Weather API 和 Unsplash API 密钥 第 5 步 - 从 JavaScript 编码开始 第 6 步 - 免费托管您的网站！
这个资源是一个简单的网页示例，展示了一个会跳动的爱心效果 通过使用HTML和CSS代码，可以在浏览器中呈现出一个带有跳动爱心和"
最新发布
05-26
这个资源是一个简单的网页示例，展示了一个会跳动的爱心效果。通过使用HTML和CSS代码，可以在浏览器中呈现出一个带有跳动爱心和"我爱你"消息的页面。这个网页可以用来表达爱意，可以作为情人节、纪念日或特殊场合的...
css 特效
weixin_34332905的博客
05-15 107
css特效 介绍两种css 特效 1,模糊滤镜 先看效果: 对比一下没有滤镜效果的界面: 通过添加css 类实现: .ui-modal-mask-blur { -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2p...
css简单特效
m0_52434369的博客
07-02 109
用css实现的特效，发光的小球，可以直接复制看效果哟！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt
简单的CSS菜单特效
编织梦想
09-13 1063
<br /><style type="text/css"><br />    img<br />    {<br />     width:100%;<br />    }<br />#menu{<br />  font-weight:bold;<br />  height:1.8em;<br />  background-color:#336666;<br />  overflow:hidden;<br /> }<br /> #menu a{<br />  float:left;<br />  white
分享一个随手写的简单css效果
qq_49175846的博客
04-01 483
随手制作的简单css效果前言效果图代码HTMLCSS介绍推荐Uigradients中国传统配色网站Colordrop 前言  刚刚随手写了一个网页，添加了一点css的效果，虽然没有很惊艳，但个人认为有点意思，所以就立刻分享给大家了，有兴趣的小伙伴快来看看吧！  本页面实现了鼠标放置、离开的动态效果以及渐变色背景的效果！ 提示：本页面实现环境为Chrome浏览器。 效果图 动图测试 代码  代码分为基本的HTML与CSS，下面给出具体代码。 HTML <!DOCTYPE html> &lt
简单的Css3效果
weixin_44560796的博客
01-17 476
简单的Css3动画效果 开发工具与关键技术：DW中的Css3效果 作者：冉冉 撰写时间：2019年1月17日 Css3有三大属性，分别是：transform，transition，animation。其中transform对旋转，缩放，扭曲，位移都能提供属性支持 transition是实现动画效果的一个属性 animation是用@keyframes规则达到不断变化的效果 我要实现的是...
使用JS配合CSS实现Windows Phone中的磁贴效果
12-13
每个磁贴（tile）由两个嵌套的`div`组成，一个用于前端内容，另一个用于后端内容。例如： ```html Internet Explorer ``` 这里的`front`和`back`类分别代表磁贴的前后两面。我们可以根据需求在这些`...
17个有趣实用的CSS3悬停效果教程
01-08
简单图标悬停效果是另一个值得学习的主题，它演示了如何通过CSS `transition`和动画功能为圆形图标增添动态感。这些效果可用于导航菜单、社交分享按钮等场景，让图标不仅仅是一个静态元素。 创意按钮样式的教程则是...
cssfx非常简单的点击复制即可用的一些CSS效果
08-08
【描述】：“CSSFX是一个由Jolaleye创建的库，它提供了许多易于使用的、预封装的CSS效果。用户只需简单点击并复制代码，就能将这些效果快速应用到自己的项目中，极大地提高了开发效率。” 【详细知识点】： 1. **...
CSS3实现简单特效实例（1）
qq_38384536的博客
06-17 462
最终效果为图一变为图2. 注意：本例需要用到skew和伪类before，新手不懂的或者老手忘了的可以自行百度。
好用的css特效
qq_56992860的博客
12-17 3281
一些好用的css样式设计
css 箭头简单的样式实现效果
omg_lwf的博客
03-01 970
1.左箭头 html: <div class="a"></div> style: .a { width: .3rem; height: .3rem; border-top: 2px solid #e6e6e6; border-right: 2px solid #e6e...
【CSS特效扫盲】精选40种纯CSS特效应用实例，肝了10个晚上整理纯CSS特效（上）（附源码下载）
赏樱看雪撸代码
03-26 861
40种精选CSS特效，纯CSS特效汇总，前端页面好看的CSS特效，web高级的CSS特效 CSS阴影特效之文字立体阴影 CSS阴影特效之内切角 CSS阴影特效之条纹字 CSS阴影特效之浮雕阴影 CSS阴影特效之霓虹灯效果 CSS阴影效果之抖音logo效果 CSS滤镜特效 CSS滤镜之文字旋转效果 CSS滤镜之loading加载中小球穿梭效果 CSS滤镜之幽灵动画
一些css实用小技巧
你蠢哭我咯的博客
08-06 600
1.CSS变量实现鼠标移上效果 html &amp;amp;amp;amp;amp;amp;amp;amp;lt;button class=&amp;amp;amp;amp;amp;amp;amp;quot;btn&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;span&amp
简单的css实现的特效
weixin_33969116的博客
11-21 594
点赞动画 注意点： 通过一张长图，通过transition：第一个属性来确定要渐变的值，第二个值为时间，第三个值为速度大小，也可以指定步数。也可以通过算浏览器每一贞的时间来算出移动到最后一张图片的值为多少。 然后通过checkbox来判断是否点赞了。用label标签关联input，当input被checked的时候，来操作div属性。input:checked+label div。 美化io...
10个超漂亮的CSS 3D特效
热门推荐
Mr_王小峰的博客
08-11 5万+
在油管上看到了10个超漂亮的CSS 3D特效，遂分享给大家，有写是css+JavaScript实现的。 3D Slicebox 在3D立方体上寻找图像幻灯片？查看演示 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个，相信我！查看演示 3D条形图 将无聊的平面2D图表转换为3D图表。查看现场演示，点击下面的图片获取源代码。查看演示 ...
HTML5/CSS3五步打造逼真便签贴效果
"这篇教程将指导你如何使用HTML5和CSS3轻松地创建具有便签贴效果的网页元素。通过五个简单的步骤，你可以构建出逼真的便签样式，这些便签在现代浏览器如Safari、Chrome、Firefox和Opera中显示良好，但因IE对HTML5...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值