Html5 + Css3 small scale chopper

Antecedents:

　　I started to be a collection system, customer suddenly came to be inserted into a task, it is said very concerned about their boss, a small shopping mall, a home, a details page, UI no free play, requirements, try to look good points.

After some conversation, confirmed that this is a external website, best mobile terminal can display normal (responsive).

text:

　　The front end of this one I have been thinking to raise my own, just to have this opportunity, then went to see what Html 5 and Css3 find a lot of property is convenient than ever before, in which case such as retractable flex; inside flex-direction, align-items , justify-content attribute indeed greatly facilitate the layout.

html Because of the new label header html5, footer, article, section, nav, etc. to join, layout no longer rely solely on 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></ <12>
                     ><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: layout using flex elastic style layout here shows the head, the rest of similar

 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 is      Flex-direction : Row ; / * in a row * /
 13 is      align = left-items : Center ; / * vertical center * / 
14      padding : 30px ;
 15      Box-Sizing : border-Box ;
 16      The justify-Content : Space-BETWEEN ; / * dispersed inside the intermediate element has gaps * / 
. 17      border-bottom : 1px Solid E6E6E6 # ;
 18 is }
 . 19  
20 is      header .logo {
 21 is          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;
}
}

Html5 + Css3 small scale chopper

Guess you like