1. 首頁
  2. 問答
  3. 做出瀏覽器

做出瀏覽器

2012-03-21 54 views
3

我重視我的設計還試圖解釋的事情做出瀏覽器

enter image description here

差不多我想要的頭就像一個全屏幕圖像的工作（例如：http://www.flemingsteele.com/）頭全寬，但我考慮切割白線在我的設計上的標題，並使其伸展，以適應所有顯示器的寬度。我也想要修正標題。

我想和我的頁腳發生同樣的事情，這只是一個磨砂或低透明度的白色條，我想沿頁面底部重複，但我希望它固定在底部。

中間部分我正在考慮將它作爲背景色，並在該區域內有div。我現在遇到的問題是每當我向div1或div2添加更多信息時，它都不會向下滾動，因爲我使用了position：fixed。原因是我想divs留在標題下，當我向下滾動文本的標題高於

我也想要它，所以如果我添加更多的信息到divs和scoll下來我想頭部固定在瀏覽器的頂部，當我向下滾動時，我會看到的是綠色的背景，每個div都有信息，底部有固定頁腳。

繼承人我現在有編碼。

HTML：

<body> 
    <img alt="full screen background image" src="images/header.png" id="full-screen-background-image" /> 
<div id="wrapper"> 

    <div class="logo"><img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /></div> 

      <div class="minicontainer"> 

    <div class="title"></div> 

    <div id="content"> 
    <P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P> 
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</div>  
</div><!--MINI CONTAINER DIV!--> 
</div><!--WRAPPER DIV!-->

CSS：

#wrapper      {width:800px; height:auto; margin:0 auto} 

.logo       {margin-left:100px; margin-top:20px; background-image:url(images/bni_logo.png); background-repeat: no-repeat; width:auto; height:auto;} 
#header{ 
    width:100%; 
    background: url(yourimage); 
} 

.minicontainer     {padding-left:130px; margin-top:150px; width:800px; height:auto; position:fixed;} 

.title       {background-image:url(images/title.png); width:255px; height:51px;} 

#content      {width:300px; height:auto; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%;} 

/* BACKGROUND IMAGE DO NOT TOUCH */ 


html, body { 
    height: 0%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    background-color:#8cc643 
} 

#full-screen-background-image { 
    z-index: -999; 
    min-height: 30%; 
    min-width: 1024px; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

希望是這樣解釋不夠清楚

來源

2012-03-21 Callum

回答

1

我相信這是你在找什麼。請告訴我，如果我錯了。

CSS

* {margin: 0; padding: 0} 
#wrapper { 
    background-image: url(http://windturbinezone.com/wp-content/uploads/2010/01/windfarm.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; 
    width: 100%; 
    height: 100%; 
} 
#content { 
    background-color: #8ac841; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(138, 200, 65)),to(rgb(188, 252, 109))); 
    background-image: -webkit-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: -moz-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: -o-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: -ms-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    background-image: linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109)); 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#8ac841', EndColorStr='#bcfc6d'); 
    width: 100%; 
    height: 500px; 
} 
#footer { 
    background: green; 
    width: 100%; 
    height: 100px; 
} 
#div1 { 
    left: 100px; 
    top: 100px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    background-color: yellow; 
    display: inline-block; 
} 
#div2 { 
    left: 200px; 
    top: 100px; 
    width: 200px; 
    height: 200px; 
    position: relative; 
    background-color: red; 
    display: inline-block; 
}

HTML

<div id="wrapper"></div> 
<div id="content"> 
    <div id="div1">Div1</div> 
    <div id="div2">Div2</div> 
</div>

來源

2012-03-21 21:11:29 jacktheripper

+0

我相信你快到了。 我刪除了所有的代碼，並用你的代碼替換，但是頭文件/包裝程序不會顯示出來。頁腳也不會出現。 我相信，一旦這樣排序我會被排序haha – Callum 2012-03-21 21:35:20

2

至於我的理解，這就是你正在嘗試做的，使頭部分和頁腳部分加以固定。下面的代碼就是這樣做的。

HTML

<div class="header"> 
</div> 

<div class="footer"> 
</div>

CSS如下所示

.header{width:100%} 

.footer { 
    background-color: black; 
    bottom: 0; 
    float: right; 
    height: 30px; 
    left: 0; 
    margin-top: auto; 
    overflow: hidden; 
    position: absolute; 
    width: 100%; 
}

實施例。 http://jsfiddle.net/4k2Zj/

來源

2012-03-22 07:11:14 harshakasireddy

+0

是的，這就是我以後。但我的設計長度爲3000像素，因爲我將整個圖像用作一個大背景圖像並將其編碼爲適合全屏（示例如下所示 - http://paulmason.name/item/full-screen-background -image-pure-css-code） 我該如何實現這個功能，因此如果不是所有的瀏覽器都支持大多數頭文件？ – Callum 2012-03-23 01:53:16

+0

我可能已經想通了，但使用標題上的全屏代碼並將圖像放在標題div內。 – Callum 2012-03-23 02:04:48

相關問題

 相關問題