如何設計出具有多種顏色窗格的網頁沒有，我想重新設計我的網頁設計如下表

它基本上是簡單，可所有的CSS和不表來完成除了標誌「TEST」覆蓋紫色邊框和白色內容區域的方式外。我看不出如何做到這一點，而不使用的是在這個「切」圖像顯示三行三列（和背景圖像中的細胞）的表：

的僞代碼將作爲如下：

<table> 

<!-- HEADER ROW --> 
<tr> 
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD> 
<TD> <!-- Background: Purple/white image stretched horizontally --> 
    <!-- HEADER CONTENT (Logo image "TEST", and menu) --> </TD> 
<TD> <!-- Background: Purple/Grey image stretched horizontally --> </TD> 
</tr> 

<!-- CONTENT ROW --> 
<TD> <!-- Background: Grey color --> </TD> 
<TD> <!-- Background: white color --> </TD> 
    <!-- PAGE CONTENT --> </TD> 
<TD> <!-- Background: Grey color --> </TD> 

<!-- FOOTER ROW --> 
<tr> 
<TD> <!-- Background: Purple color --> </TD> 
<TD> <!-- Background: Purple color --> 
    <!-- FOOTER CONTENT --> </TD> 
<TD> <!-- Background: Purple color--> </TD> 
</tr> 

</table>

但我想這樣做沒有表，如果可能的話。有沒有辦法？

來源

2015-10-18 Xaz

是，使用'位置：在標誌absolute'。父母必須是「親戚」。這樣你就不需要在你的結構中切割任何東西 –

這是可能的。請提供jsfiddle。 – Alex

位置：絕對 –

我把佈局正是你想要的。對於標題你需要位置：絕對和給位置：相對於它的父div。

DEMO：

http://jsfiddle.net/ue5cu7du/

<div id="header"> 
    <ul><li>menu-1</li> 
    <li>menu-2</li> 
    <li>menu-3</li></ul> 
</div> 
<div class="container"> 

<div id="nav" class="left"> 
</div> 

<div id="section"> 
     <div class="logo-name">TEST2</div> 
<h2>London</h2> 
<p> 
London is the capital city of England. It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants. 
</p> 
<p> 
Standing on the River Thames, London has been a major settlement for two millennia, 
its history going back to its founding by the Romans, who named it Londinium. 
</p> 
</div> 
<div id="nav" class="right"> 
</div> 
    </div> 
<div id="footer"> 
Copyright © tyhy.com 
</div>

#header { 
    background-color:black; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    padding:5px;   
} 
#section { 
    width:350px; 
    float:left; 
    padding:10px; 
    position:relative; 
} 
#footer { 
    position:relative; 
    background-color:black; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px;  
} 
.right{float:right} 
.left{float:left} 
.logo-name{ 
    position: absolute; 
    top: -22px; 
    color: blue; 
    width: 100%; 
    font-size: 36px; 
    margin: 0 auto; 
    font-weight: bold;} 
li{display:inline-block;list-style:none;width:80px} 
ul{text-align:right}

來源

2015-10-18 12:25:44

爲什麼不使用隨HTML5發佈的新HTML標籤？如果你只使用div，你的代碼就不那麼幹淨了，新標籤搜索引擎和瀏覽器有更好的機會來理解你的網站應該是什麼樣的，哪些是最相關的信息 –

是的，這是真的。但是我沒有演示如何使用@Xaz可以進行佈局的演示。 –

謝謝Dhwani91，這幾乎就是我想要的。我只需要將白色部分設置爲固定寬度，並且標題菜單會縮進灰色區域的右側。我現在將嘗試在jsfiddle中修改您的代碼以獲取我想要的內容。如果我有任何疑問，我會通知你。 – Xaz

，你都可以成爲測試對象的CSS樣式的

position: absolute; left: %px; bottom: %px;

來源

2015-10-18 09:39:56 Charmind

屬性，你可以把不同的行中<header>，<main>和<footer>標籤，然後定義爲header和footer標籤padding-left和padding-right與您指定的值x然後爲main標記指定爲margin-left和margin-right相同的值x（x是屏幕邊緣和你的內容的優勢，灰色矩形的寬度），併爲您的所有標籤中指定一個width: 100%

到頁腳位置的底部，你應該給他position: absolute;和bottom: 0px;

來定位文本「文本」，雖然使用的CSS屬性position: absolute然後top: valY px; left: valX px;

所有這些東西在CSS做

這裏有一些偉大的互動課程，你也許想assgin： https://www.udacity.com/course/intro-to-html-and-css--ud304 https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

來源

2015-10-18 09:44:07

如何設計出具有多種顏色窗格的網頁沒有，我想重新設計我的網頁設計如下表

回答

相關問題