1.我今天学了什么
1.margin
1.1给子元素margin-top:父元素移动,子元素不移动的解决方案
1给父元素overflow:hidden;
2给父元素设置伪元素
:before{
content:"";
display:table;
}
1.2上面的元素的margin-bottom和下面元素的margin-top会重合
1.3 三种css样式引入方式
给同一选择器设置同一样式.离元素近的样式设置方式优先级高
1.内部样式表(位于<head>标签内部)
<style>
div{
width: 200px;
height: 200px;
background: red;
}
<style>
2.内联样式(在HTML元素内部)
<div style="width: 100px;height:
100px;background: black"></div>
3. 外部样式表
把{
width: 200px;
height: 200px;
background: red;
}放入css目录里的box.css中,然后
<link rel="stylesheet" href="css/box.css"/>
2.绝对路径和相对路径
2.1绝对路径:从盘符开始的路径
2.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属性相同<p><label for="text">账号</label><input type="text" id="text"/></p>
3.2单选框:只能选一个
<p>
<label for="nan">男</label><input type="radio" id="nan" name="sex"/>
<label for="nv">女</label><input type="radio" id="nv" name="sex"/>
</p>
此时加入 name="sex"只能选一个,未加之前可以多选
3.3复合选框:可以选一个,可以多选,也可以全选
兴趣 <br/><br/>
<label for="zq">足球</label><input type="checkbox" id="zq"/>
<label for="tq">台球</label><input type="checkbox" id="tq"/>
<label for="glq">橄榄球</label><input type="checkbox" id="glq"/>
<label for="wq">网球</label><input type="checkbox" id="wq"/>
3.4下拉选框:一个输入框,点击后有多个选项
<select>
<option>北京</option>
<option>天津</option>
<option>武汉</option>
<option>长沙</option>
</select>
3.5预选的下拉选框
<select>
<option>北京</option>
<option>天津</option>
<option selected>武汉</option>//在想要的option上加selected这个属性
<option>长沙</option>
</select>
此时武汉显示于最上面
3.6文本域
<textarea placeholder=“请输入内容"></textarea>
""引号中写字,在用户输入文字时引号内内容消失
3.7输入框<input type ="text">
提交按钮<input type="submit">
3.8display和visibility的区别
display消失了不占位子
visibility消失了原来的位置还留着在
3.9转义字符
 空格
<小于号
>大于号
2我掌握了的
1.margin
1.1给子元素margin-top:父元素移动,子元素不移动的解决方案
1给父元素overflow:hidden;
2给父元素设置伪元素
:before{
content:"";
display:table;
}
1.2上面的元素的margin-bottom和下面元素的margin-top会重合
1.3 三种css样式引入方式
给同一选择器设置同一样式.离元素近的样式设置方式优先级高
1.内部样式表(位于<head>标签内部)
<style>
div{
width: 200px;
height: 200px;
background: red;
}
<style>
2.内联样式(在HTML元素内部)
<div style="width: 100px;height:
100px;background: black"></div>
3. 外部样式表
把{
width: 200px;
height: 200px;
background: red;
}放入css目录里的box.css中,然后
<link rel="stylesheet" href="css/box.css"/>
2.绝对路径和相对路径
2.1绝对路径:从盘符开始的路径
2.2相对路径:相对当前文件所在的路径
同级目录:src='down.jpg'
下一级目录:src='images/down.jpg'
上一级目录:src='../down.jpg'
3我没掌握的
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属性相同<p><label for="text">账号</label><input type="text" id="text"/></p>
3.2单选框:只能选一个
<p>
<label for="nan">男</label><input type="radio" id="nan" name="sex"/>
<label for="nv">女</label><input type="radio" id="nv" name="sex"/>
</p>
此时加入 name="sex"只能选一个,未加之前可以多选
3.3复合选框:可以选一个,可以多选,也可以全选
兴趣 <br/><br/>
<label for="zq">足球</label><input type="checkbox" id="zq"/>
<label for="tq">台球</label><input type="checkbox" id="tq"/>
<label for="glq">橄榄球</label><input type="checkbox" id="glq"/>
<label for="wq">网球</label><input type="checkbox" id="wq"/>
3.4下拉选框:一个输入框,点击后有多个选项
<select>
<option>北京</option>
<option>天津</option>
<option>武汉</option>
<option>长沙</option>
</select>
3.5预选的下拉选框
<select>
<option>北京</option>
<option>天津</option>
<option selected>武汉</option>//在想要的option上加selected这个属性
<option>长沙</option>
</select>
此时武汉显示于最上面
3.6文本域
<textarea placeholder=“请输入内容"></textarea>
""引号中写字,在用户输入文字时引号内内容消失
网友评论