HTML/CSS 음영 테두리가있는 세 개의 열 만들기

-1

누군가 도움을 줄 수 있습니까? 고맙습니다!

감사합니다. 여기까지 왔어. 둥근 테두리가있는 별도의 상자에 넣으려고합니다. 제목 (축구, 야구,베이스 켓볼)에 대한 배경색이 다릅니다. 제목을 탭으로 만들고 싶습니다.

<div class="jive-html-text-widget"> 
    <style type="text/css"> 
     .third {float:left; width:32%; margin-left:1%;} 
     .third:first-child {margin-left:0;} 
     .third h2 {font-family: "consolas"; color:#762432; margin-bottom:12px;} 
     .third p {font-family: "consolas"; color:#2B547E; margin-bottom:12px;} 
     .third ul {margin:0 0 22px 30px;} 
     .third ul li {margin-bottom:8px;} 
     .third li {font-family: "consolas"; color:#2B547E} 
    </style> 
    <div class="jive-html-text-widget"> 
     <div class="jive-html-text-widget"> 
     <hr/> 
     <div class="third"> 
      <h2>Baseball</h2> 
      <ul class="noindent"> 
       <li>a ball game played between two teams of nine on a field with a diamond-shaped circuit of four bases. It is played chiefly in the US, Canada, Latin America, and East Asia.</li> 
      </ul> 
     </div> 
     <div class="third"> 
      <h2>Soccer</h2> 
      <ul class="noindent"> 
       <li>a game played by two teams of eleven players with a round ball that may not be touched with the hands or arms during play except by the goalkeepers. The object of the game is to score goals by kicking or heading the ball into the opponents' goal.</li> 
      </ul> 
     </div> 
     <div class="third"> 
      <h2>Basketball</h2> 
      <ul class="noindent"> 
       <li>Originally invented in the movie BASEketball, starring South Park creators Trey Parker and Matt Stone, BASEketball has evolved from a fictional game to a popular real-life sport![1] It might have started as a joke, but BASEketball has rules just like the sports it started from.</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div>

출처

2016-06-10 Ninja

지금까지 무슨 짓을 한거야? – Spiderman

할 수 있지만 지금까지 코딩 한 내용은 무엇입니까? – dippas

도움이되는 코드가 필요합니다. [도움말 센터] (http://stackoverflow.com/help)를 방문하고 [훌륭한 질문을하는 방법]을 읽어보십시오. http://stackoverflow.com/help/how-to- 청하다). –

안녕에 refrence이 https://plnkr.co/edit/kAEDONthQYYgB54Sc7Tz?p=preview을 확인

HTML

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <div class="container"> 

    <div class="column-left">Column left The border-left shorthand property sets all the left border properties in one declaration.The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.</div> 
    <div class="column-center">Column centerThe border-left shorthand property sets all the left border properties in one declaration.The properties that can be set, are (in order): border-left-width, border-left-style, and border-left-color.</div> 
    <div class="column-right">Column right</div> 
</div> 
    </body> 

</html>

및 CSS

.container { 
    width: 100% 
} 
.container div { 
    height: 300px; 
} 
.column-left { 
    left: 0; 
    width: 30%; 
    background: #00F; 
    float: left; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    border: 1px solid red; 
} 
.column-center { 
    width: 30%; 
    background: #933; 
    float: left; 
    margin-left: 20px; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    border: 1px solid red; 
} 
.column-right { 
    width: 30%; 
    right: 0; 
    background: #999; 
    float: left; 
    margin-left: 20px; 
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); 
    border: 1px solid red; 
}

출처

2016-06-10 01:43:40

HTML/CSS 음영 테두리가있는 세 개의 열 만들기

답변

관련 문제