1.css样式
1.内联样式
如
<div style="width:100px;height:100px;background: red"></div>
不要这样写！！！！！！！！！！！！！！！！！！！！！
2.内部样式
<style>格式
就是以前一直用的那个
3.外部样式表
如
<link rel="stylesheet" href="css/index.css">
2.路径
1.相对路径
叔伯级的前加 ..
一直以来用的那种就行
2.绝对路径
图片位置
别用就完了
3.定位
子元素绝对定位,不会继承父元素的width
绝对定位就没继承width了
4.bug
1.margin-top的
子元素作为父元素的第一个元素,给它margin-top,没用它的元素向下移动
解决方法
父元素加个before
.row:before{
content:"";
display: table;
}
2.margin重合的问题
.one{
width:100px;
height:100px;
background:red;
margin-bottom: 150px;
}
.two{
margin-top: 100px;
width:100px;
height:100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
1.png
5.表单
1.简单的登录表单
label和input结合使用 要点:label的for的值要和input的id一样
<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>
2.png
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>
3.png
3.复合选框
type=checkbox 复合选框
<div>
<input type="checkbox">足球
<input type="checkbox">篮球
<input type="checkbox">羽毛球
</div>
4.png
4.下拉选框
<select >
<option value="武昌区">武昌区</option>
<option value="洪山区" selected>洪山区</option>
<option value="青山区">青山区</option>
</select>
5.png
5.
<textarea placeholder="请留言" cols="30" rows="10"></textarea>
6.png
6. 大于,空格,大于 的字符
< >
7.text,btn的区别
输入框和按钮的区别
input是按钮的形态下,给border,padding不会改变它的width,height
网友评论