荣耀滑盖手机滑盖容易坏吗
View demo 查看演示下载源
In today’swe’ll beathat, when , will slide to the top of theandthebyit in. The idea is to avoid that the user has tothearea into place. We’ll also add some nice CSS3for the arrow toand towhen we click on an item. Thewill be ,that it will have awidthto thesize.
在今天的教程中，我们将创建一个简单的响应式手风琴，将其打开时将滑动到视口的顶部，并通过淡入显示内容 。该想法是避免用户必须将内容区域滚动到适当位置 。我们还将添加一些不错CSS3过渡，以便当我们单击某个项目时箭头可以显示并旋转 。手风琴将很灵活，这意味着它的液体宽度可根据屏幕尺寸进行调整 。
Theis by ; check out his.
精美的时装摄影是雷安德拍摄的； 查看他的。
标记 (The )
The HTMLwillof awith the class and ID st- and anlist. The list items will have a linkwhich will serve as the item title and aarea that is. The span with the class st-arrow will be theon the right side that we will makewhen we hover over its , the link .
HTML结构将由具有类和ID st-的包装器和无序列表组成 。列表项将具有一个链接元素(用作项目标题)和一个最初被隐藏的内容区域 。当将鼠标悬停在其父级link元素上时，带有st-arrow类的范围将是右侧的小指示器 。

• Item TitleOpen or CloseSome content

• ...

Let’s take a look at the style.
让我们看一下样式 。
CSS (The CSS)
First, we will style the main . We will give it a width of 100we want it toto the width of its. If you don’t have one, just use ahere (if you want it to be ). Thein the demo has awidth of 800and a width of 90%. The st- will have awidth of 270 :
首先，我们将样式化主包装器 。我们将其宽度设置为100，因为我们希望它可以调整为其周围包装纸的宽度 。如果没有，请在此处使用适当的百分比(如果您希望它是流动的) 。演示中的周围包装器的最大宽度为800像素，宽度为90％ 。st手风琴的最小宽度为270像素：
.st-accordion{width:100%;min-width:270px;margin: 0 auto;}
that we have some kind of reset css that willandfromlists etc., wethe style for each list . We’ll set anof 100which istheof the linkand thewill be , so we won’t see the . When we open the item, we’llitsin order tothe . Thethat we areto thewilla nicethe items.
假设我们有某种重置CSS，它将删除无序列表等中的填充和边距，我们为每个列表元素定义样式 。我们将设置100像素的初始高度，该高度基本上是link元素的高度，溢出将被隐藏，因此我们看不到内容 。打开项目时，我们将对其高度进行动画处理以显示内容 。我们为元素提供的边框将在各个项目之间创建一个精美的雕刻分隔 。
.st-accordion ul li{height: 100px;border-bottom: 1px solid #c7deef;border-top:1px solid #fff;overflow: hidden;}

文章插图
The first itemnot have a top :
第一项不应有顶部边框：
.st-accordion ul li:first-child{border-top:none;}
We’ll add a colorto the linkwhich willa niceon hover. The line-be the same like theof the list :
我们将向link元素添加颜色过渡，这将对悬停产生很好的效果 。line-应该与list元素的初始高度相同：
.st-accordion ul li > a{font-family: 'Josefin Slab',Georgia, serif;text-shadow: 1px 1px 1px #fff;font-size: 46px;display: block;position: relative;line-height: 100px;outline:none;-webkit-transition:color 0.2s ease-in-out;-moz-transition:color 0.2s ease-in-out;-o-transition:color 0.2s ease-in-out;-ms-transition:color 0.2s ease-in-out;transition:color 0.2s ease-in-out;}.st-accordion ul li > a:hover{color: #1693eb;}

• 上一页
• 1
• 2
• 3
• 下一页

• oppor17手机像素
• nova11pro是5g手机吗
• miui13和哪个手机一块发布
• 天翼腾讯视频手机：一次不错的试错
• magic5支持无线充电吗
• iqoo7算什么档次的手机
• ionic 初级开发手机端移动应用视频课程-陶国荣-专题视频课程
• 可恶的手机增值业务！！
• 苹果手机键盘拼音变成数字怎么办
• 什么省电软件最省电,手机什么省电软件好最省电