【web 开发】网页设计: 打造属于你自己的网页名片 (学HTML CSS网页制作) | 专门为初学者准备的编程入门 开启网赚之旅 | 网页编程系列 第02集

https://www.youtube.com/watch?v=lWuYnTd1DL8 

教你使用HTML CSS制作专属网页版名片。零基础的同学也可以快速上手网页设计。 这期视频会专注怎么使用IMG标签插入图片和A标签生成超链接(Hyperlink) , 我们也会使用新的排版方式去居中内容，点击视频马上观看！

你想学习怎么制作网页？想拥有属于自己的网站？不论你是学生，白领又或者是追梦者，欢迎你加入这个专门为零基础同学们打造的免费网页编程教程。 我们会在教程里一起动手写代码，让你以最快的速度上手网页编程。在教程里我们会学到HTML, CSS和JavaScript。这是制作网页的必备工具。除此之外，我们也会学到怎么使用代码编辑器(Code Editor)去编写代码。 记得要关注频道，那样你就不会错过类似这样的网页编程教程了。 你的梦想从这里开始！

________________________________________________ ☕ ☕ ☕ 给我买杯咖啡提提神吧！ ✅ https://bit.ly/3kCOpFK ✅ (免费) JavaScript教程系列： https://bit.ly/310cHle ✅ 更多精彩的JavaScript入门课程： http://bit.ly/js-for-beginners ✅ JavaScript相关书籍： 1：The Definitive Guide: Master the World's Most-Used Programming Language - 7th Edition (强烈推荐👍) https://amzn.to/31s30uH ✅（通告）”Codetisan 自学编程社区“ 已经正式开通啦，三人行必有我师，同学们再也不用独自一人闷头自学编程了，快去社区里和其他小伙伴们互动吧！ ▶︎ https://bit.ly/2AHylzN 🔆订阅我的YouTube频道，让你从一个0基础编程的菜鸟快速成为编程大师！🔆 http://bit.ly/2TBkXo1 ▶︎ 文轩解码更精彩的平台 ◀︎ ‣‣ Blogger ：https://bit.ly/2yMz0PC ‣‣ Twitter: https://bit.ly/2R74FS1 ‣‣ Facebook: https://bit.ly/35crcmz ‣‣ Instagram: https://bit.ly/2KH6Wjw ‣‣ Github: https://bit.ly/2SHtsx4
#怎么制作网页 #学html #编程入门



文字版内容：

大家好
我是文轩
欢迎收看文轩解码
今天我们来学习怎么制作
一个网页版的名片
来看看这个最终的效果图
名片会分成上中下三个部分
在顶部我们会显示头像 名字和联系方式
中间会放一些社交网络的连接
还有底部放入企业名称和职位
我们还会插入一个背景图
在上一期的视频
我们使用了css的top
left和transform
那主体内容居中
这一集我们换另外一种方式
一种更简单易懂的方式
让主体内容居中
这个网页名片只需要用到
html和css
代码编辑器我会选择visual studio code
还没安装的同学可以点击描述栏里的
下载链接去下载
我给同学们制造了一个模板
模板的就这一节视频需要用到的所有资源
下载链接已经放在描述栏里了
这是模板的目录
有一个css的文件夹
用来存放css文档
一个image文件夹用来
存放头像和背景图
还有一个index.html文档
我们主要会编辑这个index.html
和css文件夹里的style.css
好吧 那现在我们开始
首先我们先打开index.html
还有css文件夹里的style.css
我们先编辑index.html
布局一下我们的主体内容
然后才编辑style.css
来美化主题内容
我们在index.html
先编写三个最基本的标签
html, head 和 body
这是一个网页最基本的结构
那接下来我们要为index.html
添加一个css的外部资源
我们可以在 head tag 里使用link tag
去关联这个style.css
rel这边我会输入
stylesheet
因为这一次我们要关联的
style.css其实它
是一个css stylesheet
然后在href这边我们就要输入
style.css的路径 (path)
style.css在css文件夹里边
所以我们这边需要输入css
然后style.css
关闭这个 link tag
 head tag 暂时就这些
现在我们开始编辑body tag
刚才我们看到的效果图一共
分为上中下三个部分
所以我们至少需要使用3个div tag
却显示这三个部分的内容
我们会把这三个div归类到一个parent div里
方便我们等一下统一管理
那我们现在在body tag里添加这个
parent div
我们在这边添加一个class
把它命名main content
我们会在这个main content
里添3个div
分别为top section
middle section
和bottom section
我们先添加第一个div
这个class我们命名
top section
然后第二个div
我们命名middle
section
然后第三个div
class是我们命名
bottom section
我们会在top section
里显示头像、名字、邮箱地址
还有手机号
然后在middle section
里我们会显示社交网络的图标
然后在bottom section里
我们显示了企业的名字
还有职位
那现在我们来扩展一下这三个div的内容
我们在top section里要
显示一个头像
我们可以透过img tag插入图片
所以在这边我们可以
透过img tag
去实现
然后在src这边我们需要
提供头像一个路径
我们的头像是保存在images
的文件夹里
所以这边
是要输入images
然后我们的头像叫elon.jpg
关闭这个tag
我们还需要显示名字
我们就用p tag
去显示
Elon Musk
我们给这个p tag添加
一个class
叫它name
那接下来我们要用p tag去显示
邮箱
elon@musk.com
我们也给这个添加一个class
叫它email
我接下来我们要显示手机号
这边也要给它添加一个class
叫它mobile
我们保存
然后预览一下
打开index.html
我们的头像 名字
还有邮箱地址
手机号都正确显示了
我们先不管这个美化的问题啊
因为现在我们编写的html代码
主要是关于内容的布局
top section的内容基本上就是这一些
那现在我们去扩展一下middle section的内容
在middle section
里我们只需要添加facebook
和twitter的图标就可以
了
我们会把这两个图标变成超链接hyperlink
让用户可以点击图标直接跳到facebook
或者是twitter的页面
这些图标我们会使用i tag显示
我们在这边添加i tag
然后给这个i tag添加class
这个有点长
我们编写这一行就能直接显示
facebook的图标
我把facebook
换成twitter
它就能直接显示twitter的图标
我们是font awesome的第三方library
去显示这些图标的
所以我们需要在head tag 里添加font awesome
的css
和关联style.css一样
我们也会使用link tag
在rel这边我们也是输入stylesheet
然后在href这边我们需要提供font awesome library
的css
这就是它的css 
我们关闭
那现在我们保存刷新一下页面
预览一下它的效果
看看这个
facebook twitter
的图标会不会显示
这两个图标都正常显示
好的
那现在我们要把这两个图标变成
一个可点击的图标
我们可以使用a tag去实现
我们可以在这个i tag
的外围添加这个a tag
那这个i tag移到a tag面
我们需要在a tag里添加href
告诉浏览器
当用户在点击这个超链接的时候
会跳到哪一个页面
在这边添加href
这里我会输入facebook的url
然后在twitter这个链接
要添加https
www.twitter.com
elon musk
那现在我们来测试一下这两个图标
再点击了之后会不会跳到指定的页面
现在来的保存
刷新
这个facebook可以
我们来测试一下twitter
也能跳到twitter的页面
好的 那接下来我们去扩展一下bottom section
在bottom section
我们需要两个div分别显示两个企业
的名字
那第一个div我们是用来显示tesla
和ceo
我们把ceo放在span tag
方便等一下微调ceo这个字
第二个div
我们是用来显示spacex
ceo
ceo也是放在span tag
在这两个div的中间
我们需要添加一条间隔线
把这两个div分开
这条间隔是我们可以用一个div去实现
再添加一个class
把它命名border
我们保存刷新 看看效果
企业名字和职位都成功显示了
基本上我们的html代码就算完成了
那下一步我们去编写css代码
美化美化一下我们的页面
那现在我们切换到style.css的源代码
我先把这个tab拉到下面
方便等一下我们预览index.html
那现在我们设置一下body的css
先把它的字体调成roboto
接下来我要把主体内容水平垂直居中
我们想的这个名片显示在页面的正中间
上一集我们用了top left
和transform来居中内容
这集我们要换另外一种方式
我们将会采用flex
排版方式去居中内容
这种方法会比较简单易懂
那我们先把那个display
设置成flex
然后把align-items
设置成center
现在我们预览一下
我先把它
缩小
现在这个名片在垂直方向是居中了
但是在水平方向还没有
那接下来我们设置一下他的justify-content
把它调成center
预览一下
好的
现在名片是处于水平垂直居中的状态了
那下一步我们要设置一下main-content div里css
首先我们现在文字居中
我们要调一下main content class里的
text-align
把它调成center
现在这些文字居中了
接下来我们要为这个名片
的外框加一个阴影
那样的话我们就要调一下
box-shadow
0 0 10px
然后颜色是黑色
我们预览一下
这个阴影出现了
接下来我们将为我们的
页面添加一个背景图
 我们需要在body里设置background-image
我们需要在这里提供一个背景图的路径
dot dot
我们的背景图时保存在
image文件夹里的
所以这边是输入images
背景图叫launching.jpg
我们还要调一下background-size
把它调去cover
那我们预览一下
好的背景图出现了
名片外部的css置就差不多了
那现在我们开始调名片里面的css
接下来我们要调的是top section
里所有的css
我们先把top section里的background-color
换成紫色
这边要设置background-color
把它换去紫色
然后把padding给调一下
50px
字体颜色也要把它变成白色
接下来我们要把这个正方形
的头像换成圆形
那样的话我们就要针对top section里的image
做一些调整
我们今天把它的width调成50%
然后把border-radius
也调成50%
我们预览一下
不错
这个头像从正方形变成了圆形
背景颜色也变成了紫色
那接下来我们要把这三行字
的间隔稍微调的近一点
这里我们就需要针对top section
里的p去做一些设置
我们设置一下它的margin
预览一下
这样就稍微好看一点了
接下来我们要把这个名字的
大小稍微变大一点
我们把它调成30px
这次我们是针对top section
里的name class
我们把它的font-size
调去30px
我把它变成大写
预览一下
这个名字和头像的距离有点近
我们调一下它的margin-top
20px
这个距离就可以了
那接下来我们还要把邮箱地址和
手机号码的字体稍微调大一点
这次我们是针对top section
里的email class
和mobile class
做调整
要注意一下这里有个逗号
因为我们这一次是针对email class
和mobile class
所以中间这边是有个逗号
我们把font-size调成18px
我们预览一下
这些字体的颜色和大小都调好了
那接下来我们就要继续调middle section里的css
我们先把middle和bottom section的
background-color
调成白色
middle section
和
dot
bottom section
注意 这边有个逗号
我们把它的background-color调成白色
我们预览一下
那接下来我们要把middle section
里的position调成
relative
这边好像少了一个div
这两个图标应该是要在一个parent
div里的
现在改一下
把它放到
这个parent div
我们为这个div添加一个class
我们叫它social吧
我们继续把middle section
里的position设置成relative
middle section
position
调成relative
然后把social
的position也调一下
但是这边我们要设置absolute
我们预览一下
我们先把这两个图标的大小调一下
现在我们是要针对social
的i tag
进行设置
所以这边要输入social class
里的i tag
我们把它的width
设置成50px
然后height
也是50个px
font-size调去30个px
我们预览一下
我们是要把这个图标移到中间
所以我们需要在social
class里
把width调一下
调去100%
正中间了
现在我们把这个图标的颜色换去白色
color
白色
然后我们给它这加一个背景颜色
所以我们要把background-color换去
深蓝色
然后把它的border-radius
调50%十
我们先预览一下
再把line-height调一下
调去50px
这个图标就居中了
这两个图标的距离有点近
我们先调一下它的margin
把它调成20个px看看
现在我们要把它
往上拉 让它踩线
所以我们要在这个top这边
我们需要在social
加一个top
先设置30%
看看
还是有点低
试试-50
正好踩线
我们接着调bottom section 最后一个div
bottom section 这边有点挤哦
我们给它加个padding吧
我们是针对
bottom section做调整
所以这边需要输入.bottom-section
padding
40px
我们预览一下
现在看起来就宽一点了
根据效果图
这两行字其实是应该并排显示的
一左一右
我们可以用flex布局
把这两家企业名称并排显示
我们先把display
设置成flex
然后把justify-content
设置成space-evenly
意思就是平均分布
那我们现在预览一下
现在是并排显示了
现在我们需要把企业名称和
ceo分成两行
我们需要针对bottom section
里的span做一些设置
我们将它的display设置成block
预览一下
变成了两行
我们还需要在这里显示一条间隔线
那现在我们去设置一下border class
我们把width
调去1px
然后height
提去40px
背景颜色调去浅灰色
我们预览一下
间隔线是出现了
但是好像不太居中
我们需要手动调一下
我们把margin-left设置一下
把它调成百50px
我们预览
这条线有点
靠右了
再调一下它的margin-right
也得把它调成50px
还是不太对称
把margin-right调小一点
把它调成40
现在就对称了
我们的网页版名片终于完成了
耶！给自己点个赞吧！
如果你还有不明白的地方
可以回看这个视频
或者在留言栏里发问
我都会一一为你解答
如果你觉得这个视频对你有帮助
欢迎关注
点赞
分享
你的支持是我最大的动力
今天这个视频就到这里
我们下期见
拜拜