day05

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绝对路径:从盘符开始的路径
![](D/images/down.jpg)
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转义字符
&nbsp空格
&lt小于号
&gt大于号

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绝对路径:从盘符开始的路径
![](D/images/down.jpg)
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>
""引号中写字,在用户输入文字时引号内内容消失
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 1、margin的一些小问题 1.1给子元素设置margin-top:父元素移动,子元素不移动 2种解决方式 例子...
    陈梦晴阅读 250评论 1 0
  • A.我今天学到了什么 一.margin的一点小问题 1.给子元素margin-top:父元素移动,子元素不移动 解...
    孔子曰_f425阅读 169评论 0 0
  • A今天我学了什么 .margin问题 2.margin-top 和margin-bottom重合 3.相对路径和绝...
    相信自己_胡阅读 205评论 0 0
  • 我今天学会了 1,0:margin的一点小问题 1。给子元素margin-top:父元素移动,子元素不移动 2.上...
    613桑阅读 155评论 0 0