补充CSS & 初步了解H5----HTML5

补充CSS

一  页面定位

Position:fixed

下面给出简单的代码实现

html部分：

<div class="gd-top">
        <div class="gd-left fl">
            <a href=""><img src="images/gd-logo.png" alt=""/></a>
        </div>
        <div class="gd-main fl">
            <div class="gd-scbox">
                <input type="text" placeholder="笔记本内存条"/>
                <a href=""><i class="iconfont icon-xiangji"></i></a>
                <div class="gd-ssk fr">
                    <a href=""><p class="iconfont icon-sousuokuang"></p></a>
                </div>
            </div>
        </div>

css部分：

.gd-top{
    width: 100%;
    height: 50px;
    background: #fff;
    border-bottom: solid 2px #e1251b;
    position: fixed;
    top:0;
}
.gd-top .gd-left{
    width: 250px;
    height: 50px;
    position: relative;
}
.gd-top img{
    width: 115px;
    height: 40px;
    position: absolute;
    left:100px;
    bottom: 5px;
}
.gd-top .gd-main{
    width: 550px;
    height: 50px;
    position: relative;
}
.gd-top .gd-main .gd-scbox{
    height: 34px;
    width: 504px;
    margin: 8px 100px;
    border: solid 2px #e1251b;
    position: relative;
}
.gd-top .gd-main .gd-scbox input{
    width: 400px;
    height: 30px;
    border: none;
    padding-left: 5px;
}
.gd-top .gd-main .gd-scbox i{
    color:#666;
    position: absolute;
    left:380px;
    top:8px;
    font-size: 15px;
}
.gd-top>.gd-main>.gd-scbox i:hover{
    color:#e00;
}
.gd-top .gd-main .gd-scbox .gd-ssk{
    width:80px;
    height: 30px;
    background: #e1251b;
    position: relative;
}
.gd-top .gd-main .gd-scbox .gd-ssk:hover{
    background:#e00;
}
.gd-top .gd-main .gd-scbox p{
    float:right;
    color:white;
    font-weight: bold;
    position: absolute;
    left:34px;
    top:8px;
}

执行结果图如下：

初步了解HTML5

一   H5的标签

• header   
• nav      
• section
• aside
• footer

二  音频、视频的格式

• video  ：ogg  webm  mp4
• audio  ：mp3  wav ogg
• controls控件  

width   宽 height   高  autoplay   自动播放  loop   循环  poste   静态显示页面图片   autobuffer    缓冲 src     视频路径