小程序页面制作课程(小猿带小白学网页)

目录:

  1. 了解前端---------当前页
  2. 人人都能学前端-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="en">

<head>

<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>

<body>

<div class="box">

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

<p class="text">执子之手 与子偕老</p>

</div>

</body>

</html>

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页