前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

HTML教学第六课~ #小孩哥(html全套课程)

小郭同学讲编程: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 的样式可让同学们写,当作作业。

本期视频就结束了,同学们拜拜。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言