如何使用CSS

我有這樣的HTML頁面樣式3（格）箱：如何使用CSS

<!DOCTYPE html> <html lang="en"> <head> 
    <meta charset="utf-8"> 
    <title>title</title> 
    <link rel="stylesheet" href="styleBox.css"> 
    <script src="script.js"></script> </head> <body> 
    <div> 
     <div> 
     <div> 
      text 
     </div> 
     </div> 
    </div> </body> </html>

本頁面看起來應該是這樣 - http://pasteboard.co/nFlMljzPG.png

我曾嘗試一些東西，但我不知道燙

div { 
    width: 380px; 
    height: 300px; 
    background: #B0CDE9; 
    border-style: solid; 
    border-color: black; 
    border-width: 1px; 
} 

div div { 
    width: 290px; 
    height: 280px; 
    background: yellow; 
    margin-left: 45px; 
    margin-top: 8px; 
} 

div div div { 
    width: 120px; 
    height: 140px; 
    background: #82C940; 
    margin-top: 70px; 

}

：第三格內但是，如果沒有編輯HTML頁面

我的CSS樣式的文本

（我的箱子是 - http://pasteboard.co/nFo7mv7R7.png）請問你能給我點什麼嗎？

來源

2016-11-05 Stepan

您需要使用ID或類。 – TheValyreanGroup

@Stepan：你能展示你的CSS嗎？ – NavkarJ

@Stepan：您如何定位文字？中心對齊？如果沒有，那麼你可以在第三個div中添加填充。或者你也可以將文本放在span元素中，並用CSS調整span元素的位置。 – NavkarJ

由於您不想更改HTML代碼，因此您可以將填充應用於第三個div以將文本置於其中。但是當你添加填充時，你需要調整div的寬度和高度。例如，如果您的div的寬度爲120像素，並且您希望文本距離左邊框爲20像素，那麼您將左邊距填充爲20像素，然後將寬度減小20像素。因此，現在你有一個寬度爲100px的div和填充爲20px的div。看下面的例子。

HTML

<div> 
    <div> 
    <div> 
     text 
    </div> 
    </div> 
</div>

CSS

div { 
    width: 380px; 
    height: 300px; 
    background: #B0CDE9; 
    border-style: solid; 
    border-color: black; 
    border-width: 1px; 
} 

div div { 
    width: 290px; 
    height: 280px; 
    background: yellow; 
    margin-left: 45px; 
    margin-top: 8px; 
} 

div div div { 
    width: 100px; 
    height: 60px; 
    background: #82C940; 
    margin-top: 70px; 
    padding-top:80px; 
    padding-left:20px; 
}

來源

2016-11-05 19:03:13 NavkarJ

@Stepan：然後使用填充將是一個可能的解決方案..請參閱上面編輯的答案。 – NavkarJ

謝謝，這就是我需要的 – Stepan

你需要使用class和id要能夠樣式每div乾淨

也許這就是你需要什麼。

.outter{ 
 
    height: 300px; 
 
    width: 300px; 
 
    background: orangered; 
 
    border: 5px solid orange; 
 

 
} 
 

 
.center{ 
 
    height: 50%; 
 
    width: 70%; 
 
    background: blue; 
 
    border: 5px solid grey; 
 
    margin: 10% auto; 
 

 
} 
 
.inner{ 
 
    height: 50%; 
 
    width: 70%; 
 
    background: maroon; 
 
    border: 5px solid white; 
 
    margin: 20% auto; 
 

 
} 
 
.inner p{ 
 
    font-size: 1em; 
 
    font-family: serif; 
 
    color: white; 
 
    padding: 5px; 
 
}

<div class='outter'> 
 
    <div class='center'> 
 
    
 
    <div class='inner'> 
 
    <p>This is the text in the inner div</p> 
 
    
 
    </div> 
 
    
 
    
 
    </div> 
 
    
 
    </div>

來源

2016-11-05 19:03:47 Abk

謝謝，但問題是我不能更改HTML頁面 – Stepan

\t .blue_div{ 
 
\t \t width: 30%; 
 
\t \t background: blue; 
 
\t \t margin:0 auto; 
 
\t \t margin-top: 10%; 
 
\t \t border: thin black solid; 
 
\t \t height: 500px; 
 
\t } 
 

 
\t .blue_div .yellow_div{ 
 
\t \t width: 80%; 
 
\t \t margin: 0 auto; 
 
\t \t height: 450px; 
 
\t \t background: yellow; 
 
\t \t border: thin black solid; 
 
\t \t margin-top: 5%; 
 
\t } 
 

 

 
\t .blue_div .yellow_div .text_div{ 
 
\t \t width: 40%; 
 
\t \t margin-left: 10%; 
 
\t \t height: 200px; 
 
\t \t background: green; 
 
\t \t border: thick black solid; 
 
\t \t margin-top: 25%; 
 
\t \t display: block; 
 
\t \t text-align: left; 
 
\t \t line-height: 200px; 
 
\t } 
 

 
\t .text_div span{ 
 

 
\t \t color: #000000; 
 
\t \t 
 
\t }

<div class="blue_div"> 
 

 
<div class="yellow_div"> 
 
<div class="text_div"> 
 
<span>&nbsp;&nbsp;Text</span> 
 
\t 
 
</div> 
 

 
</div>

這是你想要的一樣嗎？

PS：更改CSS根據您的需要。

希望它有幫助。

來源

2016-11-05 19:06:08

謝謝，但問題是我不能更改HTML頁面 – Stepan

回答

相關問題