(2)Merry Christmas(桌機main)

【範例結果】

二、討論 float 及寬度計算問題

section1 :美化

%與em關係  http://pxtoem.com/

問題一:討論【float】及【高度一致】問題

原始:先設定各sec【width:25%;】

section:nth-child(1) {
    background: #00897b;
}

#sec1 {
    background: #ffcece; font-size: 1em;
    float: left; 
    width: 25%;
}
#sec2 {
    background: #ffecb3; font-size: 0.7em;
    float: left;
    width: 25%;
}
#sec3 {
    background: #a8d7ff; font-size: 1.1em;
    float: left;
    width: 25%;
}

說明:

section:nth-child(1) {
    background: #00897b;
    overflow: hidden;
    height: 500px;
}

#sec1 {
    background: #ffcece; font-size: 1em;
    float: left; height: 100%;
    width: 25%;
}
#sec2 {
    background: #ffecb3; font-size: 0.7em;
    float: left; height: 100%;
    width: 50%;
}
#sec3 {
    background: #a8d7ff; font-size: 1.1em;
    float: left; height: 100%;
    width: 25%;
}

問題二:討論【加入舒適空間,影響寬度】排版發生問題

原始:

#sec1 {
    padding: 20px; border: 1px solid #000;
    width: 25%;
}
#sec2 {
    padding: 20px; border: 1px solid #000;
    width: 50%;
}
#sec3 {
    padding: 20px; border: 1px solid #000;
    width: 25%;
}

方法1: calc   【說明】

#sec1 {
    padding: 20px; border: 1px solid #000;
    
    /*寬度解決方法1:calc*/
    width: calc(25% - 40px - 2px);
    
}
#sec2 {
    padding: 20px; border: 1px solid #000;
    width: calc(50% - 40px - 2px);
}
#sec3 {    
    padding: 20px; border: 1px solid #000;
    width: calc(25% - 40px - 2px);
}

方法2:box-sizing    【說明】

#sec1 {
    padding: 20px; border: 1px solid #000;
    
    /*寬度解決方法2:*/
    width: 25%; box-sizing: border-box;
    
}
#sec2 {
    padding: 20px; border: 1px solid #000;
    width: 50%; box-sizing: border-box;
}
#sec3 {
    padding: 20px; border: 1px solid #000;
    width: 25%; box-sizing: border-box;
}

最後加入h2 美化

section:nth-child(1) h2{
  font-size: 1.6em;
  text-align: center;
  color: #960707;
}
section:nth-child(1) h2:before{
  content: url(image/icon01.png);
  padding-right: 10px;
  transform: rotate(30deg);
  display: inline-block;
}

 

問題三:邊框加入圖片框【border-image】

section:nth-child(1) > div{
    border: 50px solid;
    border-image: url(image/border.png) 100 100 round;
}

#sec1 {    
/*   border: 1px solid #000; */
   border-image: url(image/border.png) 100 100 round ;    
}
#sec2 {  border-image-repeat:repeat; }
#sec3 {  border-image-repeat:stretch; }