小郭同学讲编程:HTML 第六节 A 标签及表单。
1. 今天我们的目标是制作这样一个按钮,这需要用 a 标签来实现,先找到右边的小盒子,在这里定义一个 a 标签,内容自定义,然后写上目标网址,比如写个百度,保存一下。
2. 接着打开文件,可以看到成功显示了,再换个网址试试,也成功显示。
3. 给 a 标签加上一个类名,自定义内容,写 CSS 样式。因为 a 标签是内敛元素,需加上代码使其变成块级元素,才能写高度、宽度和背景颜色。
4. 看看效果,此时不太美观,进行美化。先把文字颜色设成白色,让文字居中,再让行高和高度都为 50PX 让文字居中,看效果,成功显示。
5. 然后去掉 a 标签默认样式的下划线,看效果。再用所学知识点,用 margin 外边距属性,让其移动到理想位置,看效果,成功显示。
6. 再来学习一个知识点,即伪类。就是让鼠标放上去会有变化,比如加些颜色,若想这里也有变化,就需用到伪类标签即加上冒号 Hover,可以让文字颜色和背景颜色互换。
7. 接下来还可把文字大小放大,再试试,成功显示。
8. 然后学习今天的目标,制作这样一个搜索页面。首先是表单,要找到右边的盒子,里面表单常用标签是 FOM,一般有两个常用标签,一个是 input,或者是个 a 标签,是单标签,先弄一个 input 试试,看效果,可以看到出现一个书框,这就是 input 的。input 的样式可让同学们写,当作作业。
本期视频就结束了,同学们拜拜。