A我今天学习到了什么
1温习day05的知识点
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
2拓展day06的知识点
1.iframe
<iframe> 标签规定一个内联框架。
一个内联框架用来在当前 HTML 文档中嵌入另一个HTML文档
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
2.当遇到一个非文本的元素，想让其垂直居中用【定位】
3.内联元素一些奇怪的现象
:给button设置margin-top,span也跟着移动
<div>
<button>btn</button>
<span>深圳</span>
<span>广州</span>
<div>
4.overflow:hidden;
隐藏溢出的部分
B我掌握了的
1.iframe
<iframe> 标签规定一个内联框架。
一个内联框架用来在当前 HTML 文档中嵌入另一个HTML文档
<iframe src="我的.html" frameborder="0"name="frame"></iframe>
<a href="test01.html" target="frame">test</a>
2.当遇到一个非文本的元素，想让其垂直居中用【定位】
3.内联元素一些奇怪的现象
:给button设置margin-top,span也跟着移动
<div>
<button>btn</button>
<span>深圳</span>
<span>广州</span>
<div>
4.overflow:hidden;
隐藏溢出的部分
C我没有掌握的
<div class="one">
</div>
<div class="one1">
<div class="one2">
<ul class="tou">
<li>深圳 <span>切换</span></li>
</ul>
<ul class="tou1">
<li>个人中心</li>
</ul>
<span>首页</span>
<span>资讯</span>
<span>测评</span>
<span>商城</span>
</div>
</div>
<div class="box">
<div class="box1">
<a href="02用户主页.html"target="frame">用户中心首页</a>
<ul>
<li><span></span>我的检测</li>
<li><a href="#">上门检测</a></li>
<li><a href="#">DIY检测</a></li>
</ul>
<ul>
<li><span></span>我的治理</li>
<li><a href="#">上门治理</a></li>
</ul>
<ul>
<li><span></span>我的装修</li>
<li><a href="#">装修方案</a></li>
</ul>
<ul>
<li><span></span>我的收藏</li>
<li><a href="#">装修材料</a></li>
<li><a href="#">净化产品</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">测评</a></li>
</ul>
<ul>
<li><span></span>个人资料</li>
<li><a href="#">个人资料</a></li>
<li><a href="#">修改密码</a></li>
<li class="bang"><a href="03微信分页.html" target="frame">绑定手机\微信</a></li>
</ul>
<ul>
<li><span></span>积分管理</li>
<li><a href="#">积分兑换</a></li>
<li><a href="#">积分等级</a></li>
<li><a href="#">积分任务</a></li>
</ul>
</div>
<div class="box2">
<iframe src="02用户主页.html" frameborder="0" name="frame"></iframe>
<!--<iframe src="03绑定手机微信.html" frameborder="0" name="frame"></iframe>-->
</div>
</div>
<div class="five">
<div class="fiv">
<dl>
<dt>为室内环境健康把好每一关</dt>
<dd>家居医生致力于中国人的家居健康问题，通过专业的技术研究<br/>
和测评，倾力协助大众打造绿色，环保的人居生活环境。</dd>
</dl>
<div class="fiv1">
<ul class="ul1">
<li>关于我们</li>
<li>联系我们</li>
<li>加入我们</li>
</ul>
<ul class="ul1">
<li>版权说明</li>
<li>用户隐私</li>
<li>免费申明</li>
</ul>
<ul class="ul2">
<li class="l1">官方微信</li>
<li class="l2">天猫旗舰店</li>
<li class="l3">有攒商城</li>
</ul>
</div>
<div class="fiv2"></div>
<span class="di1">深圳建筑科学研究院股份有限公司</span>
<span>家居医生网</span>
<span class="di2">粤IPU备08011321号ⓒCopyright All Rights Reserved</span>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.one{
text-align: center;
background: #18bebe;
box-sizing: border-box;
}
.one>img{
width: 180px;
height: 50px;
padding: 10px 0;
}
.one1{
background: #f3eff2;
box-sizing: border-box;
}
.one2{
text-align: center;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
.tou{
float: left;
padding-top: 10px;
}
.tou li{
list-style-image: url("../images/location.png");
}
.tou1{
float: right;
padding-top: 10px;
}
.tou1 li{
list-style-image: url("../images/adm.png");
color: #FEA700;
}
.one2>span{
line-height: 40px;
font-size: 20px;
padding: 0 40px;
}
.box{
width: 1200px;
margin: 10px auto;
}
.box1{
width: 200px;
height: 900px;
background: #f0f0f0;
text-align: center;
margin-right: 10px;
display: inline-block;
}
.box1>a{
display: block;
line-height: 75px;
background: #dddddd;
border-left: 3px solid #19bebe;
text-decoration: none;
color: #19bebe;
}
ul a{
text-decoration: none;
color: #666666;
}
.box1 li{
list-style: none;
text-align: left;
}
.box1 ul{
margin-left: 60px;
padding: 0 0 20px;
}
.box1 span{
display: inline-block;
width: 11px;
height: 11px;
background: url("../images/open.png");
position: relative;
right: 40px;
margin-right: -10px;
}
.box2{
float: right;
background: #eeeeee;
}
iframe{
width:980px;
height:1000px;
margin-left:5px;
border:1px solid #eee;
}
.five{
background:#515151;
color: #ffffff;
clear: both;
}
.fiv{
width: 1200px;
padding: 20px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
.fiv>img{
display: block;
margin-left: 20px;
}
.fiv>dl{
display: inline-block;
margin-left: 20px;
}
.fiv dt{
font-size: 18px;
font-weight: 700;
padding-bottom: 20px;
}
.fiv dd{
font-size: 16px;
}
.fiv1{
display: inline-block;
position: relative;
left:80px;
}
.fiv1>ul{
display: inline-block;
margin-right: 100px;
}
.fiv1 .ul1{
list-style: none;
}
.fiv1 .ul2{
margin-left: 40px;
}
.fiv1 li{
padding: 8px 0;
}
.ul2 .l1{
list-style-image: url("../images/weixin2.png");
}
.ul2 .l2{
list-style-image: url("../images/tianmao.png");
}
.ul2 .l3{
list-style-image: url("../images/shop.png");
}
.fiv2{
height: 2px;
border-bottom: 1px solid #dddddd;
margin: 10px 0;
}
.di1{
margin:0 20px;
}
.di2{
margin-left: 420px;
}
<style>
*{margin: 0;padding: 0}
.box{
background-color: #EBEBEB;
position: relative;
height: 150px;
border: 1px solid #E8E8E8;
}
.aa{
width: 108px;
height: 109px;
border-radius: 50%;
float: left;
position: relative;
left: 40px;
top: 20px;
}
dl{
float: left;
position: relative;
left: 45px;
top: 30px;
}
dt{
font-size: 20px;
margin-bottom: 20px;
}
.box>span{
width: 1px;
height: 100px;
border-left: 2px solid #dddddd;
float: left;
position: relative;
left: 140px;
top: 30px;
}
.cc{
width: 300px;
height: 150px;
display: inline-block;
position: relative;
left: 200px;
top: 60px;
}
.cc p{
display: inline-block;
position: absolute;
}
.cc a{
margin-left: 5px;
text-decoration: none;
color: #19bebe;
}
</style>
</head>
<body>
<div class="box">
<dl>
<dt>用户名</dt>
<dd>积分值：198分</dd>
<dd>我的消息：0条</dd>
</dl>
<span></span>
<!--<div class="bb">-->
<div class="cc">
<p>微信绑定</p>
<span>未绑定</span><a href="#">立即绑定</a>
</div>
<div class="cc">
<p>手机号码绑定</p>
<span>未绑定</span><a href="#">立即绑定</a>
</div>
<!--</div>-->
</div>
