day05
2017-09-21 本文已影响0人
尘榆骡厌
A我今天学习到了什么
1温习day04的知识点
1.1.盒子模型
盒子模型:box-sizing:border-box
当设置box-sizing:border-box;
设置padding,和border,//它的宽度还是会保持不变
box-sizing:content-box;(默认清晰)
//当设置padding和border时宽度会发生改变
//总宽度=width+border+padding
1.2.浮动float
1.目的:为了让元素并排显示
float：lest|right；
（postion:relative// 相对的位置移动
top|left|right|bottom：1px；）
2如何清除浮动
(1)给下面的兄弟元素给clear:both;
(2)给父级加overflow:hidden;
(3)用伪元素,给父级内容生成
.row:before{
display:table;
content:“”}//前面加
.row:after{
display:table;
content:“”
clear:both;}//后面加
1.3.定位:position
position:absolute | relative
//绝对定位，相对定位
Relative 定位
相对定位元素的定位是相对其正常位置。
postion:relative//父级专属位置设定
Absolute定位 （fixed固定//没有父级只有<html>）
绝对定位的元素的位置相对于最近的相对定位的父元素，
如果没有已定位的父元素，那么它的位置相对于<html>
****定位的调试都通过left,top,right,bottom移动
z-index:设置元素的堆叠顺序 给position:absolute绝对定位的元素
当子元素没有设置宽度，如果设置了绝对定位,它不会继承父元素的宽度
1.4.布局方式的总结
1.默认布局
2.浮动布局(左右安置)
3.层级布局(定位)
1.5.实现元素的垂直水平居中
（相对）父元素设置parent{position:relative;}
(绝对）子元素设置child{
position:absolute;left:50%;top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;}
1.6:CSS样式的几种引入方式
外部样式表
<link rel="stylesheet" type="text/css" href="/c5.css">
内部样式表（位于 <head> 标签内部）
<style>
p{color:pink;font-size:16px}
</style>
内联样式（在 HTML 元素内部）
<p style=”color:pink;font-size:16px”>hello world</p>
//给同一选择器设置同一样式,离元素近的样式设置方式优先级高
2拓展day04的知识点
2.1 p:margin的一点漏洞问题
给子元素margin-top:父元素移动,子元素不移动
解决方案：1.给父元素overflow:hidden;
2.给父元素设置伪元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top会重合
//取两者的最大值
2.2一个登陆页面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
//<label for="text">文本</label>特殊人员的照顾，指引
//"text"这个是input对话框的文本属性
<p><label for="password">密码</label><input id="password" type="password"/></p>
//"password"这是input对话框的密码属性
<p><input type="submit" value="登录"/></p>
//"submit"是input按钮的属性，value更改名
</form>
//定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
2.3单选框
<!--单选框需给一样的“name”名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
2.4复合选框
<!--复合选框-->
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
2.5下拉选框
<select>
<option>洪山区</option>
<option>青山区</option>
<option>汉阳区</option>
</select>
2.6预选的下拉选框
<form action="">
<select>
<option>洪山区</option>
<option selected>青山区</option>
<option>汉阳区</option>
</select>
</form>
//在想要的option上加selected这个属性
2.7文本域
文本域
<textarea placeholder="看点槽点，不吐不快！别憋着，马上大声说出来吧！"></textarea>
*****拓展
 空格 << >>
特殊案例
1.input 输入框
input type=”text”
type=”submit”之间的区别
一个文本是content box，一个按钮是border box
2.display和visibility的区别
display:none;//块不存在
visibility:hidden;//只是隐藏起来了
3.讲解登录框下面的几个icon
image.png
//是背景图片的取图定位，左负右正background-position: -18px 0
B我掌握了的
1.1 p:margin的一点漏洞问题
给子元素margin-top:父元素移动,子元素不移动
解决方案：1.给父元素overflow:hidden;
2.给父元素设置伪元素parent:before{content:'‘”;display:table}
上面的元素的margin-bottom和下面元素的margin-top会重合
//取两者的最大值
1.2一个登陆页面
<form >
<p><label for="text">文本</label><input id="text" type="text"/></p>
//<label for="text">文本</label>特殊人员的照顾，指引
//"text"这个是input对话框的文本属性
<p><label for="password">密码</label><input id="password" type="password"/></p>
//"password"这是input对话框的密码属性
<p><input type="submit" value="登录"/></p>
//"submit"是input按钮的属性，value更改名
</form>
//定义和用法
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
1.3单选框
<!--单选框需给一样的“name”名-->
<p>
<label for="male">男</label><input id="male" type="radio" name="sex" value="男">
<label for="female">女</label>
<input id="female" type="radio" name="sex" value="女">
</p>
1.4复合选框
<!--复合选框-->
<p>
<label>爱好</label>
<input type="checkbox" name="爱好" value="游泳">游泳
<input type="checkbox" name="爱好" value="开车">开车
</p>
1.5下拉选框
<select>
<option>洪山区</option>
<option>青山区</option>
<option>汉阳区</option>
</select>
1.6预选的下拉选框
<form action="">
<select>
<option>洪山区</option>
<option selected>青山区</option>
<option>汉阳区</option>
</select>
</form>
//在想要的option上加selected这个属性
1.7文本域
文本域
<textarea placeholder="看点槽点，不吐不快！别憋着，马上大声说出来吧！"></textarea>
*****拓展
 空格 << >>
特殊案例
1.input 输入框
input type=”text”
type=”submit”之间的区别
一个文本是content box，一个按钮是border box
2.display和visibility的区别
display:none;//块不存在
visibility:hidden;//只是隐藏起来了
3.讲解登录框下面的几个icon
image.png
//是背景图片的取图定位，左负右正background-position: -18px 0
C我没有掌握的
全部不掌握了，不熟练要多练习。
margin: 0;
padding: 0;
}
.wai{
position: relative;
height: 100px;
}
.wa{
box-sizing: border-box;
position: absolute;
left: 400px;
top: 30px;
clear: both;
}
.wa>img{
width: 49px;
height: 49px;
background: #f56600;
}
.wa>.wa1{
display: inline-block;
overflow: hidden;
padding-left: 10px;
}
.wa1>.wa-1 {
font-size: 28px;
position: absolute;
top: -5px;
}
.wa1>.wa2{
font-size: 10px;
}
.bac{
position: relative;
background: url("../images/banner.png") no-repeat center;
height: 600px;
/*margin: 30px 0;*/
}
.den{
position: absolute;
width: 350px;
height: 500px;
right: 430px;
top:50px;
background: #ffffff;
text-align: center;
}
.login{
margin: 30px 0;
}
.login span{
font-size: 24px;
margin: 0 10px;
}
form p{
margin: 10px 0;
box-sizing: border-box;
}
form input{
width: 280px;
height: 50px;
border: 1px solid #e0e0e0;
outline: none;
}
.password>input{
padding-left: 15px;
}
.phone>input{
padding-left: 15px;
}
.login .active{
color: #f56600;
}
.submit>input{
width: 297px;
height: 50px;
background: #f56600;
color: white;
font-size: 18px;
margin: 20px 0 10px;
}
.register {
margin-bottom: 70px;
}
.register .wang{
background: blue;
color: white;
}
.footer {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.footer .line{
border-bottom:none;
border-right: none;
border-left:none;
}
.All{
overflow: hidden;
margin-top: 15px;
}
.All a{
width: 20px;
height: 20px;
display: inline-block;
background: #747474 url(../images/icons_type.png) no-repeat;
margin-left: 30px;
}
.All .one {
margin-left: 0;
background-position: -18px 0
}
.All .two {
background-position: -37px 0
}
.All .three {
background-position: -57px 0
}
.All .four {
background-position: -85px 0
}
.xia{
height: 200px;
position: relative;
}
.xia1{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -37px;
margin-left: -379px;;
}
.xia1 p{
margin: 10px 0;
}
.xia1 span{
margin: 5px;
}
<div class="wai">
<div class="wa">
<p class="wa1">
<span class="wa-1">小米商城</span>
<span class="wa-2">让每个人都能享受科技的乐趣</span>
</p>
</div>
</div>
<div class="bac">
<div class="den">
<form>
<P class="login">
<span class="active">帐号登录</span>
<span class="...">|</span>
<span class="saoma">扫码登录</span>
</P>
<p class="phone">
<input type="text" placeholder="邮箱/手机号码/小米账号"/>
</p>
<p class="password">
<input type="text" placeholder="密码"/>
</p>
<p class="submit">
<input type="submit" value="立即登录"/>
</p>
</form>
<p class="register">
<span>注册小米账号</span>
<span>|</span>
<span class="wang ">忘记密码?</span>
</p>
<div class="footer">
<fieldset class="line">
<legend align="center" class="line_txt">其他方式登录</legend>
</fieldset>
<div class="All">
<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>
<a href="#" class="four"></a>
</div>
</div>
</div>
</div>
<div class="xia">
<div class="xia1">
<p class="xia-1">
<span>简体</span>
<span>|</span>
<span>繁体</span>
<span>|</span>
<span>English</span>
<span>|</span>
<span>常见问题</span>
<p>小米公司版权所有-京ICP备10046444-
京公网安备11010802020134号-京ICP证110507号</p>
</p>
</div>
</div>
