通过回顾之前的知识,对自己的基础进行查缺补漏。
label标签<label for="值">内容</label> <input id="值">
label 元素不会向用户呈现任何特殊的样式。不过,它为鼠标用户改善了可用性,因为如果用户点击 label 元素内的文本,则会切换到控件本身。
<label> 标签的 for 属性应该等于相关元素的 id 元素,以便将它们捆绑起来。
value 属性规定 <input> 元素的值。value 属性对于不同 input 类型,用法也不同:
对于 "button"、"reset"、"submit" 类型 - 定义按钮上的文本
对于 "text"、"password"、"hidden" 类型 - 定义输入字段的初始(默认)值
对于 "checkbox"、"radio"、"image" 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL。
其中value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。value 属性不适用于 <input type="file">。
在做表单时,想要submit、reset按钮生效,必须添加表单域也就是<form action=""></form>
id选择器口诀:样式#定义,结构id调用,只能调用一次,别人请勿使用 其中的只能调用一次,是指只能用这个id去定义一个标签,其他标签不能使用即使是相同标签
ps的使用: 打开待测量的图片,CTRL+r打开标尺 将标尺单位改为像素,利用选区测量图片宽高,利用吸管工具查看颜色
行内元素:
行内元素也称内联元素或内嵌元素,特点如下:
和其他元素都在同一行上显示,不会独自换行。
宽度就是文字或照片的宽度,默认不可改变。
设置高度height无效,可以通过line-height来设置。
设置margin只有左右margin有效。
设置padding只有左右padding有效。
只能容纳文本或者其他行内元素。(注:因为图片是行内块元素,所以不能直接将图片加入行内元素中,需要将行内元素转为行内块或者块元素)
常见块内元素有:h1~h6,p,div,ul,ol,li等。
常见行内元素有:<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等。(行内元素有时也称为内联元素)
常见行内块元素:<img>,<input>,<td>等。他们同时具有块元素和行内元素的特点。
复合写法:比如a标签后加一个伪元素然后鼠标悬停伪元素变化 a:hover::after { }
鼠标在div上悬停,span元素变化 div:hover span { }
如果元素添加了display:none,visibility:hidden,那么过度样式会无效,解决方法:
class {
transition:visibility .5s, opacity .5s;
visibility:hidden;
opacity: 0;
}
class:hover {
visibility:visible;
opacity: 1;
}