2014-10-10 73 views
-2

後,我加入了一些CSS到我的網頁,我開始遇到了一些問題。水平線條在中心默認對齊和我的臺詞都將默認靠左對齊。此外,列表中的數字和項目符號並未出現。這裏的是代碼: 首先,這裏對我使用的CSS菜單代碼:列表和水平線不工作

* { 
     margin: 0; 
     padding: 0; 
    } 
    html { 
     background-color: #000; 
    } 
    .container { 
     margin: 0px auto; 
     width: 98%; 
    } 

    /* general styles */ 
    .menu, .menu ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 
    .menu { 
     height: 58px; 
    } 
    .menu li { 
     background: -moz-linear-gradient(#000000, #000000); 
     background: -ms-linear-gradient(#000000, #000000); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #000000)); 
     background: -webkit-linear-gradient(#000000, #000000); 
     background: -o-linear-gradient(#000000, #FFFFFF); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000')"; 
     background: linear-gradient(#000000, #000000); 

     border-bottom: 2px solid #181818; 
     border-top: 2px solid #303030; 
     min-width: 300px; 
    } 
    .menu > li { 
     display: block; 
     float: left; 
     position: fixed; 
    } 
    .menu > li:first-child { 
     border-radius: 5px 5px 0 0; 
    } 
    .menu a { 
     border-left: 3px solid rgba(0, 0, 0, 0); 
     color: #FFFFFF; 
     display: block; 
     font-family: 'Lucida Console'; 
     font-size: 18px; 
     line-height: 40px; 
     padding: 0 25px; 
     text-decoration: none; 
     text-transform: none; 
    } 

    /* onhover styles */ 
    .menu li:hover { 
     background-color: #1c1c1c; 
     background: -moz-linear-gradient(#1c1c1c, #1b1b1b); 
     background: -ms-linear-gradient(#1c1c1c, #1b1b1b); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b)); 
     background: -webkit-linear-gradient(#1c1c1c, #1b1b1b); 
     background: -o-linear-gradient(#1c1c1c, #1b1b1b); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b'); 
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')"; 
     background: linear-gradient(#1c1c1c, #1b1b1b); 

     border-bottom: 2px solid #222222; 
     border-top: 2px solid #1B1B1B; 
    } 
    .menu li:hover > a { 
     border-radius: 5px 0 0 0; 
     border-left: 5px solid #009DFF; 
     color: #009DFF; 
    } 

    /* submenu styles */ 
    .submenu { 
     left: 0; 
     max-height: 0; 
     position: absolute; 
     top: 100%; 
     z-index: 0; 

     -webkit-perspective: 400px; 
     -moz-perspective: 400px; 
     -ms-perspective: 400px; 
     -o-perspective: 400px; 
     perspective: 400px; 
    } 
    .submenu li { 
     opacity: 0; 

     -webkit-transform: rotateY(90deg); 
     -moz-transform: rotateY(90deg); 
     -ms-transform: rotateY(90deg); 
     -o-transform: rotateY(90deg); 
     transform: rotateY(90deg); 

     -webkit-transition: opacity .4s, -webkit-transform .5s; 
     -moz-transition: opacity .4s, -moz-transform .5s; 
     -ms-transition: opacity .4s, -ms-transform .5s; 
     -o-transition: opacity .4s, -o-transform .5s; 
     transition: opacity .4s, transform .5s; 
    } 
    .menu .submenu li:hover a { 
     border-left: 5px solid #009DFF; 
     border-radius: 0; 
     color: #009DFF; 
    } 
    .menu > li:hover .submenu, .menu > li:focus .submenu { 
     max-height: 2000px; 
     z-index: 10; 
    } 
    .menu > li:hover .submenu li, .menu > li:focus .submenu li { 
     opacity: 1; 

     -webkit-transform: none; 
     -moz-transform: none; 
     -ms-transform: none; 
     -o-transform: none; 
     transform: none; 
    } 

    /* CSS3 delays for transition effects */ 
    .menu li:hover .submenu li:nth-child(1) { 
     -webkit-transition-delay: 0s; 
     -moz-transition-delay: 0s; 
     -ms-transition-delay: 0s; 
     -o-transition-delay: 0s; 
     transition-delay: 0s; 
    } 
    .menu li:hover .submenu li:nth-child(2) { 
     -webkit-transition-delay: 50ms; 
     -moz-transition-delay: 50ms; 
     -ms-transition-delay: 50ms; 
     -o-transition-delay: 50ms; 
     transition-delay: 50ms; 
    } 
    .menu li:hover .submenu li:nth-child(3) { 
     -webkit-transition-delay: 100ms; 
     -moz-transition-delay: 100ms; 
     -ms-transition-delay: 100ms; 
     -o-transition-delay: 100ms; 
     transition-delay: 100ms; 
    } 
    .menu li:hover .submenu li:nth-child(4) { 
     -webkit-transition-delay: 150ms; 
     -moz-transition-delay: 150ms; 
     -ms-transition-delay: 150ms; 
     -o-transition-delay: 150ms; 
     transition-delay: 150ms; 
    } 
    .menu li:hover .submenu li:nth-child(5) { 
     -webkit-transition-delay: 200ms; 
     -moz-transition-delay: 200ms; 
     -ms-transition-delay: 200ms; 
     -o-transition-delay: 200ms; 
     transition-delay: 200ms; 
    } 
    .menu li:hover .submenu li:nth-child(6) { 
     -webkit-transition-delay: 250ms; 
     -moz-transition-delay: 250ms; 
     -ms-transition-delay: 250ms; 
     -o-transition-delay: 250ms; 
     transition-delay: 250ms; 
    } 
    .menu li:hover .submenu li:nth-child(7) { 
     -webkit-transition-delay: 300ms; 
     -moz-transition-delay: 300ms; 
     -ms-transition-delay: 300ms; 
     -o-transition-delay: 300ms; 
     transition-delay: 300ms; 
    } 
    .menu li:hover .submenu li:nth-child(8) { 
     -webkit-transition-delay: 350ms; 
     -moz-transition-delay: 350ms; 
     -ms-transition-delay: 350ms; 
     -o-transition-delay: 350ms; 
     transition-delay: 350ms; 
    } 

    .submenu li:nth-child(1) { 
     -webkit-transition-delay: 350ms; 
     -moz-transition-delay: 350ms; 
     -ms-transition-delay: 350ms; 
     -o-transition-delay: 350ms; 
     transition-delay: 350ms; 
    } 
    .submenu li:nth-child(2) { 
     -webkit-transition-delay: 300ms; 
     -moz-transition-delay: 300ms; 
     -ms-transition-delay: 300ms; 
     -o-transition-delay: 300ms; 
     transition-delay: 300ms; 
    } 
    .submenu li:nth-child(3) { 
     -webkit-transition-delay: 250ms; 
     -moz-transition-delay: 250ms; 
     -ms-transition-delay: 250ms; 
     -o-transition-delay: 250ms; 
     transition-delay: 250ms; 
    } 
    .submenu li:nth-child(4) { 
     -webkit-transition-delay: 200ms; 
     -moz-transition-delay: 200ms; 
     -ms-transition-delay: 200ms; 
     -o-transition-delay: 200ms; 
     transition-delay: 200ms; 
    } 
    .submenu li:nth-child(5) { 
     -webkit-transition-delay: 150ms; 
     -moz-transition-delay: 150ms; 
     -ms-transition-delay: 150ms; 
     -o-transition-delay: 150ms; 
     transition-delay: 150ms; 
    } 
    .submenu li:nth-child(6) { 
     -webkit-transition-delay: 100ms; 
     -moz-transition-delay: 100ms; 
     -ms-transition-delay: 100ms; 
     -o-transition-delay: 100ms; 
     transition-delay: 100ms; 
    } 
    .submenu li:nth-child(7) { 
     -webkit-transition-delay: 50ms; 
     -moz-transition-delay: 50ms; 
     -ms-transition-delay: 50ms; 
     -o-transition-delay: 50ms; 
     transition-delay: 50ms; 
    } 
    .submenu li:nth-child(8) { 
     -webkit-transition-delay: 0s; 
     -moz-transition-delay: 0s; 
     -ms-transition-delay: 0s; 
     -o-transition-delay: 0s; 
     transition-delay: 0s; 
    } 

而且,這裏是我用我的全屏背景代碼:

*{ 
    margin:0; 
    padding:0; 
} 


/*------------------------- 
    General Styles 
--------------------------*/ 


html{ 
    /* This image will be displayed fullscreen */ 
    background:url('BG.jpg') no-repeat center center; 

    /* Ensure the html element always takes up the full height of the browser window */ 
    min-height:100%; 

    /* The Magic */ 
    background-size:cover; 
} 

body{ 
    /* Workaround for some mobile browsers */ 
    min-height:100%; 
} 

a, a:visited { 
    outline:none; 
    color:#1c4f64; 
} 

a:hover{ 
    text-decoration:none; 
} 

section, footer, header{ 
    display: block; 
} 


/*---------------------------- 
    The Footer 
-----------------------------*/ 


footer{ 
    background-color: #111111; 
    bottom: 0; 
    box-shadow: 0 -1px 2px rgba(0,0,0,0.4); 
    height: 45px; 
    left: 0; 
    position: fixed; 
    width: 100%; 
    z-index: 100000; 
} 

footer h2{ 
    color: #EEEEEE; 
    font-size: 14px; 
    font-weight: normal; 
    left: 50%; 
    margin-left: -400px; 
    padding: 13px 0 0; 
    position: absolute; 
    width: 540px; 
} 

footer h2 i{ 
    font-style:normal; 
    color:#888; 
} 

footer a.tzine,a.tzine:visited{ 
    color: #999999; 
    font-size: 12px; 
    left: 50%; 
    margin: 16px 0 0 110px; 
    position: absolute; 
    text-decoration: none; 
    top: 0; 
} 

footer a i{ 
    color:#ccc; 
    font-style: normal; 
} 

footer a i b{ 
    color:#c92020; 
    font-weight: normal; 
} 

任何想法我應該修復,所以我不會有這些問題?

+1

你能建立一個的jsfiddle那說明什麼問題? – Rvervuurt 2014-10-10 10:49:38

回答

0

在你的CSS你有

.menu, .menu ul { 
    list-style:none; 

我們需要看到你的HTML,但我懷疑這是被繼承,所以也就是爲什麼編號列表和子彈不工作。