A今天学习的内容
1.关于margin的一些小问题
假如给子元素添加一个margin-top样式,父元素移动,子元素相对于父元素不移动,此时的解决方法如下(常用):
1.给父元素一个overflow:hidden样式;
2.给父元素设置一个伪元素
:before{
conten:" ";
display:table;
}
图例:
结果:
父、子元素都移动了100px,此时给父元素设置一个伪元素:
结果:
2.绝对路径和相对路径
绝对路径:从电脑的某个盘开始的路径
比如:<img src="D:/images/down.jpg" alt=" "/>
用绝对路径插入某张图片,想要在html中看到这张图片就要在本地打开这个html文件
相对路径:相对当前文件所在的路径
同级目录 src="file.jpg"
上一级目录:src="images/file.jpg"
下一级目录:src="../file/file.jpg"
3.HTML表单相关元素
1.一个登陆页面需要的最主要元素:
<label>标签为input元素定义标注(标记),它不会向用户呈现任何特殊效果,但为鼠标用户改进了可用性,如果在label元素内点击文本,就会触发此控件(如上图,鼠标点中账号,对应的input输入框就会出现光标),注意,<label>标签的for属性应当与相关元素的id属性相同。
2.设置单选框
在input里加入一个“checked”,对应的选项就会变成默认选项。
3.多选框
同样的,在input里加入一个“checked”,对应的选项就也会变成默认选项。
4.下拉选框
在option里加入一个“selected”,对应的选项就也会变成默认选项。
5.关于input
文本输入框:<input type="text" />(输入的文本可以看见)
密码输入框:<input type="password" />(输入的文本会显示为黑点)
提交按钮:<input type="submit" value=" " />(在value里输入的文本会显示在这个按钮中)
6.转义字符(常用的几个)
 ;表示空格
<;小于号
>;大于号
©;©
7.文本域
<textarea placeholder="此处的文本会出现在文本框中,输入文字后消失"></textarea>,需要给文本域添加一个样式textarea{width:200px;height:120px;resize: none;}这样文本域才会固定。
>4.雪碧图
5.css样式的几种引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="" />
内部样式表(位于<head>标签内部)
<style type="text/css">
</style>
内联样式(在HTML元素内部)
例如:<div style="width: 100px; height: 100px; background-color: pink;">hhh</div>
给同一个选择器设置同一样式,离元素近的样式设置方式优先级高。
4.使用选择器的一些小技巧(给一个父级元素里的某个/某些子级元素添加样式)
比如说一个div里面包裹着数个p,要选择特定的某个/些p:
5.fieldset 元素定义和用法
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
例1:
结果:
例2:
结果:
B今天掌握的内容
1.解决margin出现的一点小问题
2.绝对路径和相对路径的区别
3.登录页面包括一些什么样的基本的标签以及它们的用法,单选和多选,下拉选框,默认选项的设置方法
4.文本域的使用方法
5.关于input不同的type的表现形式
6.常用的转义字符
7.雪碧图的使用方法
8.css样式的三种引入方式
9.给一个父级元素里的某个/某些子级元素添加样式的小技巧
10.