A.我今天学了什么
1.margin的一点小问题
给子元素margin-top:父元素移动,子元素不移动
解决方案:
1.给父元素overflow:hidden;
2.给父元素设置伪元素
:before{
content:'‘”;
display:table
}
2.绝对路径和相对路径
1.绝对路径：从盘符开始的路径
2.相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
3.HTML表单相关元素
3.1一个登陆页面:
<form action="http://www.baidu.com"> 把账号提交到百度
<p><label for="text">账号</label><input type="text" id="text"/></p>
<p><label for="paw">密码</label><input type="password" id="paw"/></p>
<p><input type="submit" value="登录"/></p>
</form>
//定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
3.2单选框
<p>
<label for="male">男</label>
<input id=“male” type=“radio” name="sex" value="男"> 设置name只能选择一个
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
3.3复合选框
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
3.4下拉选框
<select>
<option>北京</option>
<option></option>
<option>汉阳区</option>
</select>
3.5预选的下拉选框
<select>
<option>洪山区</option>
<option selected>青山区</option> //在想要的option上加selected这个属性
<option>汉阳区</option>
</select>
3.6文本域
<textarea placeholder=“请输入内容"></textarea>
4.再说input
1.输入框 <input type=”text”>（会自带边框，需要用box-sizing: border-box;）
提交按钮<input type=”submit”>
2.display和visibility的区别
display:none;(显示为没有)
Visibility:hidden; (显示为隐藏)
5.转义字符(网上还有很多)
空格
<小于号
>大于号
© ?
（border-radius:50% 会使图片变圆）
fieldset{
border: none;（消除边框）
border-top: 1px solid #999999;（设置上边框）
margin-right: 20px;
margin-left: 20px;
margin-top: 75px;}
<fieldset>
<legend style="color: #999999; font-size: 16px">其他方式登录</legend>（字体显示在边框的中间）
</fieldset>（设置字体左右边框线）
6.雪碧图：
例：<style>
.seven{
display: inline-block;
width: 30px;
height: 30px;
background-color: darkgray;
border-radius: 50%;（会使图片变圆）
text-align: center;
margin-right: 15px;
margin-left: 15px;
margin-top: 15px;
}
.seven>span{
display: inline-block;
width: 20px;
height: 20px;
/*background-color: #f56600;*/（可以先给背景颜色看位置在哪，后面需要删除）
margin-top: 5px;
background-image: url("images/icons_type.png");
}
.qq>span{
background-position: -18px 0px;(x ,y轴设置图片的距离）
}
</style>
<div>
<a href="#" class="seven qq">
<span></span>
</a>
</div>
7.css样式的几种引入方式
1.外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
2.内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
3.内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
给同一选择器设置同一样式,离元素近的样式设置方式优先级高
B我今天掌握好的地方
1.margin的一点小问题
给子元素margin-top:父元素移动,子元素不移动
解决方案:
1.给父元素overflow:hidden;
2.给父元素设置伪元素
:before{
content:'‘”;
display:table
}
2.绝对路径和相对路径
1.绝对路径：从盘符开始的路径
2.相对路径：相对当前文件所在的路径
同级目录 src='down.jpg'
下一级目录 src='images/down.jpg'
上一级目录 src='../down.jpg'
3.HTML表单相关元素
3.1一个登陆页面:
<form action="http://www.baidu.com"> 把账号提交到百度
<p><label for="text">账号</label><input type="text" id="text"/></p>
<p><label for="paw">密码</label><input type="password" id="paw"/></p>
<p><input type="submit" value="登录"/></p>
</form>
//定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
3.2单选框
<p>
<label for="male">男</label>
<input id=“male” type=“radio” name="sex" value="男"> 设置name只能选择一个
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
3.3复合选框
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
3.4下拉选框
<select>
<option>北京</option>
<option></option>
<option>汉阳区</option>
</select>
3.5预选的下拉选框
<select>
<option>洪山区</option>
<option selected>青山区</option> //在想要的option上加selected这个属性
<option>汉阳区</option>
</select>
3.6文本域
<textarea placeholder=“请输入内容"></textarea>
4.再说input
1.输入框 <input type=”text”>（会自带边框，需要用box-sizing: border-box;）
提交按钮<input type=”submit”>
2.display和visibility的区别
display:none;(显示为没有)
Visibility:hidden; (显示为隐藏)
5.转义字符(网上还有很多)
空格
<小于号
>大于号
© ?
（border-radius:50% 会使图片变圆）
fieldset{
border: none;（消除边框）
border-top: 1px solid #999999;（设置上边框）
margin-right: 20px;
margin-left: 20px;
margin-top: 75px;}
<fieldset>
<legend style="color: #999999; font-size: 16px">其他方式登录</legend>（字体显示在边框的中间）
</fieldset>（设置字体左右边框线）
7.css样式的几种引入方式
1.外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
2.内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
3.内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
给同一选择器设置同一样式,离元素近的样式设置方式优先级高
C我掌握不好的地方
6.雪碧图
网友评论