html+css+javascript网页制作技巧总结1
（一）div、元素居中中显示方法：
1.宽度要有实际值或百分比值
2.margin:0px auto;
文本内容居中显示的方法：
1.text-align:center;
2.line-height:实际内容高度;（需要有height值）；
（二）商品展示界面：
多数使用列表来展示。实现思路：大的盒子模型里放ul和多个li，li向左浮动（float:left;），ul溢出隐藏（overflow:hidden;）。
在实现展示前，需计算出每个li的宽度+li与li之间的间隙外边距，一般每行行尾展示的那个li不需要设置水平方向上的外边距，以实现紧密展示，所以会用到nth-of-type(n)选择器，将最后行尾的li的外边距去除。
li里边放内容，一般上边图片，下边是商品简述和商品价格、购物车跳转界面。
ccs效果：鼠标移入前正常，鼠标移入后整个li出现蒙层效果，字体颜色变化。实现思路：①用hover伪类选择器，写改变后的样式属性，谨记要想清楚给哪个元素标签添加选择器，是哪个元素标签发生变化。②JavaScript写，首先获取标签并赋予变量；然后对使用onmouseover和onmouserout分别写入鼠标移入前的样式和鼠标移入后的样式，display：none；和display：block；可以实现元素的显示消失效果；最后注意javaScript的位置，一般都写在body最后面。③用jQuery写，不同var变量，直接获取标签，mouseover和mouseout对应鼠标移入移除，$('标签名').css('属性','值'）。记得引入jQuery库。
（三）图片放大
1 <style type="text/css"> 2 .div_1{ 3 display: inline-block; 4 width: 500px; 5 height: 500px; 6 border: 1px solid blue; 7 position: relative; 8 } 9 .img1{ 10 width: 400px; 11 height: 320px; 12 position: absolute; 13 left: 0; 14 top: 0; 15 transition: all .4s; 16 cursor: pointer; 17 } 18 .img1:hover{ 19 zoom:1; 20 transform: scale(1.2); 21 } 22 .div_2{ 23 display: inline-block; 24 width: 500px; 25 height: 500px; 26 border: 1px solid yellow; 27 position: relative; 28 } 29 .img2{ 30 width: 400px; 31 height: 320px; 32 position: absolute; 33 top: 0;right: 0;bottom: 0;left: 0; 34 margin: auto; 35 transition: all .4s; 36 cursor: pointer; 37 } 38 .img2:hover{ 39 zoom:1; 40 transform: scale(1.2); 41 } 42 /*zoom:设置或检索对象的缩放比例*/ 43 /*zoom缩放会将元素保持在左上角，而scale默认是中间位置*/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="div_1"> 9 <img class="img1" src="img/one4.jpg" alt=""> 10 </div> 11 <div class="div_2"> 12 <img class="img2" src="img/one5.jpg" alt=""> 13 </div> 14 </body> 15 </html>
关键知识：transform: scale(倍数)：实现元素的缩放，1为元素值，一般与hover配合使用写css，或者与mouseover和mouseout配合使用写javascript或者jQuery库；
zoom:设置或检索对象的缩放比例,zoom缩放会将元素保持在左上角，而scale默认是中间位置.
（四）矩形宽四角变椭圆形（input框）
1.设置px值
①根据元素标签实际的宽度计算出需要的px值
②宽度像素的20%左右值，border-radius:(box的宽度*20%)px;
2.设置%值
①border-radius：20%；
（五）正方形盒子变圆形
1.宽高一样
2.border-radius：50%；
3.border-radius：宽的一半px；
（六）css通用样式设置
body,p,h1,h2,h3,h4,h5,h6{margin:0;}
ul,ol{list-style:none;margin:0;padding:0;}
（七）css参考样式集合
一.字体属性：（font）
1.大小{font-size:px}
2.样式{font-style:oblique;}(偏斜体)italic;（斜体）normal;（正常）
3.粗细{font-weight:bold;}（粗体）lighter;（细体）normal（正常）
4.行高{font-height:normal}
5.修饰{text-decoration:underline;}（下划线）overline;（上划线）line-through;（删除线）blink;（闪烁）
二.常用字体：（font-family）
三.
（八）切换类名实现样式的更换jQuery和显示隐藏
$('#two').toggleClass('anotherClass')//重复切换anotherClass
jQuery中 toggle和sildeToggle方法都能实现对一个元素的显示和隐藏，区别是：
toggle:动态效果为从右至左。横向动作
slideToggle:动态效果为从下至上。竖向动作。（由下至上收缩）
（九）两端对齐（表单文字）
1 div.justify 2 { 3 text-align: justify; width:200px; font-size:15px; color:red; 4 border:1px solid blue; height:18px; 5 } 6 div.justify > span 7 { 8 display: inline-block /* Opera */; 9 padding-left: 100%; 10 } 11 HTML： 12 13 <div class="justify">hello, text justify.</div><br/> 14 <div class="justify"> hello, text justify.<span></span></div><br/> 15 <div class="justify">中 文 两 端 对 齐</div><br/> 16 <div class="justify">中 文 两 端 对 齐<span></span></div>
只有最后一个完成两端对齐。
除了要在块级元素加text-align:justify样式外，还需要在里面加一个空的span元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。
