A今天学了什么
1.margin的一点小问题:
给子元素margin-top:父元素移动,子元素不移动
解决方案:
a.给父元素加:overflow:hidden;
b.给子元素设置伪元素
:before{
content:""
display:table}
2.绝对路径和相对路径
绝对路径:从盘符开始的路径
比如:![](D/images/down.jpg)
相对路径:相对当前文件所在的路径
同级目录:src="down.jpg"
下一级目录:src="images/down.jpg"
上一级目录:src="../down.jpg"
3.HTML表单相关元素
a.一个登陆页面:
<form>
<p><label for="text">账号</lable><input id="text " type="text"/></p>
<p><label for="password">密码</lable><input id="password " type="password"/></p>
<p><input type="submit" value="登录"/></p>
</form>
定义和用法
<label>标签为Input元素定义的标记
label元素不会向用户呈现 任何特殊效果。不过,它为鼠标用户改进了可用性。如果在label元素内点击文本,就会触发此控件。
<label>标签的for属性应当与相关元素的id属性相同。
b.单选框
<p>
<label for="male">男</label>
<inputid="male" type="radio" name="sex" value="男">
<label for="famale">女</label>
<inputid="famale" type="radio" name="sex" value="女">
</p>
c.复合选框
<p>
<label>兴趣</label>
<input type="checkbox" name="爱好" value"游泳">游泳
<input type="checkbox" name="爱好" value"跑步">跑步
</p>
d.下拉选框
<select>
<option>青山区</option>
<option>江夏区</option>
<option>武昌区</option>
</select>
e.预选的下拉选框
<select>
<option>青山区</option>
<option selected>江夏区</option> //在想要的option上加selected这个属性
<option>武昌区</option>
</select>
f.文本域
<textarea placeholder="输入内容">
</textarea >
g.input:
当输入框<input type="text">和提交按钮<input type="submit">有同样的宽高时,但看到的时候不一样时,可以给input加上box-sizing:border-box
h.display和visibility的区别:
display:none 显示为没有
visibility:hidden 可见度为隐藏(但还在)
i.转义字符
空格
>大于号
<小于号
4.css样式的几种方式
a.外部样式表(外联)
<link rel="stylesheet" type="text/css" href="c5.css">
b.内部样式表(内联)
<style>
p{
color:red;
font-sizi:14px
}
</style>
c.内联样式,在HTML元素内部(内嵌)
<p style="color:red;font-sizi:14px">hello world
<p>
B我掌握好的地方
1.margin的一点小问题:
给子元素margin-top:父元素移动,子元素不移动
解决方案:
a.给父元素加:overflow:hidden;
b.给你元素设置伪元素
:before{
content:""
display:table}
2.绝对路径和相对路径
绝对路径:从盘符开始的路径
比如:![](D/images/down.jpg)
相对路径:相对当前文件所在的路径
同级目录:src="down.jpg"
下一级目录:src="images/down.jpg"
上一级目录:src="../down.jpg"
3.HTML表单相关元素
a.一个登陆页面:
<form>
<p><label for="text">账号</lable><input id="text " type="text"/></p>
<p><label for="password">密码</lable><input id="password " type="password"/></p>
<p><input type="submit" value="登录"/></p>
</form>
定义和用法
<label>标签为Input元素定义的标记
label元素不会向用户呈现 任何特殊效果。不过,它为鼠标用户改进了可用性。如果在label元素内点击文本,就会触发此控件。
<label>标签的for属性应当与相关元素的id属性相同。
b.单元框
<p>
<label for="male">男</label>
<inputid="male" type="radio" name="sex" value="男">
<label for="famale">女</label>
<inputid="famale" type="radio" name="sex" value="女">
</p>
c.复合选框
<p>
<label>兴趣</label>
<input type="checkbox" name="爱好" value"游泳">游泳
<input type="checkbox" name="爱好" value"跑步">跑步
</p>
d.下拉选框
<select>
<option>青山区</option>
<option>江夏区</option>
<option>武昌区</option>
</select>
e.预选的下拉选框
<select>
<option>青山区</option>
<option selected>江夏区</option> //在想要的option上加selected这个属性
<option>武昌区</option>
</select>
f.文本哉
<textarea placeholder="输入内容">
</textarea >
g.input:
当输入框<input type="text">和提交按钮<input type="submit">有同样的宽高时,但看到的时候不一样时,可以给input加上box-sizing:border-box
h.display和visibility的区别:
display:none 显示为没有
visibility:hidden 可见度为隐藏(但还在)
i.转义字符
空格
>大于号
<小于号
4.css样式的几种方式
a.外部样式表(外联)
<link rel="stylesheet" type="text/css" href="c5.css">
b.内部样式表(内联)
<style>
p{
color:red;
font-sizi:14px
}
</style>
c.内联样式,在HTML元素内部(内嵌)
<p style="color:red;font-sizi:14px">hello world
<p>
C我掌握不好的地方
都掌握了