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

最新推荐文章于 2024-08-01 03:55:23 发布

原创最新推荐文章于 2024-08-01 03:55:23 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

前端css 专栏收录该内容

13 篇文章

订阅专栏

本文深入讲解了CSS中fixed定位的应用，通过具体实例演示了如何使用fixed属性创建固定顶部导航栏，包括HTML结构和CSS样式设置。同时，文章还介绍了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;
}

执行结果图如下：