CSS和HTML廣場背景

任何人都可以指導我，我怎樣才能在CSS中創建'幾乎'方形背景？CSS和HTML廣場背景

我想獲得棕色的背景，並有錯誤的項目符號上的文字，以及如何在CSS的右上角創建點黃色？

我的工作進展是在這裏：

HTML：

<body> 
    <div id="contentContainer"> 
     <div id="setBackground"> 
      <div id="header"> <span class="style1">This is LOGO </span> 

       <hr /> 
       <div id="body_block"> 
        <p class="intro">Introduction</p> 

        <h1> Back </h1> 
        Click Here 

        <h2> Next </h2> 
        Click Here 

        <p>More about Web Design:</p> 
        <p>• Bla bla bla... .</p> 
        <p>Contact:</p> 
        <p>• Bla bla bla...</p> 
        <div id="footer"> 
         <!--hr class="footer"/--> 
         <p>&copy; Copyright 2013 
         <a href="">sample.com </a>| 
         <a href="">More Site </a> 
         </p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

CSS：

@charset"UTF-8"; 

/* CSS Document */ 
hr { 
    clear:both; 
    border: 0; 
    height:12px; 
    width:100%; 
    background-color: #993300; 
} 
.intro { 
    color: #1e2a74; 
    font-size:16px; 
    font-weight:bold; 
    font-family:Arial, Helvetica, sans-serif; 
} 
#footer { 
    background-color:#6994AF; 
    clear: both; 
    color: #FFFFFF; 
    font-size: 0.8em; 
    margin: 0; 
    padding: 0; 
    font-family:Arial, Helvetica, sans-serif; 
} 
#footer p { 
    border-top: 1px solid #83CDE1; 
    margin: 0; 
    padding: 15px 0; 
    text-align: left; 
} 
#footer a { 
    text-align:right; 
} 
.style1 { 
    font-size: 24px; 
    font-weight: bold; 
    font-family: Arial, Helvetica, sans-serif; 
    background-color: #FFFFFF; 
}

來源

2013-05-19 tagalo

@phpNoOb，對我來說似乎是一個很好的問題。有代碼顯示了什麼已經嘗試和一切。 – Brad

@布拉德你能告訴我如何在CSS中獲取？ – tagalo

Here's the jsFiddle

你的設計真的很差。您不必將所有div嵌套在一起。我改變了你的HTML有點（只是重新安排你的div並增加了兩個新的div leftDiv和rightDiv） HTML：

<body> 
    <div id="contentContainer"> 
     <div id="setBackground"> 
      <div id="header"> <span class="style1">This is LOGO </span> 

       <hr /> 
      </div> 
      <div id="body_block"> 
        <p class="intro">Introduction</p> 

        <h1> Back </h1> 
        Click Here 

        <h2> Next </h2> 
        Click Here 




      </div> 


      <div id="leftDiv"> 
        <p>More about Web Design:</p> 
        <p>• Bla bla bla... .</p> 
      </div> 
      <div id="rightDiv"> 
        <p>Contact:</p> 
        <p>• Bla bla bla...</p> 
      </div> 

      <div id="footer"> 
        <!--hr class="footer"/--> 
        <p> 
&copy; Copyright 2013 
         <a href="">sample.com </a>| 
         <a href="">More Site </a> 
         </p> 
       </div> 
      </div> 
     </div> 
    </body>

添加這些規則，以你的CSS：

#leftDiv{ 
    clear:both; 
    width:200px; 
    background:brown; 
    float:left; 
    border-top-left-radius:25px; 

} 
#rightDiv{ 
    margin-left:20px; 

    border-bottom-right-radius:25px; 
    background:brown; 
    float:left; 
}

來源

2013-05-19 00:59:04 thunderbird

感謝您的輸入，我會盡力編輯和確保他們 - 你能指導我如何在CSS中創建一個錯誤簽名？正如在這個鏈接：http://postimg.org/image/6cyb2y2mx/ – tagalo

@tagalo你的意思是兩個箭頭？ – thunderbird

這兩個箭頭我的意思是（沒有錯誤我的錯誤） - 紅色箭頭（上一頁和下一頁） – tagalo

圓角半徑CSS屬性可以幫助你獲得圓角 - 特別是像這樣的事情應該爲粉紅色元素包含其他所有內容。

div { 
    /* border-radius: Top-Left , Top-Right, Bottom-Right, Bottom-Left */ 
    border-radius: 20px 5px 20px 5px; 
}

我會親自把它分成幾個div，一個頭部和一個body。將背景黃色點與顏色放在頂部div上，並將邊框半徑應用於頂部部分。

然後將其他div的內容放入正文中並對每個案例應用這些邊框樣式。

然而，這只是一種方式來做到這一點我相信有很多其他的方式。

more info about CSS Rounded borders here

來源

2013-05-19 01:01:58 Joe

嘗試了這一點。

 border-bottom-right-radius:20px;

來源

2013-05-19 01:02:04 Rampill

邊境半徑是你想要什麼看：http://www.w3schools.com/cssref/css3_pr_border-radius.asp

在你的情況下，它會去是這樣的：

border-radius: 100px 0 100px 0; /*top-left top-right bottom-right bottom-left */

http://jsfiddle.net/spKMM/

來源

2013-05-19 01:03:27 Xarcell

嘗試邊界半徑屬性

實施例1

股利{邊界半徑：10px的;}

實施例2

股利{邊界半徑：10px的15像素;}

欲瞭解更多信息，請訪問： - CSS-TRICKS

來源

2013-08-20 09:31:53 Anjyr

this怎麼樣？你可以用div創建一個「僞」「hr」標籤：P

//IN HTML 

<div id="CUSTOM_HR_WITH_TEXT">SAMPLE TEXT // Custom "hr" tag with text.</div> 

//AND IN CSS 

#CUSTOM_HR_WITH_TEXT { 
border-radius: 10px 10px 10px 10px; 
border: 0; 
height: auto; 
width: auto; 
background-color: #993300; 
color: #fff; 
text-align: center; 
}

來源

2013-10-06 20:09:14

CSS和HTML廣場背景

回答

相關問題