使用div + css 实现Panel效果

最新推荐文章于 2024-03-01 17:19:57 发布
最新推荐文章于 2024-03-01 17:19:57 发布
阅读量1w 收藏 1
点赞数 1
分类专栏： 04 Css 01 Html 文章标签： css div xhtml class html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS定位一个栏目带标题的</title>
<!--
外面的框子为：
宽度，高度，边框 实线/虚线 颜色，margin,padding.


里面的水平线：
高度，字体大小，背景色，字行距，左右行距，margin,padding


# 为 id
. 为 class
这里是类的派生. 被conter 层包围的 hr 标签.
-->
<style>
.conter
{
width:190px;
height:200px;
border:1px solid #000;
margin:0px auto;
padding:0px;
}
.conter h1
{
height:20px;
font-size:12px;
background:#CC6600;
line-height:20px;
text-indent:5px;
margin-top:0px;
}
</style>
</head>


<body>
<div class="conter"><h1>kalision</h1>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
</html>

passport_daizi
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css实现3D图像轮转效果
12-30
本文实例为大家分享了纯css实现3D图像轮转效果的具体代码，供大家参考，具体内容如下 首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。 ...
让一个div拖动和让一个panel拖动加拉大拉小
weixin_30826095的博客
12-06 131
一、让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery：鼠...
css抽屉效果
体验新模板
07-04 2087
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
使用css的transition属性实现抽屉功能
最新发布
wzy_PROTEIN的博客
03-01 808
使用css手写一个抽屉，并且不能遮挡住原来的页面1、这里主要使用了transition属性，transition属性是css3中的一个重要属性，可以为一个元素在不同样式之间变化添加补间动画。相较于传统的js实现的动画，transition属性实现的动画效果更细腻而且内存开销小。（1）所有数值属性都可以参与过度，比如width,height,left,top,border-radius。2、transition属性有4个基本要素，分别是要过度的属性，动画时长，动画演变速度，延迟时间。
实现 抽屉效果 css3
qq_41429765的博客
11-29 789
【代码】实现 抽屉效果 css3。
css实现抽屉动画 div显示隐藏的过渡效果
qq_30607437的博客
09-08 4209
css抽屉效果
CSS实现抽屉的效果
毛豆的博客
02-21 878
【代码】CSS实现抽屉的效果。
css特效之汉堡按钮抽屉功能
前端新视界
10-30 163
使用HTML+CSS实现汉堡按钮抽屉功能
DIV经典滑动收缩与展开效果【参考Ext效果】
10-01
见过Ext的panel滑动隐藏效果（点击panel右上角小三角图标实现的那个效果）吗，该功能是通过深入解读Ext源码后，实现的div滑动隐藏效果，代码简洁，极为经典，方便追求效果的前台爱好者们研究。 想要的快来下，5分...
jQuery实现Tab选项卡切换效果简单演示
12-28
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示，完全是自己的思考实现过程，分享给大家供大家参考。具体如下： 起初我Html代码架子是这样的： <div class=tabs> <li class=acss data-box=#panel-1>...
css-dsl:生成用于scalatags和scala-js-reactCSS框架的DSL
03-22
css-dsl ：用于CSS框架的DSL 而不是像这样的字符串式，嘈杂的代码， < .div( ^.cls : = ( " panel hidden-xs panel- " + ( if (success) " success " else " default " )), < .div( ^.cls : = " panel-...
lobipanel - 可拖拽位置和大小的浮动panel
01-17
纯css和js的可拖拽改变位置和大小的浮动div，纯css和js的可拖拽改变位置和大小的浮动div
前端基础之《Bootstrap（10）—CSS组件_媒体对象、列表组、面板》
csj50的专栏
11-10 564
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。3、回复就是拿一份media搁到p标签下面。.media-heading：右边里面的。.media-object：左边里面的。.media-left：左边的。.media-body：右边的。发表回复、评论的场景。
弹出一个Panel(DIV),实例代码
02-29 1074
aspx Untitled Page function pageLoad() { var queryDetail = $get(""); if (queryDetail != null) { // call the savePanelPosition when the panel is moved
深入理解BootStrap -- 面板(panel)17
热门推荐
z742182637的博客
01-07 2万+
1、面板 面板（Panels）是Bootstrap框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码： ☑ Less版本：对应的源码文件是 panels.less ☑ Sass版本：对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap：对应bootstrap.css文件第4995行～第5302行
css实现手风琴效果代码
09-13
### 回答1： 使用 CSS 实现手风琴效果的代码可以让元素按照预定义的动画效果缩放，从而实现手风琴效果。下面是一段实现手风琴效果的代码：```css .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }.active, .accordion:hover { background-color: #ccc; }.panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } ``` ### 回答2： CSS实现手风琴效果主要是通过利用伪类和过渡属性来实现的。以下是一个基本的手风琴效果代码示例： HTML代码： ```html <div class="accordion"> <div class="accordion-item"> <div class="accordion-header">标题1</div> <div class="accordion-content">内容1</div> </div> <div class="accordion-item"> <div class="accordion-header">标题2</div> <div class="accordion-content">内容2</div> </div> <div class="accordion-item"> <div class="accordion-header">标题3</div> <div class="accordion-content">内容3</div> </div> </div> ``` CSS代码： ```css .accordion-item { overflow: hidden; } .accordion-header { padding: 10px; background-color: #eaeaea; cursor: pointer; } .accordion-content { padding: 10px; background-color: #f9f9f9; max-height: 0; transition: max-height 0.3s ease; } .accordion-item.active .accordion-content { max-height: 500px; /* 根据实际需求设置一个较大的高度值 */ } ``` JavaScript代码（可选，用于控制手风琴的展开和收缩）： ```javascript let accordionItems = document.querySelectorAll('.accordion-item'); accordionItems.forEach(item => { let header = item.querySelector('.accordion-header'); header.addEventListener('click', () => { item.classList.toggle('active'); }); }); ``` 以上代码中，通过CSS设置了手风琴的基本样式，包括标题和内容的样式。使用`overflow: hidden;`隐藏内容的溢出部分，通过给点击的标题元素的祖先元素（即`.accordion-item`）添加`.active`类，来切换内容的`max-height`属性，从而实现展开和收缩的效果。 通过JavaScript代码，给每个手风琴的标题元素添加了点击事件，点击时切换`.active`类，实现手风琴的展开和收缩。 ### 回答3： 手风琴效果是一种常见的网页交互效果，通过CSS的样式调整和动画效果来实现。下面是一个简单的示例代码： HTML代码： ```html <div class="accordion"> <div class="item"> <div class="title">标题1</div> <div class="content">内容1</div> </div> <div class="item"> <div class="title">标题2</div> <div class="content">内容2</div> </div> <div class="item"> <div class="title">标题3</div> <div class="content">内容3</div> </div> </div> ``` CSS代码： ```css .accordion { width: 300px; } .item { border: 1px solid #ccc; margin-bottom: 10px; } .title { background-color: #f5f5f5; padding: 10px; cursor: pointer; } .content { padding: 10px; display: none; } .active .title { background-color: #e0e0e0; } .active .content { display: block; animation: expand 0.3s ease-in-out; } @keyframes expand { from { max-height: 0; overflow: hidden; } to { max-height: 500px; overflow: hidden; } } ``` JavaScript代码（可选）： ```javascript document.querySelectorAll('.accordion .item').forEach(item => { item.addEventListener('click', function() { this.classList.toggle('active'); }); }); ``` 以上代码实现了一个简单的手风琴效果。当点击标题时，展开对应的内容。通过CSS设置`.active`类的样式，实现标题和内容的显示和隐藏。通过`@keyframes`定义`expand`动画，实现内容展开的动画效果。JavaScript部分用于点击标题时切换`.active`类的状态，实现手风琴效果的交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值