前因： 我開始做個收款系統，突然客戶跑來要插進一個任務，據說他們老闆挺在意的，一個小商場，一個首頁，一個詳情頁，UI無自由發揮，要求，儘量好看點。 一番交談後，確認這是一個對外的網站，最好移動端也能正常顯示（響應式）。 正文： 前端這一塊我一直在想給自己提升一下，剛好有這個機會，於是就去看了一下Ht ...
前因：
我開始做個收款系統，突然客戶跑來要插進一個任務，據說他們老闆挺在意的，一個小商場，一個首頁，一個詳情頁，UI無自由發揮，要求，儘量好看點。
一番交談後，確認這是一個對外的網站，最好移動端也能正常顯示（響應式）。
正文：
前端這一塊我一直在想給自己提升一下，剛好有這個機會，於是就去看了一下Html 5和Css3 發現很多屬性確實 比以前方便，其中比如 伸縮盒子flex; 裡面的flex-direction，align-items，justify-content 屬性 佈局確實大大方便了。
html 因為html5 的新標簽header,footer,article,section，nav等等 加入，佈局 不再全部依賴div
1 <body> 2 <header> 3 <img src="Img/logo.png" class="logo" /> 4 <div class="F_Search"> 5 <input type="text" class="Search" id="Search" placeholder="Please enter what you want to find" /> 6 <button class="SearchBtn" onclick="Search('');"></button> 7 <nav class="SearchText"> 8 <ul> 9 <li><p onclick="Search('test');">test</p></li> 10 <li><p onclick="Search('t');">t</p></li> 11 <li><p onclick="Search('t');">t</p></li> 12 <li><p onclick="Search('t');">t</p></li> 13 <li><p onclick="Search('t');">t</p></li> 14 <li><p onclick="Search('t');">t</p></li> 15 <li><p onclick="Search('t');">t</p></li> 16 <li><p onclick="Search('t');">t</p></li> 17 </ul> 18 </nav> 19 </div> 20 <div class="link"> 21 <img src="Img/link.png" /> 22 <div> 23 <h2>Call Us Now :</h2> 24 <span>-------</span> 25 </div> 26 </div> 27 </header> 28 <article> 51 </article> 52 <footer> 53 <p><img src="Img/logo.png" style="width:40px;height:40px;padding:10px;vertical-align:middle;" /></p> 57 </footer> 122 </body>
CSS: 佈局採用 flex彈性佈局 這裡就展示頭部樣式 ，其他部分 大同小異
1 * { 2 margin: 0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 } 7 /*頂部*/ 8 header { 9 width: 100%; 10 display: -webkit-flex; 11 display: flex; /*IE必要元素*/ 12 flex-direction: row;/*排成一行*/ 13 align-items: center; /*上下居中*/ 14 padding: 30px; 15 box-sizing: border-box; 16 justify-content: space-between; /*分散內部元素 中間有空白*/ 17 border-bottom: 1px solid #e6e6e6; 18 } 19 20 header .logo { 21 margin-bottom: 10px; 22 margin-right: 40px; 23 border-radius: 5px 5px; 24 } 25 26 header .F_Search { 27 padding-left: 20px; 28 flex: 1; 29 font-size: 0px; 30 } 31 32 header .F_Search .SearchText ul { 33 font-size: 12px; 34 display: flex; /*IE必要元素*/ 35 flex-direction: row; 36 } 37 38 header .F_Search .SearchText ul li { 39 padding: 10px; 40 padding-top: 5px; 41 box-sizing: border-box; 42 cursor: pointer; 43 color: #A599B0; 44 } 45 46 header .Search { 47 width: 80%; 48 height: 35px; 49 border-radius: 10px 0 0 10px; 50 border: 1px solid #F9C801; 51 vertical-align: middle; 52 } 53 54 header .SearchBtn { 55 width: 20%; 56 vertical-align: middle; 57 border: 0px; 58 height: 37px; 59 width: 60px; 60 border-radius: 0 10px 10px 0; 61 background: url('../Img/search2.png') no-repeat center center; 62 background-color: #F9C801; 63 cursor: pointer; 64 } 65 66 header .link { 67 display: -webkit-flex; 68 display: flex; /*IE必要元素*/ 69 flex-direction: row; 70 align-items: center; 71 } 72 73 header .link img { 74 padding-left: 20px; 75 padding-right: 20px; 76 } 77 78 header .link img:hover { 79 transform: rotate(360deg); 80 transition: transform 2s; 81 } 82 83 header .link h2 { 84 color: #596794; 85 } 86 87 header .link span { 88 padding-left: 20px; 89 color: #596794; 90 }
@media only screen and (min-width: 320px) and (max-width: 1000px) {
header {
top: 0;
position: fixed;
padding: 0px;
width: 100%;
}
header .F_Search {
width:100%;
font-size: 0px;
}
header .logo,header .link,header .SearchText{
display: none;
}
}
