tft每日頭條

 > 科技

 > 小程序頁面制作課程

小程序頁面制作課程

科技 更新时间:2025-02-05 21:44:58

  目錄:

  了解前端---------當前頁人人都能學前端-HTML-1 Web前端工程師對于現在的市場來說絕對是最熱門的職業,幾乎所有的含有互聯網研發業務的都需要這一職業。對于web1.0時代的我們前端來說,那時候隻是一個“切圖仔”,現在的我雖然沒有經曆過那個時代,但隻要是對這一職業有過一點了解的都基本的能夠知道那個時候前端的具體工作。話不多說了我就來談談現在的前端能幹啥?

  小程序頁面制作課程(小猿帶小白學網頁)(1)

  一張網頁的構成

  能做什麼:

  (注:在這裡我就隻做一些簡單的介紹和一些所用到的技術,後面會一直寫下去從入門的到企業裡面的項目實戰,想學的點一下關注即可)

  1 網頁開發

  2 手機app開發

  3 微信小程序、支付寶小程序、百度小程序、字節跳動小程序、QQ小程序……

  4 Ai(人工智能)

  5 VR(虛拟現實)

  6 桌面應用(電腦軟件)

  為什麼要列這麼多呢,對于開發了解的人都知道就移動app而言開發一款軟件需要IOS和安卓兩個團隊進行開發都是不同的語言開發,而前端隻需要一個前端團隊開發一套代碼兩端就能同時使用,還有小程序開發一套代碼可以在所有平台的小程序上使用,這個需要學習前端的框架,後面再詳細的說技術。

  第一張網頁:

  說到網頁就來說一下一張網頁的基本組成,一張網頁由三個部分組成:

  結構(html):決定網頁的結構和内容( “是什麼”)

  表現(css): 設定網頁的表現樣式( “什麼樣子”)

  行為(JavaScript):控制網頁的行為( “做什麼”)

  下面将用一張頭條的頁面做一下介紹:

  小程序頁面制作課程(小猿帶小白學網頁)(2)

  案例圖1

  從上面案例圖1中可以看到由html css這兩個部分就能得到一張網頁,我先來介紹html和css這兩個方面js入門比這兩個要難些,後面再做介紹,從這張圖可以看到html就是一個盒子一個盒子裡面又放入其他盒子,而css則是給 盒子添加樣式如顔色大小等,如案例圖2在樣式對于的盒子中添加了一個顔色頁面上所對應的元素就變成相應 的顔色,

  小程序頁面制作課程(小猿帶小白學網頁)(3)

  案例圖2

  下面開始簡單的寫一張頁面:

  先新建一個文本文件,把下面代碼複制進去,然後把文件名後面有個‘.’的txt改成html,雙擊文件打開就可以查看到網頁信息,你可以試着替換文件裡面的文字還有到網上找一張好看的圖片的路徑。明天具體介紹怎麼去寫頁面哈

  小程序頁面制作課程(小猿帶小白學網頁)(4)

  表白頁面

  代碼:

  !DOCTYPE html

  html lang=

  meta charset=UTF-8

  meta name=viewport content=width=device-width, initial-scale=1.0

  title情愛的520/title

  /head

  style

  *{

  padding: 0;

  margin: 0;

  }

  html,body{

  width: 100%;

  height: 100%;

  }

  .box{

  position: relative;

  width: 100%;

  height: 100%;

  }

  .text {

  position: absolute;

  font-size: 30px;

  color: black;

  left: 50px;

  top: 100px;

  opacity: .2;

  }

  /style

  div class=box

  img src=http://pic1.win4000.com/wallpaper/5/57a843210450b.jpg style=width: 100%;height: 100%;

  p class=text執子之手 與子偕老

  /body

  /html

  ,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved