html+css+javascript网页制作技巧总结1

逃离我推掉我的手 2021-11-02 13:42 384阅读 0赞

（一）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元素，并应用样式。另外，对于中文还必须用空格隔开汉字，否则也没有两端对齐的效果。

转载于:https://www.cnblogs.com/xiaochen-cmd-97/p/11294241.html