一、 主要知识点：html布局，css变换，js事件触发
二.CSS属性记忆：
CSS规则：子元素会继承父元素的布局属性。不专门改变子元素的属性，其会跟随父元素。
|
功能 |
语句 |
||
|
margin |
外边距 |
||
|
Padding |
内边距 |
||
|
关于文本的水平居中为： |
text-align: center; |
||
|
关于文本的垂直居中： |
使行高等于背景元素的高度,一般用于单行固定,不易维护， |
Iine-height:元素高; |
|
|
Padding设置内边距，使其自动撑开，建议使用这个 |
padding: 15px 0; |
||
|
怪异魔盒 |
box-sizing: border-box; 可以保证元素大小不会随着padding与margin变化。只会向内占用自己的空间。 CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：
|
||
|
Position |
定位属性，用于h3上的3角形的实现，此次小3角形实现需要用到：（父：position： relative；相对位置），（子：position： absolute;绝对位置）。 |
||
|
transform |
旋转属性 transform: rotate(0deg) |
||
|
transition |
动画过渡效果，添加上此属性，样式变换会有渐变效果 transition: 1s; |
||
|
.classname:hover{ } |
鼠标选中 例子：.wrap:hover//鼠标选中 { background-color: #67c33f;//鼠标选中后变色 cursor: pointer; //鼠标显示形状为小手
} |
||
|
overflow |
溢出属性，用于div调整高度或宽度时溢出部分的属性， 例子：overflow: hidden; 溢出隐藏 |
||
|
border-bottom: 1px solid #42495d; |
下边框为1px ，颜色是#42495d |
||
|
属性都是选定类名，在 css样式中使用 例子： .hide{<!--hide是类名--> overflow: hidden; height: 0; transition: 1s; } |
|||
三、javascript元素的获取，与事件的触发，自定义原素
注意：js是自上向下执行的程序，要注意用户触发事件对其的影响，比如for循环，会跳过用户触发事件执行循环，所以要用自定义属性下表。
源码：
1 <!doctype html> 2 3 <html> 4 <head> 5 <meta charset='utf-8'> 6 <meta name="keywords" content="侧边栏下拉"> 7 <meta name="description" content="侧边栏下拉手风琴"> 8 <title>第一课</title> 9 <style> 10 *{/*通配符不建议使用*/ 11 margin: 0; 12 padding: 0; 13 } 14 html,body{ 15 height: 100%; 16 } 17 .wrap{ 18 width: 260px; 19 height: 100%; 20 background-color:#363a45; 21 text-align: center; 22 color: #fff; 23 } 24 .head{ 25 26 padding: 20px 0; 27 background-color: #44495a; 28 29 font-size: 20px; 30 } 31 .nav{ 32 width: 250px; 33 margin: 10px 5px; 34 } 35 .nav-list{ 36 margin-bottom: 5px; 37 } 38 .nav-list h3{ 39 position: relative;/*相对位置*/ 40 padding: 15px 0; 41 background-color: #3889d4; 42 43 transition: 1s;/*动画过渡效果*/ 44 45 font-size: 14px; 46 47 } 48 .nav-list h3.on{/*给h3添加类名on用于效果变化提高性能 */ 49 background-color: #393c4a; 50 } 51 .nav-list i{ 52 position: absolute;/*绝对位置*/ 53 top: 15px; /*位置*/ 54 right: 10px; /*位置*/ 55 56 border: 8px solid transparent;/*transparent 全透明*/ /*画出3角形1*/ 57 border-left-color: #fff;/*左边白色*/ /*画出3角形2*/ 58 59 transform-origin: 1px 8px;/*旋转基点（x，y）*/ 60 transform: rotate(0deg);/*旋转角度*/ 61 62 transition: 1s;/*动画过渡效果*/ 63 64 } 65 .nav-list i.on{ 66 transform: rotate(90deg);/*旋转角度*/ 67 } 68 .hide{ 69 overflow: hidden;/*隐藏溢出部分*/ 70 height: 0; 71 transition: 1s;/*动画过渡效果*/ 72 } 73 .hide h5{ 74 padding: 10px 0; 75 ovewflow 76 background-color: #282c3a; 77 border-bottom:1px solid #42495d; 78 79 } 80 81 </style> 82 </head> 83 <body> 84 <div class="wrap"> 85 <div class="head">国内各地景点</div> 86 <div class="nav"> 87 <ul> 88 <li class="nav-list"> 89 <h3>北京的景点 90 <i></i> 91 </h3> 92 <div class="hide"> 93 <h5>故宫</h5> 94 <h5>天坛</h5> 95 <h5>颐和园</h5> 96 <h5>长城</h5> 97 <h5>天坛公园</h5> 98 <h5>人民大会堂</h5> 99 </div> 100 </li> 101 <li class="nav-list"> 102 <h3>南京的景点 103 <i></i> 104 </h3> 105 <div class="hide"> 106 <h5>故宫</h5> 107 <h5>天坛</h5> 108 <h5>颐和园</h5> 109 <h5>长城</h5> 110 <h5>天坛公园</h5> 111 <h5>人民大会堂</h5> 112 </div> 113 </li> 114 </ul> 115 </div> 116 </div> 117 118 <script> 119 var oList=document.querySelectorAll('.nav-list h3'), 120 oHide=document.querySelectorAll('.hide'), 121 oIcon=document.querySelectorAll('.nav-list i');//获取css中的元素 122 123 124 /*oList[0].onclick=function(){//点击事件->执行函数 125 oHide[0].style.height='245px';//改变hide高度 126 oList[0].style.backgroundColor= '#393c4a',//改变颜色 127 oIcon[0].style.transform='rotate(90deg)';//修改角度 注释原因使用添加类名on代替在js中直接调用属性 128 ，其变化都在css中，就js只是添加一个类名这样就提高了性能 129 130 oHide[0].style.height='245px';//改变hide高度 131 oList[0].className= 'on',//改变颜色 132 oIcon[0].className= 'on';//修改角度 133 134 }*/ 135 136 137 lastIdnex=0;//上一次点击下标 138 139 for(var i=0;i<oList.length;i++) 140 { 141 142 oList[i].index=i;//自定义属性保存下标 143 144 oList[i].isClick=false;//没有被点击 145 146 oList[i].onclick=function() {//点击事件->执行函数 147 //清除上一次下标 148 oHide[lastIdnex].style.height='0';//改变hide高度 149 oList[lastIdnex].className= '';//改变颜色 150 oIcon[lastIdnex].className= '';//修改角度 151 152 if(this.isClick){//被点了 153 this.isClick=false;//开关变化 154 } 155 else 156 { 157 //设置当前下标 158 oHide[this.index].style.height='245px';//改变hide高度 159 oList[this.index].className= 'on';//改变颜色 160 oIcon[this.index].className= 'on';//修改角度 161 162 oList[lastIdnex].isClick=false;//清除上一次开关 163 oList[this.index].isClick=true;//开关变化 164 lastIdnex=this.index;//保存当前下标 165 166 } 167 } 168 169 170 } 171 172 173 </script> 174 175 <body> 176 177 </html>
刚开始使用博客园，还有好多不会用，只是单纯的记录自己记忆到的知识点，可能有许多不恰当的地方。