html+css+javascript網頁製做技巧總結1

時間 2019-11-09

標籤 html+css+javascript html css javascript 網頁製做技巧總結欄目 JavaScript 简体版

原文原文鏈接

（一）div、元素居中中顯示方法：javascript

1.寬度要有實際值或百分比值css

2.margin:0px auto;html

文本內容居中顯示的方法：java

1.text-align:center;ide

2.line-height:實際內容高度;（須要有height值）；字體

（二）商品展現界面：spa

多數使用列表來展現。實現思路：大的盒子模型裏放ul和多個li，li向左浮動（float:left;），ul溢出隱藏（overflow:hidden;）。code

在實現展現前，需計算出每一個li的寬度+li與li之間的間隙外邊距，通常每行行尾展現的那個li不須要設置水平方向上的外邊距，以實現緊密展現，因此會用到nth-of-type(n)選擇器，將最後行尾的li的外邊距去除。orm

li裏邊放內容，通常上邊圖片，下邊是商品簡述和商品價格、購物車跳轉界面。htm

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>