一.样式
1.1内联样式和常规样式
div{
width:100px;
height:100px;
background: red;
}*/
</style>
</head>
<body>
<div style=" width:100px; height:100px;background: red;"></div>
常规样式的话，方便调试修改
而内联样式写法不方便修改和调试
二.输入框和表单
1.1.input输入框
style>
input{
width:100px;
height:40px;
border: 1px solid #333;
}
.btn{
/* padding:40px;*/
width:102px;
height:42px;
}
</style>
</head>
<body>
<input type="text"><br>
<input type="submit" class="btn" value="提交"
input是按钮的形态下，给border padding不会改变它的width height值
input按钮形态------------<input type="submit" class="btn" value="提交">
1.2.表单
<div>
<label for="user">用户名</lable> <input type="text" id="user">
</div>
<div>
<label for="pwd">密码</label> <input type="text" id="pwd">
</div>
<div>
<input type="submit" value="提交">
</div>
label和input的结合使用时，其要点是 label的for值和input的id值必须一致
<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>
- 其单选框的name值相同
<div>
<input type="checkbox">足球
<input type="checkbox">足球
<input type="checkbox">足球
</div>
- 其为复合选框
<div>
<select>
<option value="武昌区">武昌区</option>
<option value="洪山区" selected>洪山区</option>
<option value="青山区">青山区</option>
</select>
</div>
- 其为下拉选框
<textarea placeholder="请吐槽" color="30" rows="10"></textarea>
- 其为文本域
三.样式的问题
1.1.宽高的继承
.parent{
width:100px;
height:100px;
background: red;
position:relative;
}
.child{
height: 50px;
background: green;
position:absolute;
}
- 子元素的绝对定位，不会继承父元素的宽度和高度
1.2.margin的问题
.parent{
width:200px;
height: 200px;
background: red;
}
.child{
margin-top:50px;
width:100px;
height: 100px;
background: green;
}
- 子元素作为父元素的第一个元素，给它margin-top 无效 ，它的父元素向下移动
- 解决问题 设置一个伪元素，使子元素不作为第一个元素
.row:after{
content:"";
display:table;
}
四.图片链接做法
1.1
<fieldset class="footer">
<legend>
其他方式登录
</legend>
</fieldset>
<div class="allicon">
<a href="#"><span class="qq"></span></a>
<a href="#"><span class="weibo"></span></a>
<a href="#"><span class="zhifu"></span></a>
<a href="#"><span class="weixin"></span></a>
</div>
fieldset{
border:none;
}
.allicon a{
display:inline-block;
width:30px;
height:30px;
border-radius:30px;
position:relative;
background: #333;
margin-top: 15px;
}
.allicon span{
position:absolute;
display:inline-block;
width:18px;
height:18px;
background: url("images/icons_type.png") no-repeat;
left:50%;
top:50%;
margin-left: -9px;margin-top: -9px;
}
.allicon .qq{
background-position-x:-18px;
}
.allicon .weibo{
background-position-x:-36px;
}
.allicon zhifu{
background-position-x:-57px;
margin-left:-13px;
width:26px;
}
.allicon .weixin{
background-position-x:-84px;
margin-left:-11.5px;
width:23px;
}
- 通过一张图片来实现多个链接
向服务器发送请求仅有一次
10.PNG
网友评论