CSS：問題在HTML5

調整窗口這是代碼我想：CSS：問題在HTML5

* 
{ 
    box-sizing:border-box; 
} 
div,body,html,h1,nav,article,footer,header{display:block;} 
body 
{ 
    margin:0; 
    padding:0; 
    font-family:Arial; 
    font-size:14px; 
    background-color:#fff; 
} 
#wrapper 
{ 
    margin-left: auto; 
    margin-right: auto; 
} 
.title p 
{ 
    text-align:center; 
    color:darkgray; 
} 
img 
{ 
    vertical-align:middle; 
    margin:0; 
} 
#slideshow { 
    position: relative; 
    overflow: hidden; 
    height: 100px; 
} 
#fixme 
{  
    height : 65px; 
    position: relative; 
    overflow : hidden; 
} 
#animate-area 
{ 
    height: 122%; 
    width: 2538px; 
    position: absolute; 
    left: 0; 
    top: -15px; 
    background-image: url('http://s30.postimg.org/qnju89rkx/banner.png'); 
    background-repeat: repeat-x; 
    -ms-animation: animatedBackground 40s linear infinite; 
    -moz-animation: animatedBackground 40s linear infinite; 
    -webkit-animation: animatedBackground 30s linear infinite; 
} 
    /* Put your css in here */ 
    @keyframes animatedBackground { 
     from { left: 0; } 
     to { left: -1269px; } 
    } 
    @-webkit-keyframes animatedBackground { 
     from { left: 0; } 
     to { left: -1269px; } 
    } 
    @-moz-keyframes animatedBackground { 
     from { left: 0; } 
     to { left: -1269px; } 
} 
#logo img 
{ 
    position:absolute; 
    z-index:999; 
    vertical-align:middle; 
    margin-top: -22px; 
} 
h1 
{ 
    text-align:center; 
    text-align: center; 
    font-size: 35px; 
    font-weight: 100; 
    margin-top:25px; 
    margin-bottom: inherit; 
} 
.header-pgf 
{ 
    width: 67%; 
    font-size: 15px; 
    font-family: verdana; 
    margin: auto; 
    margin-top:15px; 
} 
.title 
{ 
    margin-right:auto; 
    margin-left:auto; 
    width:960px;  


} 
.nav 
{  
    background: -webkit-gradient(linear, left top, left bottom, from(#b9b9b9), to(#000)); 
    background: linear-gradient(0deg, red, yellow); 
    height:45px; 
    margin-top: -15px; 
} 
.nav ul 
{ 
    text-align:center; 

} 
.nav ul li 
{ 
    display:inline-block; 
    text-align:center; 
} 
.nav > ul li:first-child a 
{ 
    background-color:Red; 
} 
.nav > ul li:first-child a:hover 
{ 
    text-decoration:underline; 
} 
.nav li:hover a 
{ 
    background-color: red; 
} 
.nav li a 
{ 
    color: #000; 
    display: block; 
    padding: 14px 25px; 
    text-decoration: none; 
} 
.slides, 
.flex-control-nav, 
.flex-direction-nav 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.flexslider .slides img 
{ 
    width: 960px; 
    margin-left:auto; 
    margin-right:auto; 
    display: block; 
} 
.flex-pauseplay span 
{ 
    text-transform: capitalize; 
} 
.flexslider .slides > li 
{ 
    display: none; 
    -webkit-backface-visibility: hidden; 
} 
.slides:after 
{ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
html[xmlns] .slides 
{ 
    display: block; 
} 
* html .slides 
{ 
    height: 1%; 
} 
.flexslider 
{ 
    border: 4px solid #fff; 
    position: relative; 
    box-shadow: 0 1px 4px rgba(0,0,0,.2); 
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
    -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); 
    zoom: 1; 
    margin-top: 20px; 
} 
.flex-viewport 
{ 
    max-height: 2000px; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.loading .flex-viewport 
{ 
    max-height: 200px; 
} 
.flexslider .slides 
{ 
    zoom: 1; 
} 
.flexslider .slides 
{ 
    border-right:10px; 
} 
.flex-direction-nav 
{ 
    *height: 0; 
    width:400px !important; 
} 
.flex-direction-nav a 
{ 
    width: 60px; 
    height: 60px; 
    display: block; 
    no-repeat 0 0; 
    position: absolute; 
    top: 50%; 
    z-index: 10; 
    cursor: pointer; 
    text-indent: -9999px; 
    opacity: 1; 
    -webkit-transition: all .3s ease; 
} 
.flex-direction-nav .flex-disabled 
{ 
    filter:alpha(opacity=20); 
    cursor: default; 
} 
.flex-control-nav 
{ 
    width: 100%; 
    bottom: -40px; 
    text-align: center; 
    float:left; 
    margin-top:-200px; 
} 
.flex-control-nav 
{ 
    width: 100%; 
    position: absolute; 
    bottom: -40px; 
    text-align: center; 
    font-weight:bold; 
    color:darkgray; 
    cursor:pointer; 
} 
.flex-control-nav li 
{ 
    margin: 0 6px; 
    display: inline-block; 
    zoom: 2; 
} 
.flex-control-nav li:hover 
{ 
    color:#000; 
} 
.flex-control-nav .flex-active 
{ 
    cursor: default; 
    color:#000; 
    opacity: .7; 
} 

.column-layout 
{ 
    padding-top: 73px; 
    display: table; 
    margin: 0 auto; 
    max-width: 1300px; 
} 
section 
{ 
    padding: 0px 40px; 
} 
.column-layout p 
{ 
    color: darkgray; 
} 
.column-layout h3, .column-layout img 
{ 
    margin-left: 40px; 

} 
@media (min-width: 992px){ 
.column-count-1, .column-count-2, .column-count-3, .column-count-4 { 
    min-height: 1px; 
    padding-left: 15px; 
    padding-right: 15px; 
    position: relative; 
} 
} 
.column-count-1, .column-count-2, .column-count-3, .column-count-4 { 
    width: 25%; 
    float: left; 
    line-height: 1.5em; 
    letter-spacing: 0.4pt; 
} 
.featured 
{ 
    background-color: darkgray; 
    color:#fff; 
    padding:10px; 
    display: flex; 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
} 
.featured-pgf 
{ 
    float:left; 
    clear:both; 


} 
input[type=text] { 
    border-radius:0px; 
    padding: 14px 18px 14px 18px; 
    margin-left: 151px; 
    margin-top: 8px; 
    width: 260px; 
} 

form 
{ 
    float:right; 
    margin:0; 
} 
.footer-link 
{ 
    background-color: darkgray; 
    line-height: 9pt; 
    padding: 20px 0px; 
    margin-top: 55px; 
    padding-left: 47px;} 
.footer-link a:first-child 
{ 
    border-left: 0px; 
} 
.footer-link 
{ 
    text-align:center; 
} 
.footer-link a 
{ 
    color: #fff; 
    border-left: 1px solid #fff; 
    font-size: 9pt; 
    line-height: 9pt; 
    display: inline-block; 
    text-decoration: none; 
    padding: 0px 0px 0px 10px; 
} 
.footer-link a:hover 
{ 
    color:#fff; 
    text-decoration:underline; 
} 
#footer 
{ 
    width:960px; 
    margin-left:auto; 
    margin-right:auto; 
} 
.copyright 
{ 
    margin-left: 33px; 
    font-size: 11px; 
    color: darkgray; 
    float:left; 
} 
#footer img 
{ 
    vertical-align:middle; 
    float:right; 
    margin: 4px;  
}

這是的jsfiddle：

http://jsfiddle.net/6deqxyk4/

當調整窗口的大小，它會顯示這樣的：http://s27.postimg.org/5p20dklg3/Untitled_1_copy.png

我可以知道在調整窗口大小時如何對齊頁面，我需要顯示居中頁面的所有內容。

大多數我試過，但有些失蹤，請幫助我的錯誤。

任何幫助，將不勝感激。提前致謝。

來源

2014-09-06 sasi

體{保證金：0汽車;} – himanshu 2014-09-06 06:16:28

http://jsfiddle.net/6deqxyk4/2/ – himanshu 2014-09-06 06:18:24

@himanshu：從您的評論 – sasi 2014-09-06 06:20:04

像這樣的事情

.wrapper{ 
     width:900px; 
     margin-left:auto; 
     margin-right:auto; 
    } 
    #header{ 
     width:100%; 
     // give it orange background here 
    } 
    #footer{ 
     width:100%; 
    // give it background here 
    } 

<div id="header"> 
    <div class="wrapper"> 
     // navigation bar here 
    </div> 
</div> 

    <div class="wrapper"> 
    // page content here 
    </div> 


<div id="footer"> 
    <div class="wrapper"> 
     // navigation bar here 
    </div> 
</div>

來源

2014-09-06 06:16:57 Paramore

我已經嘗試過像你的答案，當我使用寬度包裝，導航沒有什麼變化酒吧在標題是不是鞋全寬右？ – sasi 2014-09-06 06:18:43

您需要將導航欄放入包裝元素中。 – Paramore 2014-09-06 06:20:45

@ Paramore：當我使用寬度：960px;在包裝器中，它顯示像這樣，當調整大小http://imgur.com/8d35yUF。但是當調整大小時，我需要這樣的頁眉和頁腳，http://postimg.org/image/wfvm08tof/2a87e2c2/ – sasi 2014-09-06 06:35:26

在HTML文件中添加一個div像http://jsfiddle.net/6deqxyk4/3/

<div id="page">

你的內容的開頭開始這一點，在所有內容年底關閉然後加入這對你的css

#page{ 
width:980px; 
margin:auto; 
}

這將解決它

來源

2014-09-06 06:17:44 Akshay

CSS：問題在HTML5

回答

相關問題