022 精靈技術

時間 2019-12-06

標籤精靈技術简体版

原文原文鏈接

一：精靈技術html

1.說明服務器

　　減小服務器減小次數微信

　　一種處理背景圖片的方式學習

2.實驗微信支付

　　去王者榮耀上找圖，以下圖所示：網站

　　案例：url

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         h3 {
 8             /*棋子*/
 9             background: url(index.png) no-repeat -2px -184px;
10             width: 26px;
11             height: 26px;
12         }
13         div {
14             /*體驗專區*/
15             width: 236px;
16             height: 106px;
17             background: url(index.png) no-repeat 0 -462px;
18         }
19     </style>
20 </head>
21 <body>
22     <h3></h3>
23     ------------
24     <div></div>
25 </body>
26 </html>

　　效果：spa

二：滑動門code

1.場景htm

　　中間字數可多可少，想推拉門同樣

2.背景圖片

3.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a {
 8             margin: 50px;
 9             height: 33px;
10             display: inline-block;
11             background: url(ve.png) no-repeat;
12             color: #fff;
13             line-height: 33px;
14             padding-left: 15px;
15         }
16         span {
17             display: inline-block;
18             height: 33px;
19             background: url(ve.png) no-repeat right;
20             padding-right: 15px; 
21         }
22     </style>
23 </head>
24 <body>
25     <a href="#">
26         <span>首tttttt頁</span>
27     </a>
28 </body>
29 </html>

　　效果：

4.作一個微信的導航欄

　　微信網站：

　　案例：

　　在微信上，能夠發現一個圖片進行橫向平鋪，這個值得學習。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7         * {
  8             padding: 0;
  9             margin: 0;
 10         }
 11         /*背景圖片*/
 12         body {
 13             background: url(3S9sFMD.jpg) repeat-x;
 14         }
 15         
 16         /*container部分*/
 17         .container {
 18             width: 968px;
 19             margin: 0 auto;
 20             padding-left: 10px;
 21         }
 22 
 23         /*導航欄*/
 24         .head {
 25             height: 75px;
 26             overflow: hidden;
 27         }
 28 
 29         /*logo*/
 30         .logo {
 31             float: left;
 32             height: 44px;
 33             margin-top: 14px; 
 34         }
 35 
 36         /*導航的文字部分*/
 37         .nav {
 38             float: right;
 39             padding-top: 21px;
 40         }
 41 
 42         /*導航連接*/
 43         .nav a {
 44             height: 33px;
 45             line-height: 33px;
 46             color: #fff;
 47             text-decoration: none;
 48             background: url(ve.png) no-repeat;
 49             display: inline-block;
 50             padding-left: 15px;
 51             /*margin: 0 2px;*/
 52         }
 53 
 54         /*右邊裏面的文字和背景*/
 55         .nav span {
 56             height: 33px;
 57             background: url(ve.png) no-repeat right;
 58             padding-right: 15px;
 59             display: inline-block;
 60         }
 61         .nav li {
 62             list-style: none;
 63             float: left;
 64             margin: 5px;
 65         }
 66         /*鼠標通過，a與span都要變化*/
 67         .nav a:hover, .nav a:hover span {
 68             background-image: url(Hw.png);
 69             display: inline-block;
 70         }
 71     </style>
 72 </head>
 73 <body>
 74     <div class="container">
 75         <div class="head">
 76             <a href="#">
 77                 <img class="logo" src="K6.png" alt="">
 78             </a>
 79             <ul class="nav">
 80                 <li>
 81                     <a href="#">
 82                         <span>首頁</span>
 83                     </a>
 84                 </li>
 85                 <li>
 86                     <a href="#">
 87                         <span>幫助與反饋</span>
 88                     </a>
 89                 </li>
 90                 <li>
 91                     <a href="#">
 92                         <span>公衆平臺</span>
 93                     </a>
 94                 </li>
 95                 <li>
 96                     <a href="#">
 97                         <span>開放平臺</span>
 98                     </a>
 99                 </li>
100                 <li>
101                     <a href="#">
102                         <span>微信支付</span>
103                     </a>
104                 </li>
105                 <li>
106                     <a href="#">
107                         <span>微信廣告</span>
108                     </a>
109                 </li>
110                 <li>
111                     <a href="#">
112                         <span>企業微信</span>
113                     </a>
114                 </li>
115             </ul>
116         </div>
117     </div>
118 </body>
119 </html>

　　效果：

三：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。