html暑假学习笔记---持续更新

在大一上学期学过一点html,也做了一个劣质的网页,现在利用暑假的时间继续深入学习和巩固知识。

以下都是我自己看b站上王怪兽的视频以及自己动手操作,然后自己总结出来的知识点,仅供参考。

----------------------------------------

1.注意  .top .a 以及 .top.a 

html暑假学习笔记---持续更新

html暑假学习笔记---持续更新

如果用后者(.top.a)则无法显示效果。

(怪不得之前一直出现不了和视频中一样的效果orz很苦)

2.<ul>经常用来写导航,也可以用div写导航。

float:left;让ul列表横着

html暑假学习笔记---持续更新

3.上下居中 和 左右居中

字体的居中:line-height= 000px; 和 text-align=center;

注意000px要与div的高度相等。

div的居中则用:margin: 0 auto;

html暑假学习笔记---持续更新


4.伪类元素

鼠标放在数字上面发生的样式

注意 ul li后面直接打冒号,不能加空格。

行间元素变块状元素:display:block; 需要定义块状元素的大小。

html暑假学习笔记---持续更新

html暑假学习笔记---持续更新


5.给边框加圆角

四个值分别代表 上右下左(和margin一样)

html暑假学习笔记---持续更新

html暑假学习笔记---持续更新

此外需要注意 height的一半理论上要大于等于radius,如果height为50px的话,radius赋值为30px和25px效果是一样的。

html暑假学习笔记---持续更新

6.背景引用图片

html暑假学习笔记---持续更新

7.表示颜色 rgb

rgb分别表示 red\green\blue,三原色

html暑假学习笔记---持续更新

a代表透明度,相对应0.5,a最大为1,最小为0

效果如下:

html暑假学习笔记---持续更新

最终成果:

html暑假学习笔记---持续更新


8. em与字体的大小有关

1em=1字体大小

html暑假学习笔记---持续更新

html暑假学习笔记---持续更新

9.搜索框里的文字

<input type="" name="" class="text" vaule="xxxxxx">

<input type="" name="" class="text" placeholder="xxxxxx">

这两者是有区别的

前者:直接可以连着框里的内容输入

html暑假学习笔记---持续更新

后者:默认内容不出现

html暑假学习笔记---持续更新

10.搜索框和按钮

html暑假学习笔记---持续更新

html暑假学习笔记---持续更新

类型决定着输出,如 password/text....

11.注意两者先后,前者 上下为0,左右居中,则先执行,后面的离上边缘50px的代码则无效

所以两者应该交换位置,先使块状向下移动再使其居中。

html暑假学习笔记---持续更新


12.使块级元素横排

html暑假学习笔记---持续更新