今天学到了什么
1. 样式的引入
1.1 内联样式
了解就行了 不使用
div style="width;100px;height:100px;background:red;"></div>
1.2 外部样式
尽量用外部样式
<link rel="stylesheet" href="css/03index.css">
2. 路径
2.1 绝对路径
了解 不会使用
<img src="D:\PS\mayunPro\Courseware\DAY03\课后作业\images\data_image.png" alt="">
2.2 相对路径
<img src="images/data_image.png" alt="">
2.3 读上级/兄弟目录
../ 读上级目录
<img src="../images/data_image.png" alt="">
与图片在同一目录下，即兄弟目录
<img src="data_image.png" alt="">
3. width，height继承
3.1 子元素绝对定位，不会继承父元素的height
.parent{
width: 100px;
height: 100px;
background: red;
position: relative;
}
.child{
width: 50px;
background: green;
position: absolute;
}
子不继父.png
3.2 当子元素绝对定位时，父元素不会获取子元素的高度
.parent{
width: 200px;
background: red;
}
.child{
position: absolute;
width: 100px;
height: 100px;
background: green;
}
父不继子height.png
4. margin的一些问题
子元素作为父元素的第一个元素，给它margin-top，子元素不会移动而父元素向下移动
如何解决： 使子元素让出大哥的位置，不成为第一个元素，即添加一个伪元素
.row:before{
content: "";
display: table;
}
5. 表单
5.1 简单登录表单
lable和input结合使用 要点：lable的for的值要和input的id一样
<h4>一个简单的登录表单</h4>
<form action="">
<div>
<label for="user">用户名</label><input type="text" id="user">
</div>
<div>
<label for="pwd">密码</label><input type="password" id="pwd">
</div>
<div>
<input type="submit" value="提交">
</div>
<div>
简单登录表单.png
5.2 单选框
技术要点： name值相同
<div>
<h4>单选框</h4>
<label for="male">男</label><input type="radio" id="male" name="sex">
<label for="female">女</label><input type="radio" id="female" name="sex">
</div>
单选框.png
5.3 复合选框
type=checkbox 复合选框
<div>
<input type="checkbox">足球 <input type="checkbox">篮球
<input type="checkbox">排球
</div>
复选框.png
5.4 下拉选框
<div>
<select>
<option value="武昌区">武昌区</option>
<option value="洪山区" selected>洪山区</option>
<option value="青山区">青山区</option>
</select>
</div>
下拉选框.png
5.5 文本框
<textarea placeholder="请吐槽" cols="30" rows="10"></textarea>
文本框.png
6. text，btn的区别
input是按钮的形态下,给border,padding不会改变它的width,height
加border不改变width和heigth.png
<style>
*{margin:0;padding:0}
input{
border:1px solid #333;
width:100px;
height:40px;
}
.btn{
width:102px;
height:42px;
}
/* input是按钮的形态下,给border,padding不会改变它的width,height */
</style>
</head>
<body>
<!-- 输入框和按钮的区别 -->
<input type="text"> <br>
<input type="submit" class="btn">
<button type="submit">提交</button>
</body>
</html>
今天还有什么不会
网友评论