day5
2018-03-15 本文已影响0人
九芊
A今天学习的内容
1.关于margin的一些小问题
假如给子元素添加一个margin-top样式，父元素移动，子元素相对于父元素不移动，此时的解决方法如下（常用）：
1.给父元素一个overflow：hidden样式；
2.给父元素设置一个伪元素
：before{
conten：" ";
display:table;
}
图例：
01.PNG
结果：
02.PNG
父、子元素都移动了100px，此时给父元素设置一个伪元素：
03.PNG
结果：
04.PNG
2.绝对路径和相对路径
绝对路径：从电脑的某个盘开始的路径
比如：<img src="D:/images/down.jpg" alt=" "/>
用绝对路径插入某张图片，想要在html中看到这张图片就要在本地打开这个html文件
相对路径：相对当前文件所在的路径
同级目录 src="file.jpg"
上一级目录：src="images/file.jpg"
下一级目录：src="../file/file.jpg"
3.HTML表单相关元素
1.一个登陆页面需要的最主要元素：
05.PNG
<label>标签为input元素定义标注（标记），它不会向用户呈现任何特殊效果，但为鼠标用户改进了可用性，如果在label元素内点击文本，就会触发此控件（如上图，鼠标点中账号，对应的input输入框就会出现光标），注意，<label>标签的for属性应当与相关元素的id属性相同。
2.设置单选框
图片.png
在input里加入一个“checked”，对应的选项就会变成默认选项。
3.多选框
图片.png
同样的，在input里加入一个“checked”，对应的选项就也会变成默认选项。
4.下拉选框
图片.png
在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：
15.PNG
5.fieldset 元素定义和用法
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
例1：
17.PNG
结果：
18.PNG
例2：
图片.png
结果：
16.PNG
B今天掌握的内容
1.解决margin出现的一点小问题
2.绝对路径和相对路径的区别
3.登录页面包括一些什么样的基本的标签以及它们的用法，单选和多选，下拉选框，默认选项的设置方法
4.文本域的使用方法
5.关于input不同的type的表现形式
6.常用的转义字符
7.雪碧图的使用方法
8.css样式的三种引入方式
9.给一个父级元素里的某个/某些子级元素添加样式的小技巧
10.
