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>
*****拓展
&nbsp空格 &lt<  &gt>

特殊案例

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">
    ![](images/logo.png)
</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">
        ![](images/footerLogo.png)
        <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">
    ![](images/user.png)
    <dl>
        <dt>用户名</dt>
        <dd>积分值：198分</dd>
        <dd>我的消息：0条</dd>
    </dl>
    <span></span>
    <!--<div class="bb">-->

        <div class="cc">
            ![](images/weixin1.png)
            <p>微信绑定</p>
            <span>未绑定</span><a href="#">立即绑定</a>
        </div>

        <div class="cc">
            ![](images/phone.png)
            <p>手机号码绑定</p>
            <span>未绑定</span><a href="#">立即绑定</a>
        </div>
    <!--</div>-->
</div>