开发工具与关键技术：DW与CSS + JS + CSS3
作者：刘华叶
撰写时间：2019年1月18日
今年是我第一次接触IT，学校教了很多东西，我也从中受益匪浅，以前觉得IT很无聊，但是自从接触了这个行业后，才发现IT是多么的神奇，能够做出很多东西，下面我就用所学知识做了一个展开收起网页，跟大家分享一下。
一．HTML代码如下：
首先用一个大盒子把里面的内容包起来，里面放入dl列表标签，定义列表，然后在放入dt定义列表标题，在放入dd标签定义列表内容，里面在套个a标签，把内容放进去 。
然后内容打完之后，在用一个div盒子，里面放入p标签，在设置一个展开收起按钮，分别给它们设置一个id，收起按钮之间放入几个空格键，然后引入JS，HTML代码就搞定了，再去设置CSS样式。
二．CSS代码如下：
首先，给最大的盒子设置一个宽度，在让它居中，内边距为0，在设置里面所有的标签都去掉下划线，然后在给下面的那些类和标签设置属性。
CSS样式设置完后，在下面设置一个CSS3的动画效果，动画效果融入到里面可以让整个网页显得非常有特色。
三.CSS3代码如下：
这个CSS3的动画我用的是keyframes被称为关键帧, 帧——就是动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
在一个“@keyframes”中的样式规则可以由多个百分比构成的。
在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，
从而达到一种在不断变化的效果。
四．JS代码如下：
这是一个JS样式，首先获取展开收起的id，然后设置它们的高度，在设置一个点击事件改变它们的高度。
代码打完之后，网页展开之前就是这样。
展开之后的效果，里面的内容在不断的变换颜色，我的网页到这里就完成了，希望对大家能够有所帮助。