php实战第十九天_PHP教程-tutoriel php-php.cn

Maison

développement back-end

tutoriel php

php实战第十九天_PHP教程

Jul 14, 2016 am 10:11 AM

php sous 利用固定实战导航布局 Oui haut

今天涉猎了 ps,以及做了一个顶部导航条固定,下面给一个效果图布局.利用得是 position:fixed

[html]

无标题文档

a

b

c

d

e

    123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789
   123456789

无标题文档

a

b

c

d

e

123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789

css代码

[css] @charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
    font-size:14px;
    }
body{
        background-color:#ECECEC;
        }
#head{
    position:fixed;
    top:0px;

    background:#FAFAFA;

    width:100%;
    height:54px;

    border-bottom: 1px solid #E8E8E8;
    box-shadow: 0 1px 5px rgba(34, 25, 25, 0.2);
    z-index:100;

}

#header{
    margin:0 auto;

    width:960px;
    height:54px;
    }
.nav{
    float: left;
    height: 54px;
    width: auto;
    }

.nav ul ,.nav li{
    float: left;
    list-style: none outside none;
}

li a{
    padding: 0 15px;

    color: #585858;
    display: block;
    line-height: 54px;

    border-right: 1px solid #E8E8E8;
}

#main{
    position:relative;
    top:66px;

    margin:0 auto;
    padding:10px;

    width:960px;

    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C7C7C7;

    }

@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
font-size:14px;
}
body{
background-color:#ECECEC;
}
#head{
position:fixed;
top:0px;

background:#FAFAFA;

width:100%;
height:54px;

border-bottom: 1px solid #E8E8E8;
box-shadow: 0 1px 5px rgba(34, 25, 25, 0.2);
z-index:100;

}

#header{
margin:0 auto;

width:960px;
height:54px;
}
.nav{
float: left;
    height: 54px;
    width: auto;
}

.nav ul ,.nav li{
float: left;
    list-style: none outside none;
}

li a{
    padding: 0 15px;

    color: #585858;
    display: block;
    line-height: 54px;

border-right: 1px solid #E8E8E8;
}

#main{
position:relative;
top:66px;

margin:0 auto;
padding:10px;

width:960px;

background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #C7C7C7;

}

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn